Figma for nybegynnere: lag UI-design og prototyper fra bunnen

Hva er Figma og hvorfor er det industristandard?

Figma er et nettbasert design- og prototypeverktøy for UI/UX-design. I motsetning til Sketch, som kun kjører på Mac, er Figma nettleserbasert og tilgjengelig på alle plattformer, og gjør sanntidssamarbeid mulig — flere personer kan jobbe i samme fil samtidig, som i Google Docs.

Figma ble grunnlagt i 2012 av Dylan Field og Evan Wallace, ifølge CNBC, og noteres i dag på New York-børsen under tickeren FIG etter en børsnotering 31. juli 2025. Det skjedde etter at Adobe og Figma i desember 2023 avlyste den planlagte 20-milliarder-dollar-fusjonen fordi EU-kommisjonen og den britiske konkurransemyndigheten CMA ikke ville godkjenne den. Figmas gratisplan, Starter, gir tilgang til inntil 3 designfiler og 3 FigJam-filer per prosjekt, samt ubegrensede skisser («drafts»), og passer for de fleste som skal lære seg verktøyet.

Figma vs Sketch vs Adobe XD

Figma er nettleserbasert og fungerer på Windows, Mac, Linux og i nettleseren, med sanntidssamarbeid innebygd. Sketch er en installert Mac-only-applikasjon uten innebygget sanntidssamarbeid. Adobe XD er ikke lenger tilgjengelig som eget kjøp: Adobe bekrefter at XD ikke lenger kan kjøpes som enkeltapp, men fortsatt støttes for eksisterende brukere via Creative Cloud All Apps.

Grunnleggende verktøy og konsepter

Frames (rammer) er Figmas versjon av "artboards" — de definerer størrelsen på skjermen du designer for. Trykk F og klikk på lerretet for å lage en ramme, eller velg en forhåndsdefinert størrelse (telefon, nettbrett, desktop) fra høyre panel. Inni frames plasserer du designelementer.

Vektorer og former: trykk R for rektangel, O for ellipse og P for Penn-verktøyet (bezier-kurver). Hold Shift for å tegne perfekte kvadrater eller sirkler. Alle former kan ha Fill (fyll) og Stroke (kontur) som du styrer fra høyre panel. Bruk Boolean-operasjoner (Forening, Subtraksjon, Snitt, Eksklusjon) for å kombinere former til komplekse ikoner.

Komponenter og designsystemer

Komponenter er gjenbrukbare designelementer — knapper, inputfelter, navigasjonsbarer, kort. Lag en komponent ved å velge et element og trykke Ctrl+Alt+K på Windows, eller Option+Cmd+K på Mac (eller høyreklikk → Create Component). Legg hovedkomponenten i en egen side, for eksempel kalt "Components" eller "_Library".

Instanser av en komponent arver endringer fra hovedkomponenten automatisk. Dette er kjernen i et designsystem: endre en knapp ett sted, og alle forekomster av den oppdateres. Du kan også bruke Variants for å lage ulike tilstander av en komponent (f.eks. knapp: standard, hover, aktiv, deaktivert).

Auto Layout — din beste venn

Auto Layout er en av Figmas kraftigste funksjoner og noe nybegynnere bør lære tidlig. Det fungerer omtrent som CSS Flexbox: du bestemmer om elementer skal stables horisontalt eller vertikalt, med automatisk avstand (gap) mellom dem og indre polstring (padding).

Slik bruker du Auto Layout: velg en frame eller gruppe med elementer, og trykk Shift+A. Velg retning (horisontal eller vertikal) i høyre panel. Still inn gap mellom elementer og padding rundt innholdet. Rammen tilpasser seg automatisk når innholdet endres — legg til en ny knapp i en navigasjonsbar, og avstanden justeres automatisk. Dette er nyttig for responsivt design og for å levere korrekte spesifikasjoner til utviklere.

Interaktiv prototyping

Figma lar deg lage klikkbare prototyper direkte fra designet ditt — uten kode. Bytt til "Prototype"-modus i høyre panel (fane øverst). Klikk på et element (f.eks. en knapp) og dra den blå pilen til skjermen som skal vises når brukeren klikker. Velg animasjonstype (Instant, Dissolve, Slide, osv.) og etter-handlingen (Navigate to, Back, osv.).

Trykk "Present"-knappen øverst til høyre for å åpne prototypen i nettleseren eller dele lenken med klienter og brukertestdeltakere. Figma har også Smart Animate — hvis to skjermer har likt navngitte lag, animerer Figma overgangen mellom dem automatisk, nyttig for å demonstrere app-navigasjon.

Developer handoff og Figma Dev Mode

Figma Dev Mode er tilgjengelig på alle Figmas betalte planer og lar utviklere inspisere design uten å forstyrre designere. Utviklere ser CSS-verdier, padding, farger og typografi automatisk, og kan kopiere kodeforslagene direkte inn i egne prosjekter.

Sørg for at designet er strukturert logisk med gode lagnavn, at farger og tekststiler bruker delte styles, og at komponenter er veldokumenterte. God handoff reduserer implementeringsmøter og misforståelser.

Norsk design-community og ressurser

• UX Norge — fagmiljø for UX-designere i Norge på tvers av firmaer, med egen Slack-kanal, arrangementer og jobbannonser
• Figma Community — gratis maler, ikoner og plugins fra hele verden
• Material Design 3 Figma Kit — Googles offisielle designkomponenter, gratis i Figma Community
• Figma har en gratis utdanningsplan for studenter og undervisere, med tilgang til Professional-funksjoner etter verifisering gjennom skolen
• Norskspråklig innhold om UX/UI er begrenset — internasjonale ressurser som Nielsen Norman Group er et godt alternativ