Mit einer steigenden Zahl verwendeter Tools und Tech Stacks wächst auch der Aufwand, den Design-Anpassungen nach sich ziehen. So passiert es schnell, dass wesentliche Designmerkmale wie Farben und Schriften voneinander abweichen: Der Button auf der Microsite entspricht nicht dem Farbwert in Figma, der Online Shop nutzt seit dem Redesign andere Grautöne und bei den Farben auf den Produktseiten wird der Kreativität freien Lauf gelassen. Unklare Zuständigkeiten, dezentral arbeitende Teams und eine mangelnde Dokumentation sind weitere typische Herausforderungen. Abweichende Designs lassen beim User jedoch einen inkonsistenten Eindruck entstehen, was zu einer schlechteren User Experience führen kann.
Design Tokens ermöglichen es, die visuelle Identität über Tools und Touchpoints hinweg automatisch zu synchronisieren. Manuelle Aufwände werden minimiert und Abweichungen reduziert. Über Teamgrenzen hinweg wird eine gemeinsame Sprache für Designentscheidungen etabliert und die Basis für eine konsistentes Erscheinungsbild gelegt.
Übersicht
Was sind Design Tokens?
Design Tokens sind wiederverwendbare Designentscheidungen, die mindestens aus einem Namen und einem Wert bestehen, z.B. color-text-primary: #000;. Es handelt sich um die kleinsten Bestandteile eines Designs. Beispiele sind Farben, Schriftgrößen, Formen und Abstände.
Design Tokens sind oft in eine technische Infrastruktur eingebunden, die das automatische Synchronisieren von Designentscheidungen über verschiedene Tools und Stacks hinweg ermöglicht. Workflow-Automatisierungen sorgen dafür, dass die Werte in die Syntax der jeweiligen Plattform transformiert werden. Design Tokens stehen in einer ersten Version auch in Figma zur Verfügung, sodass Designer und Entwickler auf ein- und dieselbe Quelle zugreifen können (Shared Source of Truth).
Design Tokens sind noch kein offizieller Standard, viele große Unternehmen und Experten wirken aber in einer W3C Community Group darauf hin.
Design Tokens bieten u.a. diese Vorteile:
- Skalierbarkeit: Design Tokens werden global verwaltet. Bei Design Updates können die Werte für alle Plattformen, Tech Stacks und Tools per Automatisierung aktualisiert werden. Manueller Aufwand für die Anpassung entfällt weitgehend. Die visuelle Identität bleibt synchron.
- Entkoppeln von Layout & Theme: Ein in Figma erstelltes Layout kann auf globaler Ebene um beliebig viele Themes erweitert werden. Das spart Zeit bei der Erstellung von Dark und Light Themes, aber auch bei der Verwaltung von Multi-Brand Design Systemen.
- Kollaboration: Durch das Etablieren von einheitlichen Namen für Designentscheidungen wird die Kommunikation zwischen Entwicklern und Designern vereinfacht, Missverständnisse werden seltener.
