Hva er Tokens Studio?

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. Med Tokens Studio, så kommer designarbeidet enda tettere på den tekniske prosessen. Det gjør det mulig for en designer å direkte påvirke koden, uten å måtte gå via en utvikler.

(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.