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. Norske selskaper som Kahoot!, Oda og Kolonial.no bruker Figma som standardverktøy for produktdesign.

Figma-planer: Gratis, Professional og Organization

Figma Starter (gratis) gir deg 3 Figma-designfiler og 3 FigJam-whiteboard-filer. Du kan samarbeide med ubegrenset antall brukere på disse filene, noe som gjør det til et utmerket valg for nybegynnere og freelancere som starter med noen få prosjekter.

Figma Professional (ca. 150 kr per redaktør per måned) fjerner grensen på antall prosjekter, gir tilgang til teambiblioteker (delte komponentbiblioteker), ubegrenset versionshistorikk og avanserte delingsinnstillinger. For norske designteam med mer enn 2–3 aktive prosjekter er dette det riktige nivået.

Figma Organization (~600 kr per redaktør per måned) legger til sentralisert administrasjon, SSO-pålogging og avanserte tilgangskontroller — relevant for store norske bedrifter og offentlig sektor.

Frames, lag og grunnleggende verktøy

I Figma er «frames» den grunnleggende byggeklossen — tenk på det som artboards eller sider i et layout. Trykk F og tegn en frame, eller velg en forhåndsdefinert størrelse fra sidepanelet (iPhone 16, Desktop 1440px, etc.). Frames kan inneholde andre frames, noe som gir enorm 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. Bruk Ctrl+G (PC) eller Cmd+G (Mac) for å gruppere valgte lag.

De viktigste verktøyene: V (velg), F (frame), R (rektangel), T (tekst), P (penn/vektorpenn), og Ctrl+D (dupliser valgt element). Auto Layout (Shift+A) er en av Figmas kraftigste funksjoner og lar design-elementer justere seg automatisk basert på innholdet.

Komponenter: Gjenbrukbare designelementer

Komponenter er Figmas versjon av gjenbrukbare UI-elementer. Lag en komponent ved å velge et element og trykke Ctrl+Alt+K. Komponenten (master component) kan nå brukes om igjen i hele filen som «instanser». Endrer du master-komponenten, 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, inkludert offisielle Material Design 3- og Apple Human Interface Guidelines-biblioteker. 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 like navn 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 en lenke (Prototype → Share prototype) — mottakeren åpner den 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. Utviklere kan åpne hvilken som helst Figma-fil i «Dev Mode» og se nøyaktige CSS-verdier, spacing, typografi og eksporterte assets for alle elementer — 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. For React/Vue.js-prosjekter genererer Figma til og med komponent-kode-forslag som utgangspunkt.

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: AI-søk i Community-biblioteker, automatisk lag-organisering, og Figma Make (tidl. eksperimentell) som genererer grunnleggende UI-komponenter fra tekstbeskrivelser. Disse funksjonene er nyttige for å komme raskt i gang, men produserer ikke produksjonsklar design.

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 XD er offisielt avviklet av Adobe. Sketch er fortsatt populært blant Mac-designere, men er ikke nettbasert. Penpot er et open-source-alternativ som passer for norske offentlige virksomheter med strenge krav til datasuverenitet. For de som er dypt i Adobe-økosystemet er Adobe Illustrator + InDesign et alternativ for mer statisk design.