Världen av programvara för grafisk design är enorm och har stor konkurrens. Figma är ett designverktyg som tävlar mot topplaceringen för UX/UI-designers runt om i världen. Men vad vet du om detta intuitiva verktyg?
Även om det är enkelt, finns det också en inlärningskurva om du är van vid andra designverktyg. Låt oss titta på Figma och hur man använder det. Välkommen till Figma 101.
Vad är Figma?
Om du har arbetat som grafisk designer eller webbdesigner under de senaste åren har du förmodligen hört talas om Figma. Du kanske till och med har använt det.
Figma är ett designverktyg och det har ständigt blivit en favorit för digitala designers, som skjuter i höjden över alternativ som Adobe XD, Adobe Photoshop och Sketch, för webbdesign och mer. Men sedan Adobe förvärvade Figma 2022, kan det finnas några ändringar som kommer att blanda om topplistan.
Det finns
många användningsområden för Figma. Det används främst för digital design, och du kan inte designa i CMYK för tryck. Några av de huvudsakliga användningsområdena för Figma inkluderar:- Prototypframställning
- UX/UI design
- App design
- webbdesign
- Presentationsdesign
Du kan använd Figma mockup plugins för att visa upp dina mönster, konvertera riktiga webbsidor till Figma-designer använda plugins och till och med skapa mastermallar för Figma-designer för att spara tid i repetitiva designtyper.
Hur mycket kostar Figma?
Du kan skapa ett Figma-konto gratis på Figma webbplats eller genom att ladda ner Figma app. Ett gratis konto ger funktionalitet för alla designaspekter av appen. Du kan designa med Figma och FigJam – Figmas samarbetsverktyg.
Om du använder Figma som hobbyist eller som ensam frilansare är Free Forever-versionen nästan perfekt. Du har fortfarande tillgång till alla plugins, kan bjuda in obegränsat antal medarbetare, använda obegränsade personliga filer och använda Figma från alla plattformar.
Medan den kostnadsfria versionen av Figma erbjuder mer än tillräckligt för alla standarddesigners, låter ett Figma Professional-abonnemang dig det bjud in lagkamrater, arbeta från teambibliotek, ha tillgång till obegränsade Figma-filer och versionshistorik och mer, för $12 per månad per redaktör. Om du är student eller utbildare kan du få Figma Professional gratis.
Hur man använder Figma: Grunderna
Oavsett om du använder Figma-appen eller webbläsarversionen kan du enkelt följa med.
När du öppnar Figma kommer du att presenteras med alternativ för att starta en ny Figma-fil, en ny FigJam-fil eller importera en fil gjord i ett annat program, som Sketch eller Adobe XD. Om du har använt Figma tidigare kommer du också att se dina tidigare Figma-projekt som du kan öppna och arbeta med.
Navigera i Figma Workspace
Att öppna en ny fil ser till en början oinspirerande ut. Till skillnad från många andra designprogram börjar du inte med din rityta eller duk, utan en helt tom designsida. Men med ett sinne fullt av inspiration förblir det inte ett tomt utrymme länge.
Den övre vänstra horisontella menyn börjar med Huvudmeny ikon — Figma-logotypen. Att välja Huvudmeny, du kan navigera till dina andra filer, Figma snabba åtgärder, typiska filalternativ och tillgång till plugins, widgets och bibliotek.
Därefter hittar du Flytta verktyg (V), med Skala verktyg (K) inbäddat under den. Dessa verktyg är till för att flytta element eller skala delar av din design upp eller ner. Och till höger om dessa verktyg ser du regionverktygen, Ram (F), Sektion, och Skiva, inbäddat tillsammans.
I Figma är en ram vad andra program kan kalla en rityta eller duk. Välj Ram för att rita din egen storlek på duk. När den är markerad kommer den högra menyn att presentera förgjorda ramalternativ för vanliga enhetsstorlekar: smartphones, surfplattor, stationära datorer, smartklockor, presentationer och alternativ för sociala medier. Du kan också klicka och dra din ram direkt för att göra den till valfri anpassad storlek.
Tillbaka till den övre vänstra menyn, till höger om regionverktygen finns Form verktyg, Penna verktyg och Text verktyg. Följt sedan av resurser—Komponenter, Plugins, och Widgets-och den Hand verktyg för att flytta runt din fil. Och slutligen Kommentarer verktyg som är utmärkt för att göra anteckningar och samarbeta med lagkamrater.
Figma Design Menu
Med en ram utarbetad och val av dess titel aktiveras ramen, redo för design. Den högra menyn visar titlar för Design, Prototyp, och Inspektera. Som namnet antyder är designalternativet menyn du använder för att designa elementen på din ram.
Även om den ursprungliga designmenyn är något förenklad, när du lägger till fler element i din design, utvecklas menyalternativen. Till en början körs menyn uppifrån och ned med justeringsverktyg, storleksverktyg, Automatisk layout, Layoutrutnät, Lager, Fylla, Stroke, Effekter, och Exportera. Vissa av dessa minimeras som standard men genom att klicka på + tecken, du kan öppna valfri meny eller träff – för att minimera det.
När du har ritat din huvudram för projektet kan du använda formverktyg eller pennverktyg för att rita former eller lägg till bildplatshållare och du kan lägga till text med hjälp av textverktyget på sätt som du förmodligen har gjort på andra programvara.
När du har former eller text på ramen, använd de olika menyalternativen till höger för att redigera och designa dessa element. De Lager menyn erbjuder opacitet och blandningslägen; med Fylla du kan lägga till färg eller infoga bilder med några redigeringsfunktioner som Exponering, Kontrast, Temperatur, och mer.
När du bygger upp fler element i ditt projekt kommer lagren att bildas på vänster sida Skikten menyn bredvid Tillgångar flik. Du kan dubbelklicka på en lagertitel för att hitta elementet och vice versa; Du kan dubbelklicka på ett designelement för att hitta det markerade lagret. Genom att dubbelklicka på titlar kan du byta namn på dem för optimal organisation.
Figma Prototyp-menyn
Till höger om Design menyalternativet är Prototyp meny. När du har slutfört de visuella aspekterna av din design och ställt in bildrutor och text där de ska hamna, kan du använda prototypverktygen för att lägga till animationer och övergångar till dina mönster.
De Prototyp menyn låter dig koppla samman ramar eller komponenter som övergångar. Du kan välja vilken ordning och hur varje ram övergår till en annan.
Detta fungerar utmärkt om du är det göra en Figma-presentation som animerar från en bild till nästa, men verktyget låter dig också på ett sakkunnigt sätt visualisera animationer för knappar eller menyer för app- och webbdesign. Du kan lägga till flera övergångar per sida för alla olika saker, så att du kan se hur användare skulle interagera med din webbplats när den är live.
Även om det inte är samma sak att använda Figma för att designa en webbplats som att skapa en livewebbplats, kan du lämna över din Figma design till ditt utvecklarteam som kan återskapa dina prototypinteraktioner som verkliga animationsdesigner för din hemsida. Det betyder att du kan gå över från sida till sida från klick, tid eller andra interaktioner.
Det är enkelt att komma igång med Figma
Nu vet du hur du navigerar i Figma-layouten och hur de grundläggande design- och prototypverktygen fungerar. Eftersom Figma är så lättillgängligt är det dags att gå och mixtra med detta designverktyg och se vad du kan skapa.