Hva er greia med alt dette?
La oss gjøre det enkelt:
Styles
Hva det er: Ferdiglagrede designvalg.
Når du bør bruke det: Når du vil gjenbruke farger og typografi enkelt i Figma.
Tokens
Hva det er: Navngitte verdier for design.
Når du bør bruke det: Når du vil ha system og eksport til kode.
Variabler
Hva det er: Smart versjon av tokens i Figma.
Når du bør bruke det: Når du vil bygge fleksible temaer og jobbe mer dynamisk.
1. Start med Styles – bygg det visuelle språket ditt
Styles i Figma er det enkleste stedet å starte. De gir deg en måte å lagre og bruke farger, typografi og effekter på tvers av prosjektet.
Eksempler:
Lag en Primary-farge som style (f.eks. oransje).
Lag en Heading / H1-typografi-style.
Lag en Shadow / Soft-style for skygger.
Fordel: Superenkelt å bruke. Du klikker bare og gjenbruker.
Ulempe: Begrenset logikk – vanskelig å bytte tema eller eksportere til kode.
2. Bruk Tokens hvis du vil tenke mer systematisk
Design tokens er strukturert og navngitt informasjon som beskriver designbeslutninger. Du kan bruke plugins (som Figma Tokens eller Token Studio) for å lage et tokensystem som også utviklere kan bruke direkte.
Eksempler:
color-primary = #FF5733
spacing-small = 8px
font-heading = Inter Bold
Fordel: Flott for samarbeid med utviklere og systembygging.
Ulempe: Krever litt mer verktøy og struktur.
3. Prøv Figma Variabler hvis du vil ha mer kraft
Variabler i Figma er en ny og smart måte å jobbe på – du definerer verdier som du kan bruke direkte i designet og bytte tema med ett klikk (for eksempel lys og mørk modus).
Eksempler:
Variabel color-primary = #FF5733 brukes på knapper.
Variabel spacing-md = 16 brukes på layout.
Du lager et light theme og et dark theme og bytter mellom dem.
Fordel: Du får fleksibilitet, logikk og tematisk kontroll – uten plugins.
Ulempe: Litt ny tenkemåte, men ikke vanskelig når du først prøver.
Hvordan bør du komme i gang – steg for steg
Steg 1: Start med Styles i Figma
Lag farge-styles med navn som Color / Primary, Color / Text / Dark.
Lag tekst-styles for overskrifter og brødtekst.
Gjenbruk disse i hele designet.
Steg 2 (valgfritt): Bruk Variabler i stedet eller i tillegg
Gå til Assets > Variables og lag variabler for farger og spacing.
Bruk disse i komponentene dine.
Lag et mørkt og lyst tema hvis det passer.
Steg 3 (når du er klar): Utforsk Tokens
Installer plugin som «Figma Tokens».
Lag navngitte tokens som kan eksporteres til JSON eller CSS.
Jobb sammen med utviklere på samme system.
Oppsummert: Hva bør du velge?
Bare deg, enkelt prosjekt?
→ Bruk Styles.
Du vil lage et system, men liker Figma:
→ Bruk Variabler (enkelt og moderne).
Stort team eller designsystem med utviklere:
→ Bruk Tokens (eventuelt kombinert med styles eller variabler).
Dette er ment som en enkel innføring. Mulighetene er enda større om man dykker ytterligere ned i for eksempel Figma Varibler eller Tokens.