←  Alle Begriffe
D
Design Systems

Design Token

Ein Design Token speichert eine wiederverwendbare Gestaltungsentscheidung wie Farbe, Abstand oder Schriftgröße in Form eines benannten Werts.

Ein Design Token speichert eine wiederverwendbare Gestaltungsentscheidung wie Farbe, Abstand oder Schriftgröße in Form eines benannten Werts. Der Nutzen entsteht durch verbindliche Tokens, zugängliche Komponenten, verständliche Dokumentation und konsequente Pflege. Eng verbunden ist der Begriff mit Design System und Webflow Variables.

Weiterlesen

Design System

Webflow Variables

Styleguide

CSS

FAQ

Design Token

Welche typischen Fehler gibt es bei Design Tokens?
Häufig werden Tokens nach dem Wert statt nach dem Zweck benannt, etwa blau-500 überall im Einsatz. Weitere Fehler sind eine Flut an Tokens, fehlende Dokumentation und Einzelwerte, die neben den Tokens weiterleben. Dann lässt sich ein Farbwechsel nicht mehr an einer Stelle durchführen, und der Hauptnutzen entfällt.
Wie lassen sich Design Tokens in Webflow umsetzen?
In Webflow bilden Variables die Tokens für Farben, Größen und Schriften ab. Über Variable Modes lassen sich Varianten wie ein dunkles Theme abbilden. Sinnvoll ist eine semantische Benennung und ein Verzicht auf direkt eingetragene Einzelwerte in Klassen. Sonst entsteht neben den Variablen wieder ein zweites, unkontrolliertes System.
Welche Token-Ebenen sind in der Praxis sinnvoll?
Üblich sind drei Ebenen: primitive Tokens mit Rohwerten wie einer Farbpalette, semantische Tokens mit Zweck wie Textfarbe primär und komponentenspezifische Tokens. Semantische Tokens machen Themes möglich, etwa einen dunklen Modus, weil nur die Zuordnung wechselt. Zu viele Ebenen erhöhen jedoch die Komplexität ohne Gewinn.
Wie unterscheidet sich ein Design Token von einer CSS-Variable?
Ein Design Token ist ein plattformneutrales Konzept, eine CSS Custom Property ist eine mögliche Umsetzung im Web. Dieselben Tokens können auch für iOS oder Android exportiert werden. Die Variable transportiert einen Wert, das Token zusätzlich seine Bedeutung und Benennung. Der Nutzen liegt im Namensschema, nicht in der Syntax.