Eine einfache Einführung in Design Tokens

Wenn du schon einmal eine Markenfarbe aktualisiert und anschließend eine Stunde damit verbracht hast, jeden hartcodierten #3B82F6 in deinem Stylesheet aufzuspüren, verstehst du bereits das Problem, das Design Tokens lösen. Dieser Artikel erklärt, was Design Tokens sind, wie sie sich von einfachen CSS-Variablen unterscheiden und wie du sie in deinen Frontend-Styling-Workflow einbinden kannst.

Was sind Design Tokens?

Design Tokens sind benannte, wiederverwendbare Werte, die deine Designentscheidungen abbilden – etwa Farben, Abstände, Typografie, Border-Radien und Schatten. Statt padding: 16px direkt in eine Komponente zu schreiben, referenzierst du einen Token wie space-4, der diesen Wert enthält.

Im Kern besteht jeder Design Token einfach aus einem Namen und einem zugehörigen Wert. Als Methodik gehen sie jedoch deutlich weiter. Die Design Tokens Community Group (DTCG), eine W3C-Community-Group, die an einer gemeinsamen Spezifikation arbeitet, beschreibt sie als eine Möglichkeit, Designentscheidungen in einem plattformunabhängigen Format auszudrücken, sodass sie über verschiedene Disziplinen, Tools und Technologien hinweg geteilt werden können.

Der Aspekt der Plattformunabhängigkeit ist entscheidend. Dieselben Token-Definitionen können in CSS Custom Properties fürs Web, Swift-Konstanten für iOS oder XML-Werte für Android transformiert werden – alles aus einer einzigen Quelle der Wahrheit.

Gängige Kategorien von Design Tokens

Die meisten Designsysteme organisieren Tokens in folgenden Kategorien:

• Farbe – Markenpalette, Textfarben, Hintergründe, Rahmen
• Abstand – Padding-, Margin- und Gap-Werte
• Typografie – Schriftart, -größe, -gewicht, Zeilenhöhe
• Border Radius – Eckenabrundung für Komponenten
• Schatten – Elevations- und Tiefeneffekte

Primitive Tokens vs. semantische Tokens

Diese Unterscheidung ist eines der nützlichsten Konzepte beim Arbeiten mit Design-System-Tokens.

Primitive Tokens (auch Base- oder Global-Tokens genannt) sind Rohwerte ohne implizierte Verwendung:

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

Semantische Tokens referenzieren Primitives und fügen Absicht hinzu. Sie sagen dir, wo ein Wert zu verwenden ist – nicht nur, was er ist:

{
  "color-action-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "spacing-component-padding": { "$value": "{space-4}", "$type": "dimension" }
}

Wenn du color-blue-500 änderst, aktualisiert sich jeder semantische Token, der darauf verweist, automatisch. Das ist die eigentliche Stärke des Systems.

Design Tokens vs. CSS-Variablen

CSS-Variablen und Design Tokens sind verwandt, aber nicht dasselbe.

Design Tokens sind die Quelle. CSS-Variablen sind häufig die Ausgabe. Ein Tool wie Style Dictionary nimmt deine Token-Definitionen und wandelt sie in das Format um, das jede Plattform benötigt.

Ein einfaches Praxisbeispiel

Hier ein kleines Set von Tokens, definiert in DTCG-konformer Syntax:

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "color-text-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

Nachdem du sie durch Style Dictionary laufen lässt, sieht deine CSS-Ausgabe so aus:

:root {
  --color-blue-500: #3B82F6;
  --color-text-primary: var(--color-blue-500);
  --space-4: 16px;
}

Deine Komponenten verwenden nun var(--color-text-primary) statt eines hartcodierten Hex-Werts. Einmal den Token ändern, überall aktualisieren.

Auf der Design-Seite folgen Figma Variables demselben Primitive-zu-semantisch-Muster und erleichtern es, Design und Code synchron zu halten.

Klein anfangen, gezielt skalieren

Du brauchst kein vollständiges Token-System am ersten Tag. Beginne mit Farb- und Abstands-Primitives, füge eine semantische Ebene hinzu, sobald sich Muster abzeichnen, und führe Tooling ein, wenn der manuelle Prozess zum Engpass wird.

Fazit

Design Tokens sind nicht nur eine Möglichkeit, CSS zu organisieren – sie sind eine gemeinsame Sprache zwischen Designern und Entwicklern. Sobald diese Sprache etabliert ist, musst du Konsistenz im Produkt nicht mehr manuell durchsetzen – dein System übernimmt das für dich.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..