Hur man skapar en frostat glaseffekt i Figma

Frostat glas fungerar bra för avskildhet eller för att lägga till subtilitet till en design, i verkliga och digitala mönster. Att skapa en frostat glaseffekt är enkelt i Figma och kan ge en unik stil till dina mönster på ett sätt som ser mycket mer komplext ut än det är. Låt oss visa dig hur.

Hur man skapar en frostad glaseffekt

För den fulla effekten av frostat glas bör du redan ha någon sorts bakgrundsbild i din design. Effekten fungerar bäst ovanpå fotografiska eller visuellt komplexa bilder, snarare än bara vanliga färgblock eller vanliga bakgrunder.

Vi använder den frostade glaseffekten som en punktindikator på en presentationsdesign för att lägga till en elegant, minimalistisk effekt till presentationen. Detta ger lite extra känsla till dina mönster snarare än att bara använda en enkel linje eller vanlig punkt som en indikator.

Du kan skapa en mastermall för presentationer i Figma och använd den här frostade glaseffekten i den. Om du vill skapa en snygg punktindikator följer du bara med.

1. Dra ett streck

Rita din linje med hjälp av Linjeverktyg (L). Håll nedtryckt för att hålla linjen horisontell Flytta medan du ritar den. Välj en färg för linjen genom att klicka på den färgade fyrkanten under Stroke medan linjen är vald.

Färgen ska vara tillräckligt mörk för att kontrastera din bakgrund, men den måste också se bra ut med färgerna i din presentation. Du kan använd Adobe Illustrator för att skapa en färgpalett att hitta färger som fungerar tillsammans.

Ändra bredden på linjen i Stroke-inställningarna; klicka på ikonen med tre horisontella linjer och öka antalet till önskad tjocklek. För att få rundade ändar, klicka på rullgardinsmenyn med en horisontell linje i Stroke-menyn och rulla till botten av rullgardinsmenyn för alternativet för rundade ändar.

2. Rita en cirkel

Rita en liten cirkel med hjälp av Ellipsverktyg (O). Håll ner Flytta samtidigt som du ritar cirkeln för att göra den perfekt sfärisk. Din cirkel ska vara tillräckligt liten för att kunna användas som en kulpunkt, men tillräckligt stor för att det frostade glaset ska synas.

För att lägga till färg, välj cirkeln och använd Fylla på det högra verktygsfältet. Du kan använda en neutral färg – som grå eller beige – eller en ljusare färg från din designs färgpalett.

Ändra sedan opacitet bredvid Fylla till någonstans mellan 40 % och 70 %. Du vill kunna se designen bakom cirkeln samtidigt som du ser färgen du har fyllt cirkeln med.

3. Lägg till en bakgrundsoskärpa

Detta är den del som ger den frostade effekten till din form. Välj cirkeln och gå till Effekter. Standardeffekten är Drop Shadow, håll muspekaren över den och klicka på pilen som visas. Välja Bakgrundsskärpa.

För att öka eller minska oskärpan, klicka på ikonen bredvid Bakgrundsoskärpa och ändra siffran till önskad oskärpa effekt.

För att slutföra din punktindikator, flytta linjen så att den är i linje med kanten på din cirkel. Markera både linjen och cirkeln, högerklicka och välj Gruppval. Nu kan du flytta eller duplicera detta för användning på olika delar av din design.

Oskärpan fungerar över vilken del av designen som helst på samma sätt, som visas i ett annat exempel vi gjorde ovan. Varför inte inkludera denna teknik en kreativ designutmaning? Effekten kommer att bli en stor designtillgång.

Lägg till elegant minimalism till dina mönster med en frostat glaseffekt

Den frostade glaseffekten i Figma är ett enkelt sätt att lägga till lite elegant stil till annars enkla designaspekter. Du kan använda frostat glas-effekt på många sätt, till exempel fullfärgspaneler, sökfält eller sekretessfönster över design. Försök att lägga till en kant, göra en gradient eller placera det frostade lagret mellan andra lager för en viss strukturskillnad.

Hur man skapar och lägger till mockups till dina Figma-designer med hjälp av plugins

Läs Nästa