Semantische Design-Token-Architektur: Globale, semantische und Komponenten-Tokens
So strukturieren Sie Design-Tokens in drei Ebenen, unterstützen Themen und mehrere Marken und versenden sie mithilfe des W3C-DTCG-Formats an das Web, iOS und Android.
Kernaussage
Die meisten ausgereiften Designsysteme verwenden drei Ebenen von Token: global (Rohwerte wie z. B. blue-600), semantisch (Zweck wie z. B. color.action.primary) und Komponente (spezifische Verwendungen wie z. B. button.background). Komponenten verweisen auf semantische Token, semantische Token verweisen auf globale und Themen oder Marken tauschen nur die semantische Ebene aus. Speichern Sie sie im W3C-DTCG-Format und generieren Sie Plattformcode mit einem Build-Tool.
Die drei Ebenen
Material Design beschreibt drei Klassen von Token: Referenz, System und Komponente. Viele Teams bezeichnen sie als global, semantisch und komponentenorientiert. Die Namen unterscheiden sich, aber die Idee ist dieselbe: Trennen Sie die Rohwerte von den Entscheidungen darüber, wie sie verwendet werden.
- Global (Referenz): jeder Rohwert im System, z. B. blue-600, space-4, font-size-16, spring-gentle.
- Semantik (System): wofür ein Wert steht, z. B. color.text.primary, color.action.primary, motion.enter.
- Komponente: wie eine Komponente das System nutzt, z. B. button.background oder dialog.motion.open.
Warum semantische Token wichtig sind
Wenn eine Schaltfläche blue-600 direkt verwendet, bedeutet jede Theme-Änderung die Bearbeitung jeder Komponente. Wenn color.action.primary, dunkler Modus, hoher Kontrast oder eine neue Marke verwendet werden, ändert sich nur das, worauf color.action.primary verweist. Material weist darauf hin, dass Token es ermöglichen, eine kontrastreiche Palette anzuwenden oder die Schriftskala systemweit auf genau diese Weise zu ändern.
Themen und mehrere Marken
Bewahren Sie für Mehrmarken- oder White-Label-Produkte einen Satz Semantik- und Komponenten-Tokens und eine globale Palette pro Marke auf. Jedes Thema ist eine Zuordnung von semantischen Token zu globalen Werten. Die erste stabile Version der W3C Design Tokens-Spezifikation (2025.10), die im Oktober 2025 veröffentlicht wurde, fügte Design- und Mehrmarkenunterstützung, moderne Farbräume wie Display P3 und OKLCH sowie Aliase und Referenzen auf Komponentenebene hinzu.
Auch Bewegungstoken gehören hierher
Dauer, Entspannungskurven und Federn folgen den gleichen Stufen. Ein globaler Token könnte aufgrund seiner Steifigkeit und Dämpfung federschonend sein; ein semantisches Token motion.enter zeigt darauf; Ein Komponenten-Token sheet.motion.open zeigt auf motion.enter. Fügen Sie ein Design mit reduzierter Bewegung hinzu, das Bewegungstokens kurzen Überblendungen zuordnet.
Versand von Token an jede Plattform
Bewahren Sie Token in einem Repository als DTCG JSON auf, der einzigen Quelle der Wahrheit. Ein Build-Tool wie Style Dictionary wandelt sie in CSS-Variablen, Swift, Kotlin, Flutter oder andere Formate um. Designtools, die dasselbe Format lesen, können synchron bleiben, und KI-Codierungstools können JSON direkt lesen.
- Quelle der Wahrheit: DTCG JSON in Git, überprüft wie Code
- Erstellen: Bei jeder Änderung auf jede Plattform umstellen
- Design-Tool-Synchronisierung: Import oder Plugin, niemals manuell kopierte Werte
- Flusen: Rohwerte in Komponenten verbieten
Wichtige Prinzipien
- Drei Ebenen: global (Werte), semantisch (Zweck), Komponente (Nutzung)
- Komponenten verweisen auf semantische Token, niemals auf Rohwerte
- Themen und Marken bilden die semantische Ebene neu ab
- Das W3C-DTCG-Format erreichte im Oktober 2025 seine erste stabile Version (2025.10).
- Fügen Sie Bewegungstoken und ein Thema mit reduzierter Bewegung hinzu
Häufige Fragen
Quellen
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — W3C Design Tokens Community-Gruppe
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com