Variabler i Figma – slik bygger du et skikkelig theming-system
Figma-variabler er ett av de mest kraftfulle verktøyene for å bygge skalerbare designsystemer med theming og dark mode. Her er hvordan du bruker dem riktig.
Variabler i Figma er en av de største forbedringene til verktøyet på flere år. De erstatter delvis det vi tidligere løste med styles og plugins, og de gjør det mulig å bygge designsystemer som faktisk reflekterer hvordan koden er strukturert. Her er hva de er, hva de kan brukes til, og hvordan du setter dem opp på en måte som holder.
Hva er variabler i Figma?
Variabler i Figma er navngitte verdier som kan tilordnes til egenskaper i designet – farger, spacing, størrelse, avrunding og tekst. De fungerer på samme måte som CSS custom properties eller design tokens i kode: en variabel definerer verdien én gang, og alle elementer som bruker den oppdateres automatisk når du endrer kilden.
Collections og modes – der det virkelig blir kraftfullt
Det som skiller variabler fra styles er modes. Du kan definere samme variabel med ulike verdier for ulike modes – for eksempel light og dark, kompakt og spacious, eller norsk og engelsk. Når du bytter mode på en frame, oppdateres hele themet automatisk. Dette er tranformerende for dark mode-arbeid og for demonstrasjon av designalternativer til kunder.
Primitives, semantiske tokens og komponenttokens
Den mest robuste måten å strukturere variabler på er i tre lag: Primitives er de råe verdiene (blue-500, 16px). Semantiske tokens refererer til primitives og gir mening (color/surface/primary). Komponenttokens refererer til semantiske tokens og er spesifikke for et komponent (button/background/default). Dette gjør systemet enklere å vedlikeholde og mye lettere å tematisere.
Slik kobler du variabler til kode
Figma-variabler eksporteres via tokens-plugins som Tokens Studio, eller direkte via Figmas REST API. Strukturen bør matche koderepoets token-struktur så nært som mulig. Når dette er satt opp riktig, er variabler i Figma og CSS custom properties i koden to sider av samme sak – og designendringer kan propageres raskt til koden uten manuelle mellomsteg.
Vanlige feil når du setter opp variabler
De vanligste feilene jeg ser: å blande primitives og semantiske tokens i samme collection, å bruke fargenavn (blue, red) i stedet for semantiske navn (primary, error), og å lage for mange modes før systemet er stabilt. Start enkelt. En collection med farger og spacing, to modes (light/dark), og bygg ut derfra.