designNybegynner

Figma for grensesnittdesign

Design grensesnitt i nettleseren — frames, auto layout og prototyper.

Figma er designverktøyet teamene bruker. Kurset tar deg fra første frame til en levert landingsside: auto layout, komponenter med varianter, stiler, prototyper og Dev Mode-handoff. Alt kan gjøres i gratisplanen.

Leksjoner: 9
Timer: ~2
Nivå: Nybegynner
Start: Gratis

Kurs-intro

31 sekunder om hva kurset er, og hvordan det fungerer.

Leses av en syntetisk stemme (Microsoft Edge TTS, norsk bokmål).

Du skal lære

Navigere Figma som en designer — filer, frames og lag
Bruke auto layout slik at designet oppfører seg som ekte grensesnitt
Bygge komponenter med varianter — knapper med tilstander
Lage prototyper du kan teste på egen telefon
Levere utviklerklart: mål, stiler og eksport via Dev Mode

Dette kurset passer for deg

Du vil designe grensesnitt — ikke bare lese om design
Du skal samarbeide med utviklere og vil levere ryddig
Du vil ha et profesjonelt verktøy som fungerer i nettleseren, gratis

Læringsstien

Fra første linje til mållinjen — slik kurset henger sammen.

Start her

Leksjonene bygger på hverandre — ta dem i rekkefølge, eller hopp til det du trenger.

1Lesing12 minNeste oppMøt FigmaDesignverktøyet i nettleseren: filer, lerret og grensesnittet — gratisplanen holder til hele kurset.Gratis
2Lesing13 minFrames — lerretet dittFrame mot gruppe, preset-størrelser og mobil-first fra første klikk.Gratis
Etter leksjon 2 tar de gratis slutt
Lås opp resten av kurset
- De neste 7 leksjonene — øvelser og quizer inkludert
- Alle andre kurs i katalogen, også de som kommer
5 kr/mnd · uten binding · si opp når som helst
3Lesing15 minAuto layoutRetning, gap og padding — flexbox-tenningen som gjør designet fleksibelt.
4Lesing14 minTekst, farger og stilerTekststiler og fargestiler — én kilde til sannhet for hele designet.
5Lesing16 minKomponenter og varianterMain component, instanser og varianter — knapper med ekte tilstander.
6Lesing14 minPrototyper som føles ekteKlikk-mål, smart animate og testing på egen telefon.
7Lesing13 minFra design til kode: handoffDev Mode, mål og eksport — hva utvikleren faktisk trenger fra deg.
8Lesing15 minMini-prosjekt: en landingssideSett alt sammen: 390px-frame, auto layout, varianter og en prototyp.
9Quiz10 minSluttest: FigmaFem spørsmål om frames, auto layout, komponenter, stiler og handoff. Krever 80 %.

Mållinjen

Fullfør alle leksjonene — og bruk det du kan til å bygge noe helt eget. Når du er ferdig venter «Autentisering og innlogging».

Neste kurs

Se alle øvelsene i kurset, samlet