Hur man använder bibliotek i Figma? | Figma för nybörjare #6

Hur skapar man stilar och komponentbibliotek i Figma? Hur använder man dem i sina filer och delar dem med andra teammedlemmar? Du kommer att hitta svaret i följande artikel. Genom att använda stilar är det lättare att hålla saker konsekventa i teamprojekt. Läs vidare.

Bibliotek i Figma – innehållsförteckning:

1. Stilar
2. Komponenter
3. Publicera stilar och komponenter i ett bibliotek

Stilar

Dessa är uppsättningar av egenskaper som kan tillämpas på lager i projekt. För att skapa en stil måste du först välja objektet vars egenskaper du vill spara. Klicka sedan på Stilikonen i Egenskapspanelen bredvid den valda egenskapen, och klicka sedan på + ikonen.

En ruta öppnas där du måste ange namnet på den stil du skapar. Klicka på Skapa stil.

Du kommer att se de skapade stilarna i Egenskapspanelen när inga objekt är valda.

I Redigera stilar-panelen kan du lägga till en beskrivning och redigera egenskaperna för varje stil. När du gör ändringar i egenskaperna för den valda stilen kommer dessa ändringar att tillämpas på alla objekt som använder den.

Du kan skapa följande stilar:

Färg (färger) stilar – för fyllningar och linjer, text och bakgrunder, och till och med för bilder och gradienter.

Textstilar – tack vare textstilar kan du definiera stilar för rubriker och brödtext. Du kan tillämpa textstilar på en hel textblock eller endast på en del av texten i blocket. Du kan definiera: typsnitt, storlek, radavstånd, mellanrum.

Obs: med textstilar kan du inte ställa in textjustering.

Effekter – här kan du definiera skugga och suddighetsattribut.

Layoutgallerier – att skapa Layoutgallerier stilar är användbart om du vill duplicera en viss struktur i flera projekt.

För att tillämpa en stil på det aktiva lagret, klicka på Stilikonen i Egenskapspanelen bredvid den valda egenskapen, och välj stilen från listan.

För att ta bort en stil från det aktiva lagret, klicka på Frigör stilar. Detta är användbart när du vill göra ändringar i ett objekt utan att påverka stilen.

Uppgift 6.1. Öva på att skapa stilar i Figma. Skapa stilar för avsnittsrubriker på hemsidan, produktnamn och priser.

Komponenter

Dessa är byggstenarna i dina designer som du kan återanvända. De kan vara ikoner, knappar eller mer komplexa element. Komponenter hjälper till att hålla dina designer konsekventa och gör att du snabbt kan göra ändringar i flera filer och projekt.

För att skapa en komponent måste du först välja de lager som kommer att utgöra komponenten och sedan klicka på Skapa komponent i Verktygsfältet.

Komponentlagren kommer att inbäddas i en speciell ram och markeras i lila, så att du enkelt kan särskilja dem från andra lager i Lagerpanelen.

Komponenter får automatiska namn. Du kan döpa om komponenter i Lagerfliken. Precis som i fallet med andra lager, dubbelklicka på namnet. Efter att ha valt en komponent i Egenskapspanelen kan du lägga till en komponentbeskrivning och Dokumentationslänk för teammedlemmar.

Du kan se komponenterna i Tillgångarfliken i Lagerpanelen.

Uppgift 6.2. Öva på att skapa komponenter i Figma. Skapa följande komponenter:

• en sökfält – bestående av en platshållare, förstoringsglasikon och “Sök” text,
• en bottenfält – bestående av en rektangel och ikoner,
• CTA-knappar – bestående av en rektangel och text.

Publicera stilar och komponenter i ett bibliotek

När du skapar stilar och komponenter har du endast tillgång till dem i den aktuella filen. För att använda stilar och komponenter i andra filer kan du publicera dem i biblioteket. Alternativet att dela stilar finns i Verktygsfältet – expandera menyn bredvid filnamnet och klicka på Publicera stilar och komponenter.

Du har just lärt dig hur man använder bibliotek i Figma. Läs också: Vad gör en UX-designer?

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