Design Tokens erklärt: Warum benannte Variablen euer Design System revolutionieren

Design Tokens sind benannte Variablen, die Designentscheidungen als maschinenlesbare Werte speichern. Statt #1971F5 überall hardcoden steht im Code color/primary – ein Name, der Bedeutung trägt und sich zentral aktualisieren lässt.

Das klingt nach einer technischen Kleinigkeit. In der Praxis ist es der Unterschied zwischen einem Design, das sich mit einem Update ändert, und einem, das stundenlange manuelle Arbeit für jede Anpassung braucht.

Das Problem ohne Design Tokens

Stellt euch vor, euer Produkt verwendet Blautöne in 30 Komponenten. Rebranding beschlossen – neues Blau. Ohne Tokens: jede Datei öffnen, jeden Hex-Wert suchen, ersetzen, prüfen. Mit Tokens: eine Variable anpassen, fertig.

Das ist die einfachste Erklärung. Die tatsächliche Stärke geht tiefer.

Zwei Ebenen: Basis-Tokens und semantische Tokens

Ein gut strukturiertes Token-System arbeitet auf zwei Ebenen.

Basis-Tokens (auch Primitive Tokens) speichern rohe Werte ohne Bedeutung:

color/blue/500 = #1971F5
color/blue/600 = #1461D6
spacing/4 = 16px

Semantische Tokens verweisen auf Basis-Tokens und tragen Bedeutung:

color/interactive/primary = color/blue/500
color/interactive/primary-hover = color/blue/600
spacing/component/padding = spacing/4

Warum diese Trennung? Weil ein Dark Mode nicht die rohen Werte ändert, sondern die semantische Zuordnung. color/interactive/primary zeigt im Light Mode auf color/blue/500, im Dark Mode auf color/blue/300. Die Basis-Tokens bleiben identisch – die Bedeutung verschiebt sich.

Figma Variables: Tokens direkt im Design-Tool

Seit Figma Variables (2023) können Tokens direkt im Design-Tool gepflegt werden – keine externe Abhängigkeit mehr für einfache Anwendungsfälle.

In Figma Variables definiert ihr Collections (Basis-Tokens, Semantic Tokens, Themes), einzelne Variablen mit Werten und Mode-Übersteuerungen für Light/Dark/High Contrast. Komponenten und Frames referenzieren dann Variablen statt hardcodierter Werte – jede Änderung propagiert sofort durch alle Screens.

Für komplexere Projekte mit mehreren Plattformen (Web, iOS, Android) empfiehlt sich zusätzlich Token Studio für den JSON-Export und Style Dictionary zur Transformation in plattformspezifische Formate (CSS Custom Properties, Swift-Konstanten, Android XML).

Wann Design Tokens sich lohnen

Design Tokens sind keine Universallösung. Der Aufbau und die Pflege kosten Zeit – die sich nur dann auszahlt, wenn das System tatsächlich genutzt wird.

Lohnt sich für:

• Produkte mit mehr als einer Person am Interface (Designer und Entwickler müssen dieselbe Sprache sprechen)
• Produkte mit einem erwarteten Lebenszyklus von mehr als einem Jahr
• Multi-Plattform-Produkte (Web + App)
• Produkte, bei denen Theming oder White-Labeling geplant ist

Lohnt sich nicht für:

• Einmalprojekte ohne Weiterentwicklung
• MVPs, die nach einem Monat komplett umgebaut werden
• Projekte mit einem einzigen Designer ohne Entwickler-Integration

Tokens und Vibe Coding: Der unterschätzte Zusammenhang

Wer mit KI-Tools wie Cursor oder Claude entwickelt, profitiert doppelt von gut strukturierten Tokens. Ein KI-Modell, das sieht, dass ein Button color/interactive/primary als Hintergrund hat, kann diese Entscheidung auf alle anderen interaktiven Elemente übertragen. Hardcodierte Hex-Werte geben diesem Kontext keine Information.

Präzises Token-Naming ist damit nicht nur ein Design-Benefit, sondern direkt ein Development-Benefit im Zeitalter von KI-gestützter Entwicklung.

Praktischer Einstieg: So fangt ihr an

Nicht mit dem perfekten System, sondern mit dem kleinsten, das echten Wert liefert:

1. Inventur: Welche Farben, Abstände und Typografiegrößen verwendet euer aktuelles Produkt tatsächlich?
2. Basis-Tokens definieren: Reduziert die Werte auf ein minimales Set (5–8 Graustufen, 3–5 Farbreihen, 8–10 Spacing-Werte)
3. Semantische Schicht aufbauen: Was bedeutet welcher Wert im Kontext eures Produkts?
4. In Figma Variables pflegen: Komponenten auf Token-Referenzen umstellen
5. Mit Entwicklung synchronisieren: Export-Format klären, Namenskonvention abstimmen

---

FAQ: Design Tokens

Was ist der Unterschied zwischen Design Tokens und CSS Variables? CSS Custom Properties sind eine technische Implementierung im Browser. Design Tokens sind ein plattformunabhängiges Konzept – sie können zu CSS Variables, Swift-Konstanten oder Android-Ressourcen transformiert werden. Tokens beschreiben Designentscheidungen, CSS Variables sind eine von mehreren möglichen Ausgaben.

Brauche ich Token Studio, wenn ich Figma Variables nutze? Für rein webbasierte Projekte reichen Figma Variables plus manueller CSS-Export oft aus. Token Studio bringt Mehrwert, wenn ihr JSON-Exports für mehrere Plattformen braucht oder einen GitHub-Sync-Workflow aufbauen möchtet.

Wie viele Tokens sind sinnvoll? Weniger ist mehr. Ein System mit 50 gut benannten, semantisch klaren Tokens ist besser als 300 Tokens mit unklarer Bedeutung. Beginnt mit dem, was ihr wirklich braucht.

Können Design Tokens rückwirkend in ein bestehendes Produkt eingeführt werden? Ja, aber mit Aufwand. Am effizientesten geht es komponentenweise: zuerst die meistgenutzten Komponenten auf Tokens umstellen, dann schrittweise das gesamte System.

---

Ihr baut ein Design System und fragt euch, wie ihr Tokens sinnvoll strukturiert? Wir helfen beim Aufbau – hello@betaform.io