Verden af grafisk designsoftware er enorm og har stor konkurrence. Figma er et designværktøj, der kører til topplaceringen for UX/UI-designere over hele kloden. Men hvad ved du om dette intuitive værktøj?
Selvom det er enkelt, er der også en indlæringskurve, hvis du er vant til andre designværktøjer. Lad os se på Figma og hvordan man bruger det. Velkommen til Figma 101.
Hvad er Figma?
Hvis du har arbejdet som grafisk designer eller webdesigner i de sidste mange år, har du sandsynligvis hørt om Figma. Du har måske endda brugt det.
Figma er et designværktøj, og det er støt og roligt blevet en favorit blandt digitale designere, der svæver over muligheder som Adobe XD, Adobe Photoshop og Sketch til webdesign og mere. Dog siden Adobe købte Figma i 2022, kan der være nogle ændringer, der vil omrokere ranglisten.
Der er mange anvendelsesmuligheder for Figma
. Det bruges primært til digitalt design, og du kan ikke designe i CMYK til print. Nogle af de vigtigste anvendelser af Figma inkluderer:- Prototyping
- UX/UI design
- App design
- webdesign
- Præsentationsdesign
Du kan brug Figma mockup plugins hjælpe med at vise dine designs frem, konverter rigtige websider til Figma-designs bruge plugins, og endda oprette master skabeloner til Figma designs for at spare dig tid i gentagne designtyper.
Hvor meget koster Figma?
Du kan oprette en Figma-konto gratis på Figma websted eller ved at downloade Figma app. En gratis konto giver funktionalitet til alle designaspekter af appen. Du kan designe med Figma og FigJam - Figmas samarbejdsværktøj.
Hvis du bruger Figma som hobbyist eller som selvstændig freelancer, er Free Forever-versionen næsten perfekt. Du har stadig adgang til alle plugins, kan invitere ubegrænsede samarbejdspartnere, bruge ubegrænsede personlige filer og bruge Figma fra alle platforme.
Mens den gratis version af Figma tilbyder mere end nok til enhver standarddesigner, giver et Figma Professional-abonnement dig mulighed for det inviter holdkammerater, arbejd fra teambiblioteker, få adgang til ubegrænset Figma-filer og versionshistorik og mere for $12 pr. måned pr. redaktør. Hvis du er studerende eller underviser, kan du få Figma Professional gratis.
Sådan bruges Figma: Grundlæggende
Uanset om du bruger Figma-appen eller browserversionen, kan du nemt følge med.
Når du åbner Figma, vil du blive præsenteret for muligheder for at starte en ny Figma-fil, en ny FigJam-fil eller importere en fil lavet i et andet program, som Sketch eller Adobe XD. Hvis du har brugt Figma før, vil du også se dine tidligere Figma-projekter, som du kan åbne og arbejde på.
Navigering i Figma Workspace
Åbning af en ny fil ser i første omgang uinspirerende ud. I modsætning til mange andre designprogrammer starter du ikke med dit tegnebræt eller lærred, men en helt tom designside. Men med et sind fuld af inspiration, vil det ikke forblive et tomt rum længe.
Den øverste venstre vandrette menu starter med Hovedmenu ikon - Figma-logoet. Valg af Hovedmenu, du kan navigere til dine andre filer, Figma hurtige handlinger, typiske filindstillinger og adgang til plugins, widgets og biblioteker.
Dernæst finder du Bevæge sig værktøj (V), med vægt værktøj (K) indlejret under den. Disse værktøjer er til at flytte elementer eller skalere dele af dit design op eller ned. Og til højre for disse værktøjer kan du se Regionsværktøjerne, Ramme (F), Afsnit, og Skive, beliggende sammen.
I Figma er en ramme, hvad andre programmer kan kalde et tegnebræt eller lærred. Vælg Ramme at tegne dit lærred i specialstørrelse. Når den er valgt, vil menuen til højre præsentere præfabrikerede rammeindstillinger for almindelige enhedsstørrelser: smartphones, tablets, desktops, smartwatches, præsentationer og muligheder for sociale medier. Du kan også klikke og trække din ramme direkte for at gøre den til enhver brugerdefineret størrelse.
Tilbage til menuen øverst til venstre, til højre for regionsværktøjerne er Form værktøjer, Pen værktøjer og Tekst værktøj. Efterfulgt af ressourcer—Komponenter, Plugins, og Widgets-og Hånd værktøj til at flytte rundt på din fil. Og endelig Kommentarer værktøj, som er fantastisk til at lave noter og samarbejde med holdkammerater.
Figma Design Menu
Når en ramme er tegnet op, aktiveres rammen ved at vælge dens titel, klar til design. Menuen til højre viser titler for Design, Prototype, og Inspicere. Som navnet antyder, er indstillingen Design den menu, du vil bruge til at designe elementerne på din ramme.
Mens den indledende designmenu er noget forenklet, udvikler menumulighederne sig, efterhånden som du tilføjer flere elementer til dit design. Først kører menuen fra top til bund med justeringsværktøjer, størrelsesværktøjer, Auto layout, Layout gitter, Lag, Fylde, Slag, Effekter, og Eksport. Nogle af disse minimeres som standard, men ved at klikke på + underskrive, kan du åbne enhver menu eller hit – at minimere det.
Når du har tegnet din hovedramme til projektet, kan du bruge formværktøjer eller penværktøjer til at tegne figurer eller tilføje billedpladsholdere, og du kan tilføje tekst ved hjælp af tekstværktøjet på måder, som du sikkert har gjort på andre software.
Når du har figurer eller tekst på rammen, skal du bruge de forskellige menuindstillinger til højre til at redigere og designe disse elementer. Det Lag menuen tilbyder opacitet og blandingstilstande; med Fylde du kan tilføje farve eller indsætte billeder med nogle redigeringsfunktioner som f.eks Eksponering, Kontrast, Temperatur, og mere.
Efterhånden som du opbygger flere elementer i dit projekt, dannes lagene til venstre Lag menuen ved siden af Aktiver fanen. Du kan dobbeltklikke på en lagtitel for at finde elementet og omvendt; du kan dobbeltklikke på et designelement for at finde det fremhævede lag. Dobbeltklik på titler giver dig mulighed for at omdøbe dem for optimal organisation.
Figma prototypemenuen
Til højre for Design menupunktet er Prototype menu. Når du har færdiggjort de visuelle aspekter af dit design og indstillet billedbokse og tekst, hvor de skal hen, kan du bruge prototypeværktøjerne til at tilføje animationer og overgange til dine designs.
Det Prototype menu giver dig mulighed for at forbinde rammer eller komponenter sammen som overgange. Du kan vælge, hvilken rækkefølge og hvordan hver enkelt ramme skal overgå til en anden.
Dette fungerer godt, hvis du er lave en Figma-præsentation der animerer fra det ene dias til det næste, men værktøjet giver dig også professionelt mulighed for at visualisere animationer til knapper eller menuer til app- og webdesign. Du kan tilføje flere overgange pr. side for alle de forskellige ting, så du kan se, hvordan brugere vil interagere med dit websted, når det er live.
Selvom det ikke er det samme at bruge Figma til at designe et websted som at oprette et live-websted, kan du aflevere din Figma design til dit udviklerteam, der kan genskabe dine prototype-interaktioner som animationsdesign i det virkelige liv til din internet side. Det betyder, at du kan skifte fra side til side fra klik, tid eller andre interaktioner.
Det er nemt at komme i gang med Figma
Nu ved du, hvordan du navigerer i Figma-layoutet, og hvordan de grundlæggende design- og prototypeværktøjer fungerer. Da Figma er så let tilgængelig, er det tid til at gå og pille ved dette designværktøj og se, hvad du kan skabe.
