Bygg ditt tema

7. november 2025

Designsystemet er laget for å kunne brukes sammen med din egen visuelle profil - inkludert farger og andre preferanser. Med Designsystemets Temabygger kan du sette opp ditt tema og generere Design Tokens som kan brukes både i designverktøy og i kode. Design Tokens sørger for at det er de samme verdiene vi jobber etter i design og kode.

Vi anbefaler at både utvikler og designer er med i prosessen når dere setter opp deres eget tema.

Slik går du frem:

Kopier config-fila under, og lagre den som designsystemet.config.json

{  "outDir": "./design-tokens",  "clean": true,  "themes": {    "theme": {      "colors": {        "main": { "primary": "#0062BA", "accent": "#1E98F5" },        "neutral": "#1E2B3C",        "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }      },      "borderRadius": 4    }  }}

Finn et Git repository du kan lagre Design Tokens i. Legg designsystemet.config.json-fila i roten av repoet.
Klon repoet lokalt på din maskin, åpne en terminal og naviger til mappen med repoet.
Pass på at du har node.js installert med en versjon høyere enn 20.
Kjør denne kommandoen i terminalen:

npx @digdir/designsystemet@latest tokens create --config designsystemet.config.json

Dette vil generere Design Tokens basert på config-fila og lagre dem i en mappe som heter design-tokens. Push endringene til ditt repo.

Nå skal vi inn i Figma. Pass på at du bruker desktop-appen til Figma, ikke nettleserversjonen.

Hent komponentbiblioteket fra Figma Community (figma.com) (Trykk "Open in Figma") til din organisasjon som har mimimum pro-lisens. Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen.
Installer pluginen Tokens Studio (figma.com). Den sørger for kobling mellom Figma og kode. Du trenger ikke pro-lisens.

Skjermbilde av Figma som vise hvor du finner plugins

I pluginen skal du nå sette opp kobling til ditt Git repo. Se Tokens Studio sin guide "Sync your Design Tokens with code (tokens.studio)" som forklarer hvordan du gjør dette for ulike Git Providers.
Husk å sette "Token storage location" til design-tokens (eller det du har valgt å kalle mappen din med Design Tokens).

Vi anbefaler å ikke pushe endringer i Design Tokens via Tokens Studio, da dette kan føre til at du mister overstyringene dine når du oppdatererer.

Gå til Temabyggeren og generer fargeskalaer ut fra dine profilfarger. Klikk "Ta i bruk tema". Kopier config-filen og lim inn i designsystemet.config.json-fila i ditt repo. Kjør kommandoen under og push endringene.

npx @digdir/designsystemet@latest tokens create --config designsystemet.config.json

Husk at du må kjøre denne kommandoen hver gang du gjør endringer i config-filen.

I Tokens Studio velg "Pull"-ikonet for å hente de nye tokenene inn i Figma.

Skjermbilde av Tokens Studio og hvor du finner pull knappen

Velg Styles & variables og Export styles & variables to Figma.

Skjermbilde av Tokens Studio og hvor du finner export knappen

Pass på at du har disse innstillingene før du trykker Confirm:

Skjermbilde av Tokens Studio og hvilke innstillinger du skal bruke når du eksporterer tokens til Figma

Velg Themes, Select All og Export to Figma:

Skjermbilde av Tokens Studio som viser at du må velge Themes og deretter Select All

Nå skal du se alle komponentene med dine egne profilfarger i Figma. NB: Dersom du endret navn på fargene i Temabyggeren, må du inn i Figma Variabler og slette de gamle fargene manuelt.

Ønsker du flere tema, kan du generere et nytt tema i Temabyggeren og oppdatere config-fila i ditt repo. Kjør kommandoen for å generere Design Tokens på nytt, push endringene og bruk "Pull"-knappen i Tokens Studio for å hente inn de nye temaene i Figma.

{  "outDir": "./design-tokens",  "clean": true,  "themes": {    "theme-one": {      "colors": {        "main": { "primary": "#0062BA", "accent": "#1E98F5" },        "neutral": "#1E2B3C",        "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }      },      "borderRadius": 4    },    "theme-two": {      "colors": {        "main": { "primary": "#0062BA", "accent": "#1E98F5" },        "neutral": "#1E2B3C",        "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }      },      "borderRadius": 4    }  }}

Når Design Tokens oppdateres i koden, kan du enkelt hente de nye verdiene inn i Figma ved å bruke "Pull"-knappen i Tokens Studio igjen.

For å generere CSS fra temaet ditt, kjør denne kommandoen:

npx @digdir/designsystemet@latest tokens build --config designsystemet.config.json

Husk at dette må gjøres når tokens blir oppdatert også.

Rediger denne siden på github.com (åpnes i ny fane)