Verden av grafisk designprogramvare er enorm og har mye konkurranse. Figma er et designverktøy som raser mot topplasseringen for UX/UI-designere over hele verden. Men hva vet du om dette intuitive verktøyet?
Selv om det er enkelt, er det også en læringskurve hvis du er vant til andre designverktøy. La oss se på Figma og hvordan du bruker den. Velkommen til Figma 101.
Hva er Figma?
Hvis du har jobbet som grafisk designer eller webdesigner de siste årene, har du sannsynligvis hørt om Figma. Du har kanskje til og med brukt den.
Figma er et designverktøy, og det har stadig blitt en favoritt for digitale designere, og svever over alternativer som Adobe XD, Adobe Photoshop og Sketch, for webdesign og mer. Imidlertid siden Adobe kjøpte Figma i 2022, kan det være noen endringer som vil omstokke ledertavlen.
Det er mange bruksområder for Figma. Den brukes først og fremst til digital design, og du kan ikke designe i CMYK for utskrift. Noen av hovedbrukene til Figma inkluderer:
- Prototyping
- UX/UI design
- App design
- webdesign
- Presentasjonsdesign
Du kan bruk Figma mockup-plugins for å hjelpe med å vise frem designene dine, konverter ekte nettsider til Figma-design bruke plugins, og til og med lage mastermaler for Figma-design for å spare tid i repeterende designtyper.
Hvor mye koster Figma?
Du kan opprette en Figma-konto gratis på Figma nettsted eller ved å laste ned Figma-appen. En gratis konto gir funksjonalitet for alle designaspekter av appen. Du kan designe med Figma og FigJam – Figmas samarbeidsverktøy.
Hvis du bruker Figma som hobbyist eller som frilanser alene, er Free Forever-versjonen nesten perfekt. Du har fortsatt tilgang til alle plugins, kan invitere ubegrensede samarbeidspartnere, bruke ubegrensede personlige filer og bruke Figma fra alle plattformer.
Mens gratisversjonen av Figma tilbyr mer enn nok for enhver standarddesigner, lar et Figma Professional-abonnement deg gjøre det inviter lagkamerater, jobb fra teambiblioteker, ha tilgang til ubegrensede Figma-filer og versjonshistorikk, og mer, for $12 per måned pr. redaktør. Hvis du er student eller pedagog, kan du få Figma Professional gratis.
Slik bruker du Figma: Grunnleggende
Enten du bruker Figma-appen eller nettleserversjonen, kan du enkelt følge med.
Når du åpner Figma, vil du bli presentert med alternativer for å starte en ny Figma-fil, en ny FigJam-fil, eller importere en fil laget i et annet program, som Sketch eller Adobe XD. Hvis du har brukt Figma før, vil du også se dine tidligere Figma-prosjekter som du kan åpne og jobbe med.
Navigering i Figma Workspace
Å åpne en ny fil ser i utgangspunktet uinspirerende ut. I motsetning til mange andre designprogrammer, starter du ikke med tegnebrettet eller lerretet ditt, men en helt tom designside. Men med et sinn fullt av inspirasjon, vil det ikke forbli et tomt rom lenge.
Den horisontale menyen øverst til venstre starter med Hovedmeny ikon – Figma-logoen. Velge Hovedmeny, du kan navigere til de andre filene dine, Figma raske handlinger, typiske filalternativer og tilgang til plugins, widgets og biblioteker.
Deretter finner du Bevege seg verktøy (V), med Skala verktøy (K) plassert under den. Disse verktøyene er for å flytte elementer eller skalere deler av designet opp eller ned. Og til høyre for disse verktøyene ser du regionverktøyene, Ramme (F), Seksjon, og Skive, plassert sammen.
I Figma er en ramme det andre programmer kan kalle et tegnebrett eller lerret. Plukke ut Ramme for å tegne ditt egendefinerte lerret. Når den er valgt, vil høyremenyen presentere forhåndslagde rammealternativer for vanlige enhetsstørrelser: smarttelefoner, nettbrett, stasjonære datamaskiner, smartklokker, presentasjoner og alternativer for sosiale medier. Du kan også klikke og dra rammen direkte for å gjøre den til en egendefinert størrelse.
Tilbake til menyen øverst til venstre, til høyre for Region-verktøyene er Form verktøy, Penn verktøy, og Tekst verktøy. Etterfulgt av Ressurser—Komponenter, Plugins, og Widgets-og Hånd verktøy for å flytte rundt i filen. Og til slutt Kommentarer verktøy som er flott for å lage notater og samarbeide med lagkamerater.
Figma Design-menyen
Når en ramme er tegnet opp, aktiveres rammen ved å velge tittelen, klar for design. Menyen til høyre viser titler for Design, Prototype, og Undersøke. Som navnet antyder, er Design-alternativet menyen du vil bruke til å designe elementene på rammen din.
Mens den første designmenyen er noe forenklet, utvikler menyalternativene seg etter hvert som du legger til flere elementer i designet. Først går menyen fra topp til bunn med justeringsverktøy, størrelsesverktøy, Automatisk layout, Oppsett rutenett, Lag, Fylle, Slag, Effekter, og Eksport. Noen av disse er minimert som standard, men ved å klikke på + signere, kan du åpne hvilken som helst meny eller treff – for å minimere det.
Når du har tegnet hovedrammen for prosjektet, kan du bruke formverktøy eller pennverktøy til å tegne figurer eller legg til bildeplassholdere, og du kan legge til tekst ved å bruke tekstverktøyet på måter du sannsynligvis har gjort på andre programvare.
Når du har former eller tekst på rammen, kan du bruke de forskjellige menyalternativene til høyre for å redigere og designe disse elementene. De Lag menyen tilbyr opasitet og blandingsmoduser; med Fylle du kan legge til farger eller sette inn bilder med noen redigeringsfunksjoner som Eksponering, Kontrast, Temperatur, og mer.
Etter hvert som du bygger opp flere elementer i prosjektet ditt, vil lagene dannes på venstre side Lag menyen ved siden av Eiendeler fanen. Du kan dobbeltklikke på en lagtittel for å finne elementet, og omvendt; du kan dobbeltklikke på et designelement for å finne det uthevede laget. Ved å dobbeltklikke på titler kan du gi dem nytt navn for optimal organisering.
Figma Prototype-menyen
Til høyre for Design menyalternativet er Prototype Meny. Når du har fullført de visuelle aspektene av designet og satt bildebokser og tekst hvor de skal gå, kan du bruke prototypeverktøyene til å legge til animasjoner og overganger til designene dine.
De Prototype menyen lar deg koble rammer eller komponenter sammen som overganger. Du kan velge hvilken rekkefølge og hvordan hver ramme går over til en annen.
Dette fungerer utmerket hvis du er det lage en Figma-presentasjon som animerer fra ett lysbilde til det neste, men verktøyet lar deg også visualisere animasjoner for knapper eller menyer for app- og webdesign. Du kan legge til flere overganger per side for alle forskjellige ting, slik at du kan se hvordan brukere vil engasjere seg med nettstedet ditt når det er live.
Selv om bruk av Figma til å designe et nettsted ikke er det samme som å lage et live-nettsted, kan du levere Figma design til utviklerteamet ditt som kan gjenskape prototypeinteraksjonene dine som virkelige animasjonsdesign for din nettsted. Dette betyr at du kan gå over fra side til side fra klikk, tid eller andre interaksjoner.
Det er enkelt å komme i gang med Figma
Nå vet du hvordan du navigerer i Figma-oppsettet og hvordan de grunnleggende design- og prototypeverktøyene fungerer. Siden Figma er så lett tilgjengelig, er det på tide å tukle med dette designverktøyet og se hva du kan lage.
