Kom i gang
Lage nye komponenter
Denne siden forklarer hvordan man bygger nye komponenter i designsystemet. Målet er å sikre at komponentene er konsistente, skalerbare, tilgjengelige og enkle å bruke både i design og utvikling.
Tokens som grunnlag
Alle komponenter skal bygges med tokens. Tokens er de grunnleggende verdiene i systemet og gjør det mulig å oppdatere eller tilpasse design uten å endre hver enkelt komponent.
Autolayout
Bruk alltid Autolayout i Figma. Det gir produksjonsklare filer og speiler hvordan kode er strukturert.Størrelsestokens
Bruk tokens for spacing, padding og dimensjoner. Unngå manuelle verdier.Semantiske tokens
Benytt semantiske tokens for farger, typografi og spacing. Dette sikrer støtte for lys og mørk modus, ulike størrelser og temaer – og gjør komponentene direkte koblet til kode.
Bygging med atomisk design
Komponenter settes sammen hierarkisk etter atomisk design:
Atomer – de minste byggeklossene (f.eks. knapp, ikon, inputfelt).
Molekyler – sammensatte atomer (f.eks. søkefelt = input + knapp).
Organismer – større helheter laget av molekyler (f.eks. skjema eller navigasjon).
Dette prinsippet gjør komponentene modulære og gjenbrukbare.
Eksempel på atomisk design struktur i en kort modul
Eksempel Kalender Modul
Trinn 1: Begynn på atomisk nivå
Se for deg atomene som trengs når du lager en kalender. Eksempelvis kan det være:
Tekst
Måned/år (f.eks. "August 2025")
Ukedagsnavn (man, tir, ons …)
Dato-nummer (1, 2, 3 …)
Ikoner
Piltaster for navigasjon (forrige/neste måned)
Eventuelt ikon for «dagens dato» eller «reset»
Knapper
Navigasjonsknapper (forrige/neste måned)
Dato-knapp (hver dato er en interaktiv knapp)
Vi vet at vi allerede har
icon-buttonså den kan vi enkelt hente ut fra komponent bibiloteket
Trinn 2: Start med å bygge ut atomene dine
I vårt tilfelleI vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dato-nummer i en mnd. Her kan vi bruke samme atom for ukedagsnavn og dato-nummer
Vi lager to elementer som vi kaller "cell" og legger til autolayout og appellerer token verdiene
Trinn 3: Lag variantene du trenger
I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dagene i en mnd
Trinn 4: Sett sammen molekylet
Trinn 5: Bygg ut organismen
Her legger vi sammen molekylene til en tabell
Trinn 6: Legg til riktig states
Trinn 7: Gjør ferdig organismen med eksisterende elementer
Trinn 8: Bygg ut med flere varianter hvis det gir mening
Varianter og tilstander
Alle komponenter skal ha definerte varianter og interaksjonstilstander:
Bruk Figma Variants i stedet for duplisering.
Minimumstilstander: default, hover, pressed, disabled, focus. Litt ut fra kontekst
Opprett en ny variant når det gjelder en tilpasning av samme komponent, og en ny komponent kun når funksjonen er unik.
Tilgjengelighet
Tilgjengelighet skal alltid ivaretas:
Følg WCAG-kontrastkrav (minimum 4.5:1 for tekst).
Interaktive flater skal ha minst 44 × 44 px treffflate.
Fokustilstand skal alltid være synlig, også uten hover.
Responsivitet
Komponenter skal fungere på tvers av skjermstørrelser og layouts:
Bruk størrelsestokens for spacing og dimensjoner.
Støtt små, mellomstore og store layoutvarianter.
Sørg for at komponenter brytes eller stackes logisk i mindre formater.
Gjenbruk i kontekst
En komponent skal alltid kunne brukes i ulike sammenhenger.
Vis derfor eksempler i dokumentasjonen, som:
knapp i et skjema
kort i et grid
inputfelt i en dialogboks
