← Zurück zum Lernbereich
Nugget · Entwicklung
Design Tokens verstehen
Die Sprache zwischen Design und Code
Warum #FF4500 keine Design-Entscheidung ist. Aber accent.action.primary eine ist.
01
Namen statt Hexwerte
Ein Token wie color.surface.raised beschreibt Absicht, nicht Aussehen. Wechselt das Theme, ändert sich der Wert an einer Stelle. Nicht in vierzig Dateien.
02
Drei Ebenen reichen
Primitiv (blue.500), Semantik (color.action.primary), Komponente (button.bg.hover). Mehr Ebenen erzeugen mehr Verwaltung als Nutzen.
03
Tokens sind Vertrag
Wenn Design und Entwicklung dieselben Token-Namen sprechen, verschwindet die Übersetzungsfehler-Klasse komplett. Das ist Didaktik für Produkte.
Ein Nugget, eine Idee: Wende sie heute noch einmal an. Wissen wird erst durch Wiederholung zu Können.