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 som har tatt over markedet for UI/UX-design. I motsetning til Sketch (kun Mac) og Adobe XD er Figma nettleserbasert, tilgjengelig på alle plattformer, og muliggjør sanntidssamarbeid — flere designere kan jobbe i samme fil samtidig, akkurat som i Google Docs.

For norske designere, produktteam og utviklere er Figma nå standarden. Det brukes av startups, byrå og store selskaper som Finn.no, Vipps, Kolonial (Oda) og Schibsted. Gratisplanen er svært generøs og holder for de fleste nybegynnere og frilansere.

Figma vs Sketch vs Adobe XD

Slik sammenlignes de tre dominerende UI-designverktøyene:

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 (iPhone 16, Desktop 1440px, osv.) fra høyre panel. Inni frames plasserer du designelementer.

Vektorer og former: trykk R for rektangel, O for ellipse, P for Penn-verktøy (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 (eller høyreklikk → Create Component). Legg til en "Main Component" i et eget side 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 200 forekomster av den knappen oppdateres. Norske produktteam bruker dette for å sikre konsistens mellom skjermer og plattformer. 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 absolutt noe nybegynnere bør lære tidlig. Det fungerer som CSS Flexbox: du definerer om elementer skal stapples 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, trykk Shift+A. Velg retning (horisontal eller vertikal) i høyre panel. Still inn gap mellom elementer og padding rundt innholdet. Nå vil framen automatisk tilpasse seg når innhold endres — legg til en ny knapp i en navigasjonsbar, og spacingen justeres automatisk. Dette er uvurderlig for responsive design og for å levere korrekte specs 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 "Play"-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 like-navngitte elementer, vil Figma animere overgangen mellom dem smooth og automatisk, perfekt for å demonstrere app-navigasjon.

Developer handoff og Figma Dev Mode

Figma Dev Mode (tilgjengelig i Professional og Education) lar utviklere inspisere design uten å forstyrre designere. Utviklere ser CSS-verdier, padding, farger og font-specs automatisk — og kan kopiere koden direkte. Figma genererer også iOS Swift og Android Kotlin-attributter for mobile apper.

For norske design-/utviklerteam: sørg for at designet er strukturert logisk med gode lagnavn, at farger og tekststiler bruker Named Styles, og at komponenter er veldokumenterte. Bruk Annotasjons-plugin for å legge til forklarende kommentarer til utviklere. God handoff reduserer "implementeringsmøter" og misforståelser dramatisk.

Norsk design-community og ressurser

• Oslo Design Club — nettverk for designere i Oslo, arrangerer meetups og workshops
• Norwegian UX — LinkedIn-gruppe for norske UX- og produktdesignere
• Figma Community (figma.com/community) — gratis maler, ikoner og plugins fra hele verden
• Material Design 3 Figma Kit — Googles offisielle design-komponenter gratis i Figma Community
• Figmas offisielle "Learn Design" kurs — gratis på help.figma.com
• Scrimba og Coursera — betalte Figma-kurs på engelsk med god pedagogikk
• UX Design på norsk — YouTube-kanaler og podcaster er begrenset, men internasjonale (NNGroup, Google UX) er utmerkede