Design Tokens sind zentral definierte Werte, die für das Design und die Darstellung einer Anwendung oder Website verantwortlich sind. Diese Tokens dienen als Referenz für Design-Entscheidungen und erlauben eine einheitliche und konsistente Darstellung der Benutzeroberfläche.
Design Tokens beschreiben meist visuelle Eigenschaften, die beim User Interface Design, Designsystemen und bei der Frontend-Entwicklung eingesetzt werden, wie:
- Farbe
- Typografie
- Abstände & Größen
- Formeigenschaften wie abgerundete Ecken
- Konturen
- Schatten
- Icons
- Animation
Aber auch nicht visuelle Eigenschaft wie Sound ist möglich.
Referenz- und Alias Tokens
Man kann grob zwischen Referenz- oder globalen Tokens und Alias Tokens unterscheiden. Referenz Tokens definieren alle grundlegenden Eigenschaften und Werte, die für das Design relevant sind.
Alias Tokens hingegen bieten eine Abstraktion, und verknüpfen die Variablen mit bestimmten Verwendungszwecken. Es kann dabei verschiedene Ebenen von Alias Tokens geben, wie beispielsweise eine Abstraktionsebene für den allgemeinen Verwendungszweck und eine für konkrete Komponenten.
Vorteile von Design Token Systemen
Ein Token System hat den Vorteil, dass Design-Entscheidungen dokumentiert sind und dies die Zusammenarbeit zwischen Design und Entwicklung erleichtert. Da visuelle Elemente in Tokens definiert sind, kann das Design einfach überarbeitet werden, indem nur die Tokens oder deren Beziehung geändert werden. Auch können so Werte leichter auf verschiedene Plattformen übersetzt werden (z.B. Web, Android oder iOS).
Auf diese Weise wird sichergestellt, dass das Design konsistent bleibt und sich nicht unabsichtlich ändert, wenn Änderungen oder Erweiterungen vorgenommen werden. Dies verbessert nicht nur die visuelle Konsistenz, sondern erleichtert auch die Wartung und Pflege im Laufe der Zeit.
Links und Quellen:
https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71
https://medium.com/user-experience-design-1/design-tokens-cheatsheet-927fc1404099
