Design Tokens

Design Tokens sind benannte Variablen, die fundamentale Design-Entscheidungen wie Farben, Abstands- und Grössenwerte, Typografie und Animationszeiten in einem plattformunabhängigen Format speichern. Sie bilden die Brücke zwischen Design-Tools und Code und stellen sicher, dass dieselben Designwerte konsistent in verschiedenen Plattformen und Technologien verwendet werden. Design Tokens wurden von Salesforce im Rahmen ihres Lightning Design Systems popularisiert.

Erläuterung

Statt einen spezifischen Farbwert wie "#0066CC" direkt im Code zu verwenden, wird ein Token-Name wie "color-primary-500" genutzt, dem der Wert zugewiesen ist. Dies ermöglicht es, Design-Änderungen zentral zu verwalten: Wird der Primärfarbwert geändert, aktualisiert er sich automatisch überall, wo der Token verwendet wird. Design Tokens können hierarchisch strukturiert werden: Global Tokens definieren Rohwerte (z.B. "blue-500"), Alias-Tokens vergeben semantische Namen (z.B. "color-primary") und Component-Tokens beziehen sich auf spezifische Verwendungskontexte (z.B. "button-background"). Tools wie Style Dictionary von Amazon ermöglichen die automatische Umwandlung von Token-Definitionen in CSS-Variablen, iOS-Farben, Android-Ressourcen und andere plattformspezifische Formate. Figma Variables bietet seit 2023 native Token-Unterstützung direkt im Design-Tool.

Praxistipp: Beginnen Sie mit einer klaren Token-Taxonomie, bevor Sie einzelne Tokens definieren - ein schlechtes Namensschema ist schwer rückgängig zu machen, sobald Tokens produktiv eingesetzt werden. Nutzen Sie semantische Token-Namen, die den Verwendungszweck beschreiben (z.B. "color-button-primary") statt den visuellen Wert (z.B. "blue"), damit spätere Theme-Änderungen keine Token-Umbenennung erfordern.