Figma for nybegynnere: Design og prototyping trinn for trinn

Hvorfor Figma har tatt over designverdenen

Figma er i løpet av noen år blitt det dominerende verktøyet for UX/UI-design globalt — og i Norge. Det som skiller Figma fra tidligere verktøy som Sketch og Adobe XD er den nettbaserte arkitekturen: alt lagres i skyen, og flere designere kan jobbe i samme fil samtidig, akkurat som Google Docs.

For norske startups og designbyråer har dette vært transformerende. Utviklere, produkteiere og designere kan kommentere i samme fil uten å sende filer frem og tilbake.

Figma-planer: Gratis, Professional, Organization og Enterprise

Figma Starter (gratis) gir deg 3 Figma Design-filer, 3 FigJam-filer og 3 Figma Slides-filer, i tillegg til et ubegrenset antall skisser («drafts»). Andre kan inviteres til filene, men samarbeidspartnere på skisser får bare se-tilgang inntil kontoen oppgraderes til en betalt plan — likevel et godt utgangspunkt for nybegynnere og frilansere som starter med noen få prosjekter.

Figma Professional koster fra 16 dollar per måned for en full plass («Full seat») ved månedlig fakturering, med rimeligere plasser for utviklere («Dev seat», 12 dollar) og reine kommentatorer («Collab seat», 3 dollar). Planen fjerner grensen på antall filer og prosjekter og gir tilgang til delte designbiblioteker på tvers av team, samt avansert Dev Mode-inspeksjon. For norske designteam med mer enn 2–3 aktive prosjekter er dette som regel nivået som trengs.

Figma Organization koster fra 55 dollar per måned per full plass ved årlig fakturering og legger til sentralisert administrasjon og delte biblioteker og fonter på tvers av hele organisasjonen. Det øverste nivået, Enterprise, starter på 90 dollar per måned per full plass, også årlig fakturert, og gir blant annet dedikerte arbeidsområder og API-er for designsystemer — mest relevant for store norske bedrifter og offentlig sektor med behov for sentral styring.

Frames, lag og grunnleggende verktøy

I Figma er «frames» (rammer) den grunnleggende byggeklossen — tenk på det som artboards eller sider i et layout. Trykk F for å velge rammeverktøyet og klikk eller dra for å tegne en frame, eller velg en forhåndsdefinert størrelse (telefon, nettbrett, desktop) fra sidepanelet. Frames kan inneholde andre frames («nesting»), noe som gir stor fleksibilitet i oppsettdesign.

Lag-panelet til venstre viser hierarkiet av alle elementer i filen. God lagstruktur er avgjørende for at designet skal være vedlikeholdbart — gi lag beskrivende navn og grupper relaterte elementer.

Noen sentrale verktøysnarveier: F for rammeverktøyet, R for rektangel og T for tekstverktøyet. En frame dupliseres med Ctrl+D på Windows eller Cmd+D på Mac. Auto Layout (Shift+A) er en av Figmas kraftigste funksjoner og lar design-elementer justere seg automatisk basert på retning, avstand («gap») og indre polstring («padding»).

Komponenter: Gjenbrukbare designelementer

Komponenter er Figmas versjon av gjenbrukbare UI-elementer. Lag en komponent ved å velge et element og trykke Ctrl+Alt+K på Windows, eller Option+Cmd+K på Mac. Komponenten (hovedkomponenten) kan nå brukes om igjen i hele filen som «instanser». Endrer du hovedkomponenten, oppdateres alle instanser automatisk.

En typisk norsk bedrift vil ha komponenter for knapper (primær, sekundær, disabled), navigasjonselementer, kort-layouts og ikoner. Organiser disse i et dedikert «komponentbibliotek»-prosjekt som deles med teamet via Team Library.

Figma Community (figma.com/community) inneholder tusenvis av gratis komponentbiblioteker og maler fra designere over hele verden, deriblant Googles offisielle Material 3-designkit. Et godt startpunkt for nybegynnere er å finne et eksisterende bibliotek, duplisere det og tilpasse det til norsk innhold og fargepalett.

Prototyping og brukerflyt

Figmas prototype-modus lar deg koble frames med klikkbare overganger uten kode. Bytt til Prototype-fanen i høyre panel, og dra forbindelsespiler fra elementer til destinasjonsframes. Velg animasjonstype (Smart Animate, Push, Slide) og varighet.

Smart Animate er spesielt imponerende — Figma ser etter lag med samme navn og samme plassering i hierarkiet i to frames, og animerer overgangen mellom dem flytende. For norske app-prosjekter brukes dette ofte til å demonstrere skjermflyt for stakeholdere og brukertest-deltagere.

Del prototypen via Present-visningen og Share-knappen i verktøylinjen — mottakeren åpner lenken i nettleseren og kan klikke seg gjennom flyten uten å ha Figma installert. Ideelt for å innhente feedback fra norske kunder og sluttbrukere tidlig i prosessen.

Handoff til utviklere

Et av Figmas sterkeste salgsargumenter er utvikler-handoff. Dev Mode er tilgjengelig på alle Figmas betalte planer — ikke på gratisplanen — og lar utviklere se nøyaktige CSS-verdier, spacing, typografi og eksporterte assets for alle elementer i en fil, uten at designeren trenger å lage et separat spec-dokument.

Dev Mode viser automatisk CSS-egenskaper (font-size, color, padding, etc.) som norske frontend-utviklere kan kopiere direkte inn i koden.

Sørg for at designet bruker konsistente spacing-verdier (8px-grid er standard) og at farger er definert som styles i Figma. Da vil Dev Mode-eksportene være konsistente og enkle å implementere for norske utviklere.

AI-funksjoner og alternativer

Figma har lansert flere AI-funksjoner, blant annet AI-søk etter design i Community-filer og i egen organisasjon, automatisk omdøping og organisering av lag, og generering av tekst og bilder ut fra en beskrivelse. I tillegg finnes Figma Make, som lar brukere gå fra en tekstbeskrivelse til en interaktiv, kodebasert prototype eller enkel applikasjon. Disse funksjonene er nyttige for å komme raskt i gang med design og prototyping.

FigJam (inkludert i Figma) er et digitalt whiteboard for workshops og idémyldring. Det brukes mye av norske produktteam for Sprint-planlegging og brukerinnsikts-workshops.

Alternativer: Adobe har fjernet Adobe XD som enkeltstående kjøp, men appen støttes fortsatt for eksisterende brukere gjennom Creative Cloud All Apps-abonnementet. Sketch er fortsatt populært blant Mac-designere, men er ikke nettbasert og mangler innebygget sanntidssamarbeid. Penpot er et open-source-alternativ som også kan selv-hostes, noe som gir organisasjoner egen kontroll over hvor design-dataene lagres. For de som er dypt i Adobe-økosystemet er Adobe Illustrator og InDesign et alternativ for mer statisk design.