Hva er Tokens Studio?

Trenger du litt mer informasjon om hva design tokens er? Les denne artikkelen.

Tokens Studio er en Figma plugin som lar deg arbeide i en .json-fil der dine design tokens er lagret, men på en mer visuell måte.

Dette gjør at du kan definere tokens som kan brukes på tvers av design og kode, og som støtter et bredt spekter av token-typer, f.eks:

• Dimension - Kan appliseres på size, spacing, border width, border radius, background blur, og x/y-posisjoner. Flere av disse er også tokens i seg selv
• Kompositt-tokens: For eksempel tekststiler, hvor én token kan kombinere flere parametere som fontfamilie, størrelse og linjeavstand.

En av Tokens Studios største styrker er at det gjør design tokens plattform-agnostiske og delbare mellom ulike verktøy og teknologier. Dette gjør at design tokens fungerer som en “kilde til sannhet” for både design og kode. Hvis ønskelig, kan man også redigere selve JSON-filen manuelt utenfor Tokens Studio. Dette gir fleksibilitet, men krever samtidig teknisk kompetanse.

(Les mer om hva som definerer en design token her.)

Hva er Figma Variables?

Figma Variables er en innebygd funksjon i Figma som gjør det mulig å definere og bruke variabler som farger, tall, strenger og boolske verdier i designet ditt. I likhet med Tokens Studio kan variabler referere til hverandre.

Figma Variables kan sees som en utvidelse av Figma Styles, men med mer fleksibilitet. Samtidig er det viktig å merke seg at de ikke er fullverdige design tokens.

En viktig presisering er at Figma Variables ikke er fullverdige design tokens. En design token er uttrykk for et designvalg, på en plattform-agnostisk måte, slik. at det kan deles på tvers av disipliner, verktøy og teknologier. Figma Variables fungerer kun innenfor Figma, så det er ikke plattform-agnostisk, og det kan heller ikke deles på tvers av andre verktøy.

Figma’s development on Figma Variables is going slower than expected, and the lacks limits their flexibility in complex, multibrand design systems

Pros og cons

Tokens Studio

Fordeler

• Støtter flere typer tokens (f.eks. dimensjoner og kompositt-tokens).
• Uavhengig av plattform og verktøy.
• Design tokens kan brukes som en felles kilde til sannhet for både design og kode.

Ulemper

• Krever en viss opparbeidelse av teknisk kompetanse for å redigere og bruke JSON-filer utenfor Tokens Studio.

Figma Variables

Fordeler

• Enklere å bruke for designere som allerede er kjent med Figma.
• Innebygd i Figma, og krever ingen tillegg for grunnleggende funksjonalitet.

Ulemper

• Ikke plattform-agnostisk - Og er derfor heller ikke ekte design tokens.
• Begrenset støtte for flere typer variabler. Støtter foreløpig kun farge, tall, streng, og boolske verdier.

Brukes i samspill

En fordel er at Tokens Studio og Figma Variables kan brukes sammen. Tokens Studio kan fungere som en kilde til sannhet der design tokens defineres og administreres. Disse tokensene kan deretter eksporteres til Figma Variables, noe som gjør dem tilgjengelige for designere (konsumenter av designsystemet) som foretrekker å arbeide i Figma sitt grensesnitt. Når endringer gjøres i Tokens Studio, kan tokensene synkroniseres på nytt med Figma Variables for å sikre at alt er oppdatert. På denne måten kombinerer en styrkene til begge verktøyene.