Was ist ein Design-Token?
Ein Design-Token ist ein benannter Wert, der genau eine Design-Entscheidung festhält - etwa eine Farbe, eine Abstandsstufe oder eine Schriftgröße - damit diese Entscheidung in Design-Werkzeugen und im Code wiederverwendet werden kann, statt an jeder Stelle von Hand ausgeschrieben zu werden.
Warum man einen Wert überhaupt benennt
Nimm die Farbe der primären Buttons. Direkt notiert steht sie als #2563EB im Stylesheet, als Hex-Feld in einer Figma-Füllung und als Zeichenkette in dem, was letzte Woche jemand getippt hat. Drei Kopien, ohne jede Beziehung zueinander.
Als Token steht sie einmal da, unter einem Namen:
--color-action-primary: #2563EB;Alles andere verweist auf den Namen. Du änderst den Wert einmal, und jede Verwendung ändert sich mit. Diese Indirektion ist die ganze Idee, und alles Weitere folgt daraus.
Was Tokens üblicherweise abdecken
- Farbe: Paletten, Skalen und semantische Rollen wie Hintergrund, Rahmen, Text und Status
- Typografie: Schriftfamilien, Größen, Schnitte, Zeilenhöhen, Laufweite
- Abstände: eine konsistente Skala, meist auf einer 4px- oder 8px-Basis
- Eckenradius und Rahmenstärke
- Schatten und Elevation
- Bewegung: Dauern und Beschleunigungskurven
- Breakpoints und Layout-Maße
Tokens sind keine Variablen
Die Unterscheidung zählt. Eine CSS-Variable ist ein Mechanismus. Ein Design-Token ist eine Entscheidung, die zufällig über einen solchen ausgedrückt wird.
Der praktische Unterschied ist Portabilität. Ein Token existiert unabhängig von einer einzelnen Technologie, und genau deshalb kann derselbe Token-Satz als CSS Custom Properties, als Tailwind-Konfiguration, als Figma-Variablen, als Swift oder Kotlin ausgegeben werden. Existiert er nur als CSS-Zeile, ist es eine Variable.
Formate
Die Design Tokens Community Group beim W3C veröffentlicht ein JSON-Format, das als gemeinsames Austauschformat zwischen Werkzeugen gedacht ist. Jedes Token bekommt ein $value und ein $type:
{
"color": {
"action": {
"primary": { "$value": "#2563EB", "$type": "color" }
}
}
}Die Verbreitung ist ungleichmäßig, wächst aber, und es ist das Nächste an einem neutralen Austauschformat zwischen Design-Werkzeugen und Build-Pipelines.
Wo Flash DSM hier steht
Flash DSM erzeugt einen vollständigen Token-Satz aus einem Prompt, einer Website-URL, einer Figma-Datei oder einem Screenshot und exportiert ihn anschließend als CSS Custom Properties, Tailwind-Konfiguration, Tokens Studio JSON oder Figma-Variablen.