Hva er designtoken, og hvorfor er de viktige

Designtokens er de atomiske designbeslutningene i et designsystem, uttrykt som navngitte, gjenbrukbare verdier. I stedet for å hardkode #3b82f6 i et stilark definerer du color-primary-500: #3b82f6 og refererer til dette navnet overalt. Navnet uttrykker betydning; verdien kan endres uten at alle referansene må oppdateres.

Tokens dekker alle visuelle egenskaper: fargetokens (color-primary-500: #3b82f6), avstandstokens (spacing-4: 16px), typografitokens (font-size-lg: 18px, font-weight-bold: 700), tokens for kantradius (radius-md: 8px), skyggetokens og tokens for animasjonsvarighet. Til sammen uttrykker de hele det visuelle språket.

Tokens skaper én felles sannhetskilde som deles mellom design og utvikling. Designere definerer verdiene i Figma, og utviklere bruker dem i kode. Når merkevarefargen endres, oppdaterer du én tokenverdi, og alle komponenter som bruker tokenet, gjenspeiler automatisk endringen — uten å måtte søke etter og erstatte tekst i tusenvis av filer.

Uten tokens er farge- og avstandsverdier hardkodet på tvers av stilark, komponentfiler og utility-klasser. En blåfarge kan forekomme som #3b82f6, rgb(59, 130, 246) og blue-500 i forskjellige filer. Å endre merkevarefargen krever at alle forekomster finnes og erstattes, med stor risiko for at noen blir oversett.

Designtokens er grunnlaget for systemer med flere temaer. I mørk modus peker semantiske tokens som color-background og color-text på ulike primitive verdier, avhengig av hvilket tema som er aktivt. De endrer én kobling, ikke hver enkelt komponent. Lyse og mørke temaer deler komponentkode, men skiller seg bare i tokenverdiene.

For en SaaS-plattform som betjener flere merkevarer, gjør tokens det mulig å tilpasse merkevaren uten å duplisere kode. Merkevare A bruker blått som primærfarge, mens merkevare B bruker grønt – bare de semantiske tokenkoblingene er forskjellige. Koden for knappkomponenten er identisk; den leser color-action-primary, som evalueres til en forskjellig farge for hver merkevare.

Tokens er organisert i nivåer. Primitive tokens er råverdier: color-blue-500: #3b82f6. Semantiske tokens uttrykker betydning: color-action-primary: {color-blue-500}. Komponenttokens er de mest spesifikke: button-primary-background: {color-action-primary}. Dette hierarkiet skiller «hva» fra «hvor det brukes».

Semantiske tokens er nøkkelen til støtte for flere temaer. I det lyse temaet er color-background: {color-white}. I det mørke temaet er color-background: {color-gray-900}. Komponenter refererer til color-background, ikke til en bestemt farge. Når temaet endres, byttes de semantiske tokenkoblingene – komponentene trenger ingen endringer.

Figma Variables, introdusert i 2023, er designtokens i Figma. Designere definerer det samme tokenhierarkiet i Figma som utviklere implementerer i kode. Verktøy som Tokens Studio for Figma eller det offisielle Figma Tokens-pluginet eksporterer Figma Variables til JSON, som Style Dictionary deretter kompilerer til CSS-variabler eller JS-objekter.

W3C Design Tokens Community Group utvikler et standardisert JSON-format for designtokens. Målet er interoperabilitet: én tokenfil som fungerer med alle designverktøy (Figma, Sketch) og alle byggeverktøy (Style Dictionary, Theo, Panda CSS). Ved å ta i bruk spesifikasjonsformatet sikres tokensystemet mot fremtidige endringer.

Designtokens krever beslutninger om forvaltning: hvem som kan legge til nye tokens (design, utvikling eller begge), hvordan tokens versjoneres, hvordan foreldede tokens fjernes, og hvordan tokenendringer kommuniseres til teamene som bruker dem. Uten forvaltning forvitrer tokensystemer – nye hardkodede verdier dukker opp ved siden av tokensystemet og undergraver hensikten.

Designtokens er navngitte atomiske verdier (farger, avstander og typografi) som utgjør vokabularet i et designsystem. De skaper én sannhetskilde mellom design og kode. Hierarkiet med tre nivåer – primitive (råverdier), semantiske (betydning) og komponenter (spesifikk bruk) – muliggjør støtte for flere temaer og merkevarer. Figma Variables og W3C Design Tokens-spesifikasjonen driver synkroniseringen mellom design og utvikling. Forvaltning av tokens sikrer at systemet forblir konsistent over tid.