Designtokens

Designtokens er små byggeklosser bestående av designattributter som farger, typografi, størrelser, avstander, former osv. De er ikke begrenset til en spesifikk teknologi eller et designverktøy, men er fleksible variabler som kan benyttes av alle. Ved å bruke designtokens sørger vi for at både designere og utviklere arbeider etter de samme reglene og retningslinjene. Dette forenkler vedlikeholdet av designet og sikrer en helhetlig visuell fremstilling på tvers av produkter.

Fra aksel.nav.no

Sikt leverer semantiske typografitokens i flere kategorier: headlines, body text, label og overline. Vi bruker den innebygde funksjonaliteten for designtokens som Figma kaller “variables”. Denne funksjonaliteten er fremdeles i beta-versjon og under utvikling, men det gir oss en større sikkerhet i forhold til kompatibilitet og mindre avhengigheter.

I Figma brukes terminologien collections og modes om å gruppere variabler i sett (collections) og å kunne gi et token flere verdier (mode, f.eks. dark- og light-mode).

Vi har gruppert et sett tokens i “Base”-collection som kun er tilgjengelig i selve bibliotek-filen, da disse ikke skal brukes direkte men inneholder de grunnleggende verdiene de andre tokensene baserer seg på.

De andre tokensene er gruppert i farger (Color) og størrelser/avstander (Space) slik at man enkelt kan bytte mellom de forskjellige modusene de inneholder (dark / light, og desktop / tablet / mobile).

Navngivingen på tokens er forsøkt satt opp slik at de er selvforklarende om hvilken type de er og hva de skal brukes til. Som en tommelfingerregel går det fra generellt -> spesifikt i leseretningen.

Eksempel: --sds-color-interaction-primary-transparent-default

Dette er et token fra Sikt Design System (sds), en farge (color) som brukes til interaksjoner (interaction), og er basert på hovedfargen (primary), med gjennomsiktighet (transparent) i standard variasjon (default).