Ein Design-System wächst selten am fehlenden Werkzeug, sondern an einer simplen Frage: Wie heißen die Design Tokens, mit denen ein Team täglich arbeitet? Der Designer Murphy Trueman argumentiert, dass die mittlere, semantische Ebene über Ordnung oder Wildwuchs entscheidet. Ein Token „Blau 500“ wird schließlich unbrauchbar, sobald die Marke auf Grün umstellt.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
In der Praxis kostet die Technik weniger Nerven als die Benennung. Genau an der semantischen Ebene entscheidet sich, ob ein Design-System sauber skaliert oder in Sonderfällen zerfasert.
Das Wichtigste in Kürze
- Design Tokens ordnen sich in drei Ebenen: Rohwerte (Primitive), Rollen (Semantik) und komponentengenaue Tokens.
- Die semantische Ebene benennt den Zweck, etwa „Aktion“ oder „Fläche“, statt das Aussehen wie „Blau 500“, und übersteht so jeden Rebrand.
- Zu viele Rollen führen zu Wildwuchs, zu wenige zu einer Flut komponentengenauer Ausnahmen.
- Figma-Variablen, Tokens Studio und Style Dictionary setzen die Namen bis in den Code durch.
Was leistet die semantische Ebene?
Ein reifes System kennt drei Token-Ebenen. Primitive halten die Rohwerte fest, etwa einen Farbwert „Blau 500“ oder einen Abstand von 16 Pixeln. Die semantische Ebene darüber vergibt Rollen: Ein Token „Text primär“ oder „Fläche interaktiv“ verweist auf einen Primitivwert und sagt zugleich, wofür er gilt. Ganz unten sitzen komponentengenaue Tokens wie „Button Hintergrund aktiv“, ähnlich dem modularen Aufbau nach Atomic Design.
Der Nutzen dieser Mittelschicht liegt in der Entkopplung. Tauscht ein Team die Primitive, wechselt das ganze Thema; ändert das Team die Semantik, verschiebt sich das Verhalten überall dort, wo die Rolle gilt. Ein Name wie „Farbe Aktion primär“ bleibt richtig, auch wenn aus Blau später Grün wird. Fehlt diese Ebene, bleibt am Ende nur eine lose Komponenten-Bibliothek.
Wo kippen Design-Systeme?
Beide Extreme brechen die semantische Ebene. Der Designer Murphy Trueman beschreibt zwei Muster: Bei 150 bis 300 Semantik-Tokens verschwimmen die Namen, und Designer greifen aus Bequemlichkeit wieder direkt zu den Primitiven. Bleiben umgekehrt nur 20 bis 30 Rollen übrig, füllen komponentengenaue Tokens die Lücke und wuchern auf 400 und mehr.[1]
Seinen Praxistest kann jedes Team nachstellen: einer Person, die das System nicht kennt, ein Element im Entwurf zeigen und fragen, zu welchem Token sie greift. Das Zögern verrät, ob die Namen taugen. Ob ein System diesem Anspruch genügt, prüft inzwischen sogar ein eigener KI-Benchmark für Design-Systeme.
Ein Design-System scheitert fast nie an der Technik, sondern an der Frage, ob ein Name auch nach dem nächsten Rebrand noch stimmt. Genau diese Namensarbeit unterschätzt der Mittelstand am häufigsten.
— Markus Seyfferth, Chefredakteur Dr. Web
Wie benennen Teams Tokens richtig?
Die Regel bleibt schlicht: Tokens benennen den Zweck, nicht die Optik. „Farbe Aktion primär“ schlägt „Farbe Blau primär“, weil der Zweck einen Rebrand überlebt und die Farbe nicht. So wird aus einer Umfärbung ein Wechsel an einer Stelle statt einer Suchen-und-Ersetzen-Aktion über Hunderte Werte.
Den Unterbau liefern die Werkzeuge. Figma verwaltet die Rollen seit der Config 2023 über Variablen mit eigenem Hell- und Dunkelmodus, das quelloffene Style Dictionary übersetzt dieselben Tokens nach CSS, iOS und Android, und das Figma-Plugin Tokens Studio hält beide Seiten synchron. Ein herstellerneutrales Austauschformat der W3C Design Tokens Community Group soll die Werte zwischen den Tools portabel halten.[2]
Für Agenturen und Inhouse-Teams im DACH-Raum zählt weniger das Tool als die Disziplin dahinter: Rollen früh nach ihrem Zweck benennen und sie anschließend wie Code versionieren. Ein neuer Grund zur Sorgfalt kommt hinzu, denn agentische Design-Tools lesen inzwischen die Beschreibungen der Tokens mit, und mehrdeutige Namen führen dort zu ebenso mehrdeutigen Vorschlägen.
Die mittlere Ebene benennt den Zweck, nicht das Aussehen.
Primitive
Rohwerte ohne Bedeutung. Wenige Dutzend bis wenige Hundert.
Semantik
Rollen mit Zweck. Der stabile Kern, den ein Rebrand nicht bricht.
Komponente
Feinschliff pro Baustein. Verweist auf die Semantik darüber.
„Farbe Aktion primär“ statt „Farbe Blau primär“: Der Zweck überlebt den Rebrand, die Farbe nicht.
Semantik-Tokens gelten als zu viele: Die Namen verschwimmen, das System driftet.
zu wenige Rollen zwingen zu immer neuen Ausnahmen.
komponentengenaue Tokens entstehen dann als Notlösung.
Quellen
[1] Baseline Design, Murphy Trueman: „Naming the Middle“
[2] W3C Design Tokens Community Group: Design Tokens Format Module
