Frontend Academy · leksjon

Designtokens med Style Dictionary

Definer tokens for farger, avstand og typografi i JSON, og transformer dem med Style Dictionary til CSS-variabler, JS-konstanter eller iOS-/Android-formater.

Leksjon 2 av 414 trinn

Designtokens med Style Dictionary er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er designtokens?

Designtokens er de navngitte, primitive verdiene i et designsystem: farger, mellomrom, skriftstørrelser, hjørneradier og skygger. De er fasiten — alle komponenter utleder stilene sine fra dem.

Hvorfor tokens er viktige

Tokens frikobler designbeslutninger fra implementasjonen. Endre color.primary fra blått til grønt én gang, så oppdateres alle komponenter som bruker den. De gjør det også mulig å levere det samme designet til web, iOS og Android.

Lagring av tokens

Lagre tokens i JSON eller YAML — et nøytralt format som kan brukes av verktøy på tvers av plattformer. JSON er vanligst.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon) er det de facto-byggeverktøyet for designtokens. Det leser tokens og konverterer dem til flere utdataformater: CSS-variabler, SCSS, JS-konstanter, iOS Swift og Android XML.

npm install -D style-dictionary

Konfigurasjon

Opprett style-dictionary.config.js som beskriver inndatatokens og utdataplattformer.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Kjøre bygget

Kjør CLI-en for å generere utdata for alle plattformene.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Generert CSS-utdata

CSS-variabler med et konsekvent navneskjema (kebab-case med navneområde).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Generert JS-utdata

JS-objekt som kan brukes i JS/TS-kode (Tailwind-konfigurasjon, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Navnekonvensjoner for tokens

Bruk semantiske navn (color.primary) fremfor bokstavelige navn (color.blue-500). Semantiske tokens lar deg endre verdier uten å gi dem nye navn. System med to nivåer: bokstavelig palett (blue-500) → semantisk alias (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Tematisering med tokens

Bygg for flere plattformer med ulike inndata for å støtte temaer (lyst/mørkt) — samme navn, ulike verdier.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Tokenkategorier

Vanlige kategorier: color, spacing, typography (font-family, size, line-height, weight), border (radius, width), shadow, transition (duration, easing), z-index, breakpoint.

Verktøy for tokenregistre

Alternativer til Style Dictionary: Tokens Studio (Figma-plugin), Specify og Supernova. De lar designere administrere tokens i Figma og synkronisere dem automatisk med kodebasen.

Kort sjekk

Hva er den viktigste fordelen ved å bruke designtokens med Style Dictionary?

Besvar den i den interaktive leksjonen

Oppsummering: Designtokens

Tokens er navngitte primitive verdier (farge, mellomrom, typografi) — fasiten for et designsystem. Lagre dem som JSON. Style Dictionary konverterer dem til CSS-variabler, JS, iOS og Android. Bruk semantiske navn (primary) fremfor bokstavelige (blue-500). To nivåer: palett → semantisk alias. Temaer via separate bygg. Synkroniser fra Figma med Tokens Studio.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Designtokens med Style Dictionary» gratis?

Ja – hele teksten i «Designtokens med Style Dictionary» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Designtokens med Style Dictionary»?

Definer tokens for farger, avstand og typografi i JSON, og transformer dem med Style Dictionary til CSS-variabler, JS-konstanter eller iOS-/Android-formater. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Designtokens med Style Dictionary»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy