Hvad er designtokens, og hvorfor er de vigtige

Designtokens er designsystemets atomare beslutninger udtrykt som navngivne, genanvendelige værdier. I stedet for at hardkode #3b82f6 i et stylesheet definerer du color-primary-500: #3b82f6 og refererer til dette navn overalt. Navnet bærer betydningen; værdien kan ændres uden at opdatere hver reference.

Tokens dækker alle visuelle egenskaber: farvetokens (color-primary-500: #3b82f6), afstandstokens (spacing-4: 16px), typografitokens (font-size-lg: 18px, font-weight-bold: 700), tokens for afrundede hjørner (radius-md: 8px), skyggetokens og tokens for animationsvarighed. Tilsammen indkoder de det komplette visuelle sprog.

Tokens skaber én fælles sandhedskilde, som deles mellem design og udvikling. Designere definerer værdierne i Figma, og udviklere bruger dem i kode. Når brandfarven ændres, opdaterer du én tokenværdi, og hver komponent, der bruger dette token, afspejler automatisk ændringen — uden søg-og-erstat på tværs af tusindvis af filer.

Uden tokens er farve- og afstandsværdier hårdkodet på tværs af stilark, komponentfiler og hjælpeklasser. En blå farve kan forekomme som #3b82f6, rgb(59, 130, 246) og blue-500 i forskellige filer. Hvis brandfarven skal ændres, skal du finde og erstatte hver forekomst, hvilket medfører stor risiko for at overse nogle.

Design-tokens er grundlaget for systemer med flere temaer. I mørk tilstand peger semantiske tokens som color-background og color-text på forskellige primitive værdier afhængigt af det aktive tema. Du ændrer én tilknytning, ikke alle komponenter. Lyse og mørke temaer deler komponentkode, men adskiller sig kun i tokenværdier.

For en SaaS-platform, der betjener flere brands, gør tokens det muligt at tilpasse brandet uden kodefordobling. Brand A bruger blå som primærfarve, Brand B bruger grøn — kun deres semantiske token-tilknytninger er forskellige. Koden til knapkomponenten er identisk; den læser color-action-primary, som henviser til en anden farve for hvert brand.

Tokens er organiseret i lag. Primitive tokens er rå værdier: color-blue-500: #3b82f6. Semantiske tokens udtrykker betydning: color-action-primary: {color-blue-500}. Komponenttokens er de mest specifikke: button-primary-background: {color-action-primary}. Dette hierarki adskiller "hvad" fra "hvor det bruges".

Semantiske tokens er nøglen til understøttelse af flere temaer. I det lyse tema er color-background: {color-white}. I det mørke tema er color-background: {color-gray-900}. Komponenter refererer til color-background, ikke til en bestemt farve. Når du skifter tema, udskiftes de semantiske token-tilknytninger — komponenterne kræver ingen ændringer.

Figma-variabler (introduceret i 2023) er design-tokens i Figma. Designere definerer det samme tokenhierarki i Figma, som udviklere implementerer i kode. Værktøjer som Tokens Studio for Figma eller det officielle Figma Tokens-plugin eksporterer Figma-variabler til JSON, som Style Dictionary derefter kompilerer til CSS-variabler eller JS-objekter.

W3C's Design Tokens Community Group udvikler et standardiseret JSON-format for design-tokens. Målet er interoperabilitet: en tokenfil, der fungerer med alle designværktøjer (Figma, Sketch) og alle byggeværktøjer (Style Dictionary, Theo, Panda CSS). Hvis du bruger specifikationens format, er dit tokensystem fremtidssikret.

Design-tokens kræver beslutninger om styring: hvem der må tilføje nye tokens (design, udvikling eller begge dele), hvordan tokens versionsstyres, hvordan udfasede tokens tages ud af brug, og hvordan tokenændringer kommunikeres til de teams, der anvender dem. Uden styring kommer tokensystemer ud af kurs — nye hårdkodede værdier dukker op ved siden af tokensystemet, så det ikke længere opfylder sit formål.

Design-tokens er navngivne atomare værdier (farver, afstande, typografi), som udgør ordforrådet i et designsystem. De skaber en fælles sandhedskilde mellem design og kode. Hierarkiet i tre lag — primitive (rå værdier), semantiske (betydning), komponent (specifik anvendelse) — muliggør understøttelse af flere temaer og brands. Figma-variabler og W3C's specifikation for design-tokens fremmer synkronisering mellem design og udvikling. Styring af tokens sikrer, at systemet forbliver konsistent over tid.