Hur man skapar former i Figma? Figma för nybörjare #4

I den här artikeln hittar du en beskrivning av verktygen för att skapa och modifiera former som kommer att utgöra var och en av dina projekt. Du kommer att lära dig om grundläggande alternativ för formredigering och mer avancerade funktioner som booleska grupper och maskskapande. Hur skapar man former i Figma? Läs och ta reda på.

Hur man skapar former i Figma – innehållsförteckning:

1. Lägga till former
2. Egenskapspanel – Design
3. Redigera objekt
4. Booleska grupper
5. Masker

Lägga till former

Du kan lägga till en form med hjälp av funktionen Formverktyg som du hittar i Verktygsfältet. Denna funktion gör att du kan skapa grundläggande vektorformer: rektangel, linje, pil, ellips, polygon, stjärna.

Du kan också skapa anpassade former med hjälp av Ritverktyg. Du kan välja antingen en Penn eller en Penna.

Precis som i fallet med ramar finns det många sätt att skapa former:

• Efter att ha valt en form från listan med Formverktyg, klicka på ramen eller Canvas-området. Detta kommer att skapa en form med en standardstorlek på 100×100 px.
• Om du vill ha kontroll över storleken på det skapade elementet, klicka på ramen eller Canvas-området och håll ner vänster musknapp, sedan kan du manipulera storleken på formen genom att flytta.
• Om du vill skapa en perfekt kvadrat, cirkel eller polygon, håll ner Shift-tangenten medan du drar.

Varje form, textobjekt eller bild som du lägger till på Canvas kommer att vara ett separat lager. Detta gör att du kan modifiera de individuella egenskaperna för varje element.

Egenskapspanel – Design

Du kan visa och redigera objektets egenskaper i Design-fliken i Egenskapspanelen. Typen av lager avgör vilka parametrar som visas här. De flesta parametrar är desamma i alla lagertyper. Om du inte väljer något lager kommer Egenskapspanelen att visa alla lokala stilar för filen och Canvas-färgen.

I Design-fliken kan du lägga till följande parametrar:

1. Justering – justeringsverktyg gör att du kan justera lagren på Canvas korrekt i förhållande till varandra. Dessa funktioner är endast tillgängliga när två eller fler lager är valda.

2. Distribution och Rensa upp – denna funktion gör att du kan organisera lagren genom att skapa lika avstånd mellan dem. Dessa funktioner är endast tillgängliga när två eller fler lager är valda.

3. Position av Canvas (X och Y) – här kan du justera positionen av lagren på Canvas längs de horisontella (X) och vertikala (Y) axlarna.

4. Dimensioner av objektet (Bredd och Höjd) – här kan du ändra storleken på ett lager.

5. Bevara proportioner – gör att du kan behålla proportionerna av formen medan du ändrar storlek. Du kan ändra höjden eller bredden på formen, och den andra parametern justeras automatiskt.

6. Rotation – här kan du ställa in vinkeln på en ram.

7. Hörnradie – med denna funktion kan du runda hörnen på ramen.

8. Oberoende hörn – inställningen för oberoende hörn låter dig justera hörnradien för varje hörn.

9. Lager (Blandningslägen) – här kan du specificera hur två lager ska blandas ihop. Du kan tillämpa endast ett blandningsläge på varje lager.

10. Fyllning och Stroke – du kan tillämpa fyllningar och konturer på former och textlager. För att lägga till en fyllning eller kontur, välj det önskade lagret och klicka på + ikonen. Du kan lägga till flera fyllningar och konturer till varje lager.

För fyllningar och konturer är Solid färg inställd som standard. För att justera egenskaperna, klicka på färgprovet. Detta öppnar färgsektorn, där alternativen är tillgängliga: Solid färg, gradient (linjär, radial, vinkel, diamant) och bild.

Om du behöver modifiera stroke-stilen mer kan du använda Avancerade stroke-inställningar, som finns under ellipsikonen.

Användbar tips: Du kan slå på och av synligheten för varje egenskap i det aktiva lagret med hjälp av Öga-ikonen. Aktiva egenskaper kommer att visas i svart, så att du enkelt kan särskilja dem från de inaktiva.

11.Effekter – här kan du lägga till en skugga eller oskärpa till lagret. För att justera effektvärdena, klicka på Effektinställningar, som ligger under knappen med solikonen.

12.Exportinställningar – här kan du exportera det valda lagret till det format du önskar: PNG, JPG, SVG och PDF.

Uppgift 4.1. Planera layouten av gränssnittselementen i din applikation. Först, skapa wireframes med hjälp av enkla former.

Användbar tips: Kom ihåg att ge varje lager lämpliga namn regelbundet. Om du inte håller koll på detta kommer du säkert att göra en röra i dina lager.

Låt oss börja med inloggningsskärmen:

• Överst på skärmen kommer vi att placera logotypen för den applikation som designas.
• Det kommer att finnas platshållare med etiketter nedan: inloggning och lösenord. Vid detta tillfälle kan du markera platsen för texten med en rektangel.
• I botten av skärmen kommer vi att placera inloggningsknappen.

Användbar tips: Om du letar efter en logotyp för ditt projekt, besök denna webbplats: https://www.freepik.com/free-photos-vectors/logo och ladda ner den gratis.

Varje fil på Freepik.com har en licensnotis. Innan du laddar ner, se till att dess licens tillåter dig att använda den som du behöver.

Du kan också använda en logotyp som finns i “Logotyp skapare”-pluginet.

Nu ska vi ta itu med Hem-ramen:

• Vi kommer att placera en sökfält högst upp på skärmen.
• Det kommer att finnas rubriken “Bästsäljare” nedan.
• Under rubriken kommer vi att placera produktbilder i två kolumner. Skapa en rektangel som passar en kolumn och duplicera den flera gånger.
• Under varje produkt bör det finnas lite utrymme för dess namn och pris.
• En annan del av vårt gränssnitt kommer att vara den nedre raden, där vi kommer att placera ikoner: hem, favorit, profil, korg.

Användbar tips: Du kan enkelt lägga till ikoner i ditt projekt genom att kopiera dem från Figma-biblioteket.

Gemenskap. Du hittar en provfil här: https://www.figma.com/community/file/1118814949321037573.

Klicka bara på Få en kopia knappen så öppnas Iconia filen – en helt redigerbar ikonpaket med 1 300+ färdiga och skalbara vektorikoner i 6 unika stilar. För att kopiera de valda ikonerna, gå till Iconia-bibliotekets sida i lagerpanelen.

Hitta ikonen du vill använda i din fil, högerklicka på den och klicka på Kopiera. Gå sedan tillbaka till din fil, högerklicka var som helst igen och välj Klistra in här. En annan metod för att lägga till ikoner är att använda plugins.

Kom ihåg att konsekvens i gränssnittet är mycket viktigt. Bestäm dig för en stil av ikoner och håll dig till den överallt i din applikation. Tillämpa samma princip senare på textstilar, bildstorlekar och andra element.

När du har planerat layouten av elementen på hemsidan kan du gå vidare till Produkt-ramen:

• Överst på skärmen kommer vi att placera “Tillbaka”-knappen på vänster sida.
• Det kommer att finnas ett stort foto av produkten nedan.
• I det högra hörnet av fotot kommer vi att placera en knapp med “favorit”-ikonen.
• Under fotot kommer vi att placera namnet och priset på produkten och utrymme för en beskrivning.
• I botten av skärmen kommer vi att lägga till en CTA-knapp “Lägg till i kundvagn”.

Redigera objekt

Du kan enkelt modifiera alla former med hjälp av verktyget Redigera objekt som finns i mitten av Verktygsfältet. För att använda denna funktion måste du först välja den form som du vill modifiera.

Aktivering av redigeringsläget kommer att få nya funktioner att dyka upp i Verktygsfältet, och du kommer att se hörnpunkter på den redigerade formen. Du kan klicka på den önskade hörnpunkten och dra den för att ändra formen på en form.

Du kan också lägga till andra Hörnpunkter till formen med hjälp av Pennverktyget. Detta gör att du kan göra fler modifieringar.

Du kan fritt böja former med hjälp av Böjverktyget. Välj Böjverktyget i Verktygsfältet, och klicka sedan på den valda hörnpunkten.

Verktyget Färgburk gör att du kan ta bort och återställa fyllningen av en form. För att göra detta, välj Färgburk och klicka sedan på den form du redigerar.

För att avsluta redigeringsläget, klicka på Klart.

Booleska grupper

Om du väljer två eller fler former, dyker verktyget Booleska grupper upp i Verktygsfältet. Det gör att du kan skapa anpassade former genom att kombinera dem, med hjälp av en av de fyra tillgängliga formlerna: union, subtrahera, skärning, exkludera.

• union selection – kombinerar de valda formerna till en ny form.

• subtract selection – subtraherar alla övre former och deras överlappande områden från den lägsta formen

• intersect selection – den nya formen består endast av överlappande fragment av de valda formerna

• exclude selection – den skapade formen består endast av fragment av de valda formerna som inte överlappar.

Efter att ha tillämpat verktyget Booleska grupper smälter alla de valda formerna samman till ett enda lager, vilket innebär att de delar fyllnings- och stroke-egenskaper. Du kan kombinera dem med andra former och utföra ytterligare logiska operationer.

Uppgift 4.2. Öva på att modifiera former med hjälp av Redigera objekt och Booleska grupper. Även om du inte behöver dessa funktioner i detta skede av ditt projekt, är det värt att befästa din kunskap genom praktik. Var kreativ och ha kul. Du kan också försöka återskapa de provformer du ser i följande skärmdump. För att göra detta, skapa en ny sida i filen eller lägg till objekt bredvid ramarna med projektet, och ta sedan helt enkelt bort dem.

Masker

Masker gör att du kan visa endast valda områden av en bild och dölja resten utan att beskära. Detta innebär att ingen del av lagren i maskeringsprocessen tas bort eller modifieras, så att du kan modifiera masken när som helst om du vill visa en annan del av bilden.

För att förstå detta bättre kan du föreställa dig en bildram med en liten öppning. Du kommer bara att se en del av fotot i den, medan resten är dolt, men om du öppnar ramen kan du fortfarande se hela fotot.

Du kan använda vilket lager som helst som en mask, såsom vektorformer, textlager och bilder. Ordningen på lagren är mycket viktig. Det lägsta lagret anses vara behållaren för masken, det vill säga öppningen genom vilken du kommer att se bilden.

För att skapa en mask, se till att lagren är korrekt justerade. Välj sedan båda lagren och välj Använd som mask i Verktygsfältet.

Alla yttre områden av lagret som ligger ovanför behållaren kommer att döljas. Endast de områden som kommer att vara inom maskområdet kommer att förbli synliga.

Uppgift 4.3. Använd masker för att lägga till produktbilder i din design. Kom ihåg den korrekta ordningen av lager. Lagret som kommer att vara behållaren måste ligga under bildlagret.

Användbar tips: Du kan ladda ner gratis bilder för dina projekt från webbplatsen https://unsplash.com.

Du kan också använda “Unsplash”-pluginet.

Du har just lärt dig hur man skapar former i Figma. Läs också: 10 användbarhetsheuristik för UX-design.

Om du gillar vårt innehåll, gå med i vår aktiva gemenskap av busy bees på Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.