Designtokens

Designtokens er de minste byggeklossene i designet, verdier som farger, typografivalg, størrelser og så videre. Målet med designtokens er å gjøre det enkelt å gjenbruke, kommunisere og kontrollere designbeslutninger på tvers av designverktøy og kode, uavhengig av teknologivalg.

Token med navn som inneholder informasjon om hvor eller hvordan verdien skal brukes, for eksempel --sds-color-text-primary, kalles semantiske.

Sikt benytter Figma sin innebygde designtoken-funksjonalitet, som i Figma kalles Variabler (Variables på engelsk), for å tilby tokens for størrelser, layout, farge og typografi.

Det anbefales sterkt å benytte eksisterende variabler i SDS for å definere designattributter også for lokale komponenter.

I Figma brukes termene Collections og Modes om grupperinger av variabler (collections) og kontekst-avhengige, alternative verdier for hver variabel (mode).

Collections samler variabler/tokens av samme type, f.eks farge eller størrelse.

Mode lar deg sette opp ytterligere kontekster hvor et token har en alternativ referanseverdi. Modes kan settes på artboard-nivå, på komponentnivå eller på layer-nivå, og lar deg for eksempel bytte mellom light-mode og dark-mode.

Merk at hver collection har egne modes, siden forskjellige typer variabler ofte har forskjellige kontekster (for eksempel light/dark-mode for fargevariabler, mens typografi- eller space-variabler har modes for forskjellige skjermstørrelser).

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 nivå (transparent) i standard variasjon (default).