Frontend Academy · Lektion

Designtokens med Style Dictionary

Definér tokens for farver, afstande og typografi i JSON, og transformér dem med Style Dictionary til CSS-variabler, JS-konstanter eller iOS-/Android-formater.

Lektion 2 af 414 trin

Designtokens med Style Dictionary er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er designtokens?

Designtokens er de navngivne, primitive værdier i et designsystem: farver, afstande, skriftstørrelser, hjørneradier og skygger. De er den eneste kilde til sandheden — alle komponenter udleder deres typografi og layout fra dem.

Hvorfor tokens er vigtige

Tokens adskiller designbeslutninger fra implementeringen. Skift color.primary fra blå til grøn én gang, så opdateres alle komponenter, der bruger den. De gør det også muligt at levere det samme design til web, iOS og Android.

Lagring af tokens

Gem tokens i JSON eller YAML — et neutralt format, som værktøjer på tværs af platforme kan bruge. JSON er mest udbredt.

// 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 uofficielle standardværktøj til bygning af designtokens. Det læser tokens og omdanner dem til flere resultatformater: CSS-variabler, SCSS, JS-konstanter, iOS Swift og Android XML.

npm install -D style-dictionary

Konfiguration

Opret style-dictionary.config.js, der beskriver inputtokens og målplatformene.

// 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' }]
    }
  }
};

Kør bygningen

Kør CLI'en for at generere resultater til alle platforme.

npx style-dictionary build

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

Genereret CSS-resultat

CSS-variabler med et konsekvent navngivningsmønster (kebab-case med navnerum).

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

Genereret JS-resultat

JS-objekt til brug i JS/TS-kode (Tailwind-konfiguration, CSS-in-JS).

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

Konventioner for tokennavne

Brug semantiske navne (color.primary) frem for bogstavelige navne (color.blue-500). Semantiske tokens giver dig mulighed for at ændre værdier uden at omdøbe dem. System med to niveauer: bogstavelig palet (blue-500) → semantisk alias (primary).

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

Tematisering med tokens

Byg flere platforme med forskellige input for at understøtte temaer (lyst/mørkt) — de samme navne, men forskellige værdier.

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

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

Tokenkategorier

Almindelige kategorier: farve, afstand, typografi (font-family, size, line-height, weight), kant (radius, width), skygge, overgang (duration, easing), z-index og brudpunkt.

Værktøjer til tokenregistre

Ud over Style Dictionary findes Tokens Studio (Figma-plugin), Specify og Supernova. De giver designere mulighed for at administrere tokens i Figma og automatisk synkronisere dem med kodebasen.

Hurtigt tjek

Hvad er den vigtigste fordel ved at bruge designtokens sammen med Style Dictionary?

Besvar den i den interaktive lektion

Opsamling: Designtokens

Tokens er navngivne primitive værdier (farve, afstand og typografi) — den eneste kilde til sandheden for et designsystem. Gem dem som JSON. Style Dictionary omdanner dem til CSS-variabler, JS, iOS og Android. Brug semantiske navne (primary) frem for bogstavelige (blue-500). System med to niveauer: palet → semantisk alias. Temaer via separate builds. Synkronisér fra Figma via Tokens Studio.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Designtokens med Style Dictionary” gratis?

Ja — hele teksten til “Designtokens med Style Dictionary” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Designtokens med Style Dictionary”?

Definér tokens for farver, afstande og typografi i JSON, og transformér dem med Style Dictionary til CSS-variabler, JS-konstanter eller iOS-/Android-formater. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Designtokens med Style Dictionary”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy