Hva er design tokens

Design Tokens" styrer hvordan komponentene skal se ut i forhold til farger, typografi, størrelser, avstander, former osv. Design tokens sørger vi for at både designere og utviklere arbeider etter de samme reglene og retningslinjene.

Noen av variablene er lagt opp til å være tema-baserte, det vil si at de tar utgangspunkt i din merkevare med de fargene og preferansene du selv velger. Vi jobber med en tema-bygger som skal gjøre det enklere for deg å tilpasse stilene.

Design Tokens er fleksible variabler som kan benyttes uavhengig av teknologi eller designverktøy.

Design tokens i Figma

Vi bruker Figma-pluginen "Tokens Studio", da denne lar oss administrere flere stiler og egenskaper enn Figma i seg selv kan.

Pluginen har som mål å være W3C-kompatibel og retter seg etter standarden som etableres av W3C Design Tokens Community Group. Tokens-verdiene er dermed ikke låst til et verktøy - JSON-filen kan flyttes til andre verktøy dersom det skulle bli aktuelt.

Flere sett og themes

Bruk av variabler og tokens gjør det mulig å ha ett designsystem med ulike identiteter. Vi kan lage en komponent i Figma kun èn gang og style den mange ganger - Med et klikk kan vi slå på et annet theme som for eksempel aktiverer en annen fargepalett eller et annet sett med størrelser. Ved å dele tokens inn i både sets og themes, kan vi tilby avanserte former for gjenbruk.

Videoen over viser at når settet for «Tilsynet» slås på, overstyres både fargene som er i bruk i filen og stilene som er tilgjengelig i høyremargen byttes ut.

Design tokens for utviklere

Installer NPM-pakken @digdir/designsystemet-theme og følg beskrivelsen der på bruk av tokens. Overstyres ved behov.