Under de senaste åren har Figma snabbt vuxit i popularitet, och det är inte konstigt. Den gratis att använda molnbaserade programvaran är lättillgänglig på alla enheter och kräver inga avbetalningar eller nedladdningar. Från att designa gränssnitt för mobilappar till att tillverka inlägg på sociala medier, med Figma kan du experimentera med alla möjliga grafiska designfunktioner och utöka dina färdigheter.
För ännu mer konsistens i din design kan du överväga att använda komponenter i ditt arbete. Komponenter är användargränssnittselement (UI) som kan användas över flera filer på Figma. Dessa kan ofta vara ett starkt komplement till dina mönster och förbättra deras övergripande kvalitet.
Oavsett om du är ny på Figma eller har använt det ett tag och är osäker på hur du använder komponenter framgångsrikt, är vi här för att hjälpa dig.
I den här artikeln kommer vi att utforska hur du använder Figma-komponenter och hur detta kan hjälpa dig att lyfta ditt arbete.
Om du är intresserad av att ta reda på mer, fortsätt läsa.
Hur man använder komponenter i Figma
Att bemästra användningen av komponenter kan hjälpa dig med organisation och konsekvens när du använder Figma. Dessa UI-element kan användas om och om igen över olika designprojekt du kanske arbetar med. En komponent kan skapas i en ikon, knapp och mer, beroende på ditt projekt.
Det fantastiska med att introducera komponenter till din Figma-upplevelse är att det sparar dig mycket tid. Alla ändringar du kan göra i en komponent uppdateras automatiskt på de andra. Detta kan vara särskilt användbart om du har en snäv tidsram eller samarbetar med andra designers och vill påskynda ditt arbetsflöde.
När du kommer igång kommer du att märka att det finns två sidofält på varje sida av huvudduken du använder. Du kan använda verktyg från någon av dessa sidofält för att göra ändringar i ditt projekt.
Sidofältet på höger sida ger dig tillgång till alla prototypinställningar och låter dig justera eller redigera alla egenskaper för dina komponenter. Men sidofältet till vänster visar dig de lager, tillgångar och sidor som används i ditt projekt. Detta kallas för Layer Panel.
Komponenter bör introduceras till ditt arbete ganska tidigt. De hjälper dig att upprätthålla konsistens i dina konstruktioner och låter dig snabba upp den hastighet med vilken du gör ändringar i dina projekt. Det finns två nyckelelement i en komponent:
- Huvudkomponenten (eller huvudkomponenten) (fyrdubbel diamantikon)
- En instanskomponent (enkel diamantikon)
Huvudkomponenter
Före allt annat måste du först skapa huvudkomponenten. För att göra detta, följ stegen nedan:
- Högerklicka på ditt lager, grupp eller ram.
- Välj Skapa komponent.
- På vänster sida av skärmen ser du en rullgardinsmeny som säger Komponent. Klicka på detta.
- Härifrån kommer du att märka en meny där du kan göra ändringar i din komponent och designa om stilar över projekt.
Ett annat sätt att skapa en huvudkomponent är att använda genvägarna:
- Alternativ + Kommando + K för Mac
- Ctrl + Alt + K för Windows
Naturligtvis fungerar den här metoden bara om du använder Figma på en PC.
Direktkomponenter
En Instant Component är en kopia av din Master Component. När huvudkomponenten redigeras på något sätt uppdateras instansen automatiskt för att matcha alla ändringar som gjorts. Om du bygger en webbplats kan det här verktyget vara särskilt användbart och spara mycket tid. Till exempel skulle dagarna förbi när du manuellt gick in i alla dina komponenter för att upprepa samma redigeringar. Istället ändrar Figma dem alla åt dig.
Det kan komma en punkt där du har skapat flera instanser och skulle vilja gå tillbaka till din huvudkomponent så att du kan göra en snabb förändring av alla dina komponenter. För att komma åt din huvudkomponent, gör följande:
- Högerklicka på valfri instans.
- Klicka på Gå till huvudkomponent.
- Huvudkomponenten visas i sidofältet till vänster.
Även om det är relativt enkelt att göra komponenter en i taget; du kan påskynda saker genom att göra dem i bulk. För att göra detta, följ dessa steg:
hur man sätter musik på ipod classic utan itunes
- Från din Lagerpanel väljer du de lager där du vill skapa komponenter.
- Klicka på den nedåtvända pilikonen bredvid huvudkomponentikonen i lagerpanelen.
- Välj Skapa flera komponenter från de tillgängliga alternativen.
- Därifrån kommer Figma att göra en komponent för varje ramlager.
Ytterligare vanliga frågor
Hur åsidosätter eller kopplar jag bort en instans?
Det kan finnas tillfällen när du vill göra ändringar i en viss instanss egenskaper utan att ändra alla andra. Du kan göra varianter av olika komponenter. I Figma kallas detta överordnat.
När du väl åsidosätter en instans kommer alla ändringar som görs i huvudkomponenten inte att påverka den. För att göra detta, kolla in stegen nedan:
1. Klicka på din instanskomponent.
2. På panelen Egenskaper till höger på skärmen väljer du Komponent.
3. I rullgardinsmenyn som visas väljer du Ta bort instans.
Om du vill rensa en åsidosättande, välj komponenten och välj sedan Återställ instans från det övre mittfältet på skärmen.
Vad gör jag om jag av misstag raderar min huvudkomponent?
När du ägnar hela dagen åt att redigera innehåll kan du ibland råka halka och radera något viktigt, som din huvudkomponent. Var inte rädd, för att återställa det är så enkelt som 1-2-3. Följ bara dessa grundläggande steg för att få tillbaka den saknade huvudkomponenten:
1. Gå till en av instanserna av komponenten.
2. I egenskapspanelen till höger på skärmen väljer du Återställ huvudkomponent.
3. Huvudkomponenten visas omedelbart.
Hur lägger jag till en beskrivning för mina komponenter?
När du skapar dina komponenter kan du lägga till en beskrivning och en dokumentationslänk till var och en hjälpa dig att navigera i ditt projekt bättre. Det är också praktiskt för alla medarbetare som du kanske arbetar med att ha tillgång till ytterligare anteckningar. För att lägga till en beskrivning, gå till panelen Egenskaper till höger på sidan och välj Lägg till en beskrivning.
När du har gjort det kan alla externa tittare komma åt denna information genom att gå till inspektionspanelen i det högra sidofältet.
Hur importerar jag komponenter till Figma?
Du kan importera alla sorters filer till en Figma-komponent. Det enklaste sättet att göra det är från ditt skrivbord. Följ bara dessa steg:
1. I Figma, öppna sidan där du vill importera en fil.
2. Från dina filer, välj den specifika fil du vill använda.
3. Dra och släpp den valda filen till din Figma-sida.
4. När du är klar klickar du på Klar.
Vägen till framgång
Figma är ett bra verktyg att använda oavsett om du är ny inom design eller har varit med i spelet i flera år. Programvaran erbjuder ett nybörjarvänligt redigeringssystem där designers kan skapa innehåll från grunden eller använda hjälp av en mall om det behövs.
Att förstå hur man använder komponenter framgångsrikt på Figma kan spara mycket tid när du genomför ett designprojekt. Genom att lära dig hur man skapar ett högkvalitativt komponentsystem kommer du att kunna växa som designer. Inte bara det, utan det kan också hjälpa dig att upprätthålla ett konsekvent arbetsflöde under hela din kreativa resa och göra det möjligt för framtida medarbetare att enkelt hitta ditt arbete.
Har du testat att använda Figma för dina kreativa projekt? Hur hittade du att använda komponenter? Låt oss veta mer om din upplevelse i kommentarsfältet nedan.