Bisher definiert jedes Tool sein eigenes Token-Format. Der W3C-Standard (Design Tokens Format Module) schafft erstmals eine gemeinsame Sprache zwischen Figma, Code und Dokumentation. Wer seine Design-Entscheidungen als Tokens strukturiert, gewinnt Portabilität, Konsistenz und Skalierbarkeit.
Was Design Tokens sind
Design Tokens sind die kleinsten, benennbaren Einheiten von Design-Entscheidungen. Ein Token beschreibt einen konkreten Wert – eine Farbe, einen Abstand, eine Schriftgröße – zusammen mit seinem Namen und Typ. Der entscheidende Unterschied zu CSS Custom Properties: Tokens sind plattformunabhängig. Sie können als CSS Variables, als Android XML, als iOS Swift-Konstanten oder als Figma Styles ausgegeben werden.
Ein Token besteht aus drei Elementen: einem Namen (z.B. color.action.primary), einem Wert (z.B. #1D1F14) und einem Typ (z.B. color). Optional kommt eine Beschreibung hinzu, die den Verwendungszweck dokumentiert. Tokens können auf andere Tokens verweisen (Aliasing), was hierarchische Strukturen ermöglicht.
Warum Tokens wichtiger sind als Komponenten
Eine Komponentenbibliothek ohne Token-Architektur ist eine Sammlung von Einzelteilen. Tokens sind der Klebstoff, der aus Einzelteilen ein System macht. Ohne Tokens gibt es keine systematische Möglichkeit, die Markenidentität über alle Komponenten hinweg zu ändern – jede Farbänderung erfordert manuelle Anpassungen in dutzenden Dateien.
Mit Tokens wird ein Rebranding zum systematischen Prozess: Die Token-Werte werden geändert, die Build-Pipeline generiert neues CSS, alle Komponenten aktualisieren sich automatisch. Was ohne Tokens Wochen dauert, ist mit einer Token-Architektur eine Frage von Stunden.
Die drei Ebenen
Eine robuste Token-Architektur unterscheidet drei Ebenen:
Primitive Tokens (auch Global oder Core Tokens) definieren die Rohwerte: Farben als Hex-Werte, Abstände in Pixeln, Schriftgrößen als Zahlen. Sie bilden die Palette, aus der sich alles Weitere ableitet. Beispiel: color.green.500: #72D36F.
Semantic Tokens geben den Primitives eine Bedeutung im Kontext. Sie beschreiben nicht, was ein Wert ist, sondern wozu er dient. Beispiel: color.feedback.success: {color.green.500}. Das Aliasing stellt sicher, dass eine Änderung des Grüntons sich automatisch auf alle Verwendungen auswirkt.
Component Tokens beschreiben Werte im Kontext einer spezifischen Komponente. Beispiel: button.primary.background: {color.action.primary}. Sie verknüpfen die Semantik mit konkreten UI-Elementen.
Von Figma-Variablen zu CSS Custom Properties
Figma Variables (seit Mitte 2023) bilden Token-Strukturen nativ ab – mit Collections, Modes und Aliasing. Der Workflow: Tokens werden in Figma als Variables definiert oder über Tokens Studio aus einer JSON-Datei synchronisiert. Eine Build-Pipeline (Style Dictionary) transformiert die Token-Dateien in CSS Custom Properties, SCSS-Variablen oder andere Ausgabeformate. Die CSS-Ausgabe wird in die Codebasis integriert.
{
"color": {
"action": {
"primary": {
"$value": "{color.green.600}",
"$type": "color",
"$description": "Primary action color for buttons and links"
}
}
}
}Tokens vs. Hardcoded Values
Kernpunkte
- Design Tokens sind plattformunabhängige Beschreibungen von Design-Entscheidungen – nicht gebunden an CSS, iOS oder Android.
- Drei Ebenen (Primitive, Semantic, Component) schaffen eine hierarchische Struktur, die systematische Änderungen ermöglicht.
- Tokens machen Rebranding vom wochenlangen Projekt zur systematischen Operation.
- Der W3C-Standard definiert ein JSON-Format mit Typisierung und Aliasing für Tool-übergreifende Interoperabilität.
- Token-Architektur ist wichtiger als die Komponentenbibliothek selbst – sie ist das Fundament, auf dem alles aufbaut.
- Wer im W3C-Format dokumentiert, kann Tools und Plattformen wechseln, ohne Tokens neu zu definieren.
