Design Token Workshop

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.

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 (Single 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.

Für wen ist der Workshop?

• Unternehmen und Agenturen, deren Teams mit Figma an Designs für verschiedene digitale Touchpoints und Tech Stacks arbeiten
• Agenturen, die eine wiederverwendbare Basis für neue, skalierbare Kundenprojekte in Figma schaffen möchten
• Designer, die in Figma parallel an mehreren Themes arbeiten und derzeit individuelle, redundante Frames dafür nutzen
• Interdisziplinäre Teams, die einen für alle verfügbaren, zentralen Ort für Designentscheidungen etablieren möchten

Was bringt der Workshop?

• Ein umfassendes Verständnis für das Konzept, die Chancen & Risiken sowie die Einsatzbereiche von Design Tokens
• Klarheit: Was bringen Design Tokens konkret für mein Daily Business?
• Roadmap: Wie sehen die nächsten Schritte zur Implementation von Design Tokens aus?
• PDF mit den Design Tokens Basics
• Sammlung relevanter Artikel & Tools
• Figma Playground mit Tokens & Themes zur Vertiefung

Kosten

1.000 € zzgl. 19% USt.

Über mich

Seit über 8 Jahren arbeite ich als Freelancer an der Schnittstelle von Design und Code. Das Frontend ist mir dabei ebenso vertraut wie Figma. Die Einführung von Design Tokens in meine tägliche Arbeit hat Aufwände reduziert und zu mehr Konsistenz und Klarheit geführt. In dem Workshop möchte ich die Vorteile von Design Tokens erfahrbar machen und den Weg für die Implementierung ebnen.

Meine Erfahrung im Bereich Design Tokens:

• Workshops bei Nathan Curtis und Brad Frost
• Eigene Design Token Talks auf Meetups und Konferenzen – inklusive wertvollem Feedback & Austausch mit Teilnehmern
• Teilnahme an Konferenzen mit Design Token Bezug – online und vor Ort
• Erfahrung als Frontend-Entwickler und UI/UX Designer – daher vertraut mit den Perspektiven & Herausforderungen beider Professionen