Frontend Academy · Lektion

Design-Tokens mit Style Dictionary

Definieren Sie Farb-, Abstands- und Typografie-Tokens in JSON und transformieren Sie sie mit Style Dictionary in CSS-Variablen, JS-Konstanten oder iOS-/Android-Formate.

Lektion 2 von 414 Schritte

Design-Tokens mit Style Dictionary ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Design Tokens?

Design Tokens sind die benannten, primitiven Werte eines Designsystems: Farben, Abstände, Schriftgrößen, Eckenradien und Schatten. Sie bilden die verbindliche Quelle — jede Komponente leitet ihre Styles daraus ab.

Warum Tokens wichtig sind

Tokens entkoppeln Designentscheidungen von der Implementierung. Ändern Sie color.primary einmal von Blau zu Grün, und jede Komponente, die es verwendet, wird aktualisiert. Außerdem können Sie damit dasselbe Design für Web, iOS und Android bereitstellen.

Token-Speicherung

Speichern Sie Tokens in JSON oder YAML — einem neutralen Format, das von Tools auf verschiedenen Plattformen verarbeitet werden kann. JSON ist am weitesten verbreitet.

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

Style Dictionary

Style Dictionary (Amazon) ist das De-facto-Build-Tool für Design Tokens. Es liest Tokens ein und wandelt sie in mehrere Ausgabeformate um: CSS-Variablen, SCSS, JS-Konstanten, iOS Swift und Android XML.

npm install -D style-dictionary

Konfiguration

Erstellen Sie style-dictionary.config.js, in dem Eingabe-Tokens und Ausgabeplattformen beschrieben werden.

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

Den Build ausführen

Führen Sie die CLI aus, um Ausgaben für alle Plattformen zu erzeugen.

npx style-dictionary build

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

Generierte CSS-Ausgabe

CSS-Variablen mit einem einheitlichen Benennungsschema (kebab-case mit Namespace).

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

Generierte JS-Ausgabe

JS-Objekt zur Verwendung in JS/TS-Code (Tailwind-Konfiguration, CSS-in-JS).

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

Konventionen für die Token-Benennung

Verwenden Sie semantische Namen (color.primary) statt konkreter Namen (color.blue-500). Semantische Tokens ermöglichen es, Werte zu ändern, ohne sie umzubenennen. Zweistufiges System: konkrete Palette (blue-500) → semantischer Alias (primary).

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

Theming mit Tokens

Erstellen Sie für Themes (hell/dunkel) mehrere Plattformausgaben mit unterschiedlichen Eingaben — gleiche Namen, unterschiedliche Werte.

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

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

Token-Kategorien

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

Tools für Token-Registries

Neben Style Dictionary gibt es Tokens Studio (Figma-Plugin), Specify und Supernova. Damit können Designer Tokens in Figma verwalten und automatisch mit der Codebasis synchronisieren.

Wissenscheck

Was ist der wichtigste Vorteil der Verwendung von Design Tokens mit Style Dictionary?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Design Tokens

Tokens sind benannte primitive Werte (Farbe, Abstand, Typografie) — die verbindliche Quelle für ein Designsystem. Speichern Sie sie als JSON. Style Dictionary wandelt sie in CSS-Variablen, JS, iOS und Android um. Semantische Benennung (primary) statt konkreter Namen (blue-500). Zweistufig: Palette → semantischer Alias. Themes über separate Builds. Synchronisierung aus Figma mit Tokens Studio.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Design-Tokens mit Style Dictionary“ kostenlos?

Ja — der vollständige Text von „Design-Tokens mit Style Dictionary“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Design-Tokens mit Style Dictionary“?

Definieren Sie Farb-, Abstands- und Typografie-Tokens in JSON und transformieren Sie sie mit Style Dictionary in CSS-Variablen, JS-Konstanten oder iOS-/Android-Formate. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Design-Tokens mit Style Dictionary“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Storybook: Stories, Controls und Docs
Design-Tokens mit Style Dictionary
Versionierung und Veröffentlichung auf npm
Ein Designsystem verwenden

← Zurück zu Frontend Academy