Design
tokens
Ziele
Wie können wir Design-Entscheidungen zentral definieren und auf allen Plattformen automatisiert verfügbar machen? Ziel war es, eine gemeinsame Sprache zwischen Design und Entwicklung zu schaffen, die Fehlerquellen reduziert, konsistente Nutzererlebnisse ermöglicht und Entwicklungsprozesse messbar beschleunigt.
Kontext
In vielen Projekten gibt es einen unsichtbaren Graben zwischen kreativer und technischer Welt. Figma-Designs werden erstellt, Entwickler interpretieren Spezifikationen, Änderungen kommen in letzter Minute – und am Ende weicht das Resultat vom Entwurf ab.
Methoden
- Analyse bestehender Design- und Entwicklungsprozesse
- Systemarchitektur entwickeln
- Tool-Integration
- Schulung von Design- und Entwicklerteams
Migros
Design System Lead
Learnings
- Ich habe gelernt, dass eine gemeinsame Sprache zwischen Design und Entwicklung enorm viel Zeit spart und die Konsistenz in Projekten deutlich erhöht.
- Ich habe gelernt, dass eine klare und durchdachte Namenskonvention entscheidend für die langfristige Wartbarkeit ist.
- Ich habe gelernt, dass gezielte Schulungen zu Design Tokens unerlässlich für eine reibungslose Einführung und Nutzung sind.
- Ich habe gelernt, dass Design Tokens auch die Kreativität fördern können, weil sie den Fokus von Detailabstimmungen auf die eigentliche Gestaltung verlagern.
Design Tokens bei Migros
Für die Migros-Gruppe haben wir ein tokenbasiertes Multi-Brand-Design-System aufgebaut, das unsere digitale Produktentwicklung deutlich beschleunigt. Design Tokens fungieren dabei als Brücke zwischen Design und Code – sie eliminieren Übersetzungsfehler, sorgen für Konsistenz und reduzieren den Abstimmungsaufwand zwischen Design, Entwicklung, Produktmanagement und externen Agenturen.
Was sind Design Tokens?
Design Tokens sind ein vom W3C empfohlener Standard, um Designentscheidungen in einer plattformübergreifend nutzbaren, maschinenlesbaren Form zu speichern (JSON-Format) und konsistent in allen digitalen Produkten anzuwenden. Beispiele für Design Tokens:
- Farben – Primärfarbe, Hintergrundfarbe, Statusfarben
- Typografie – Schriftfamilien, Schriftgrößen, Zeilenhöhen
- Abstände – Margins, Paddings, Grid-Spacing
- Animationen – Dauer, Verzögerung, Bewegungskurven
Der Weg unserer Design Tokens
Die Abbildung zeigt den Design Token Workflow – von der Erstellung bis zur Nutzung im Code.
- Zentrale SpeicherungAlle Designentscheidungen werden als Design Tokens zentral in GitLab gespeichert – unsere Single Source of Truth.
- Synchronisation mit FigmaÜber Tokens Studio können Tokens direkt aus Figma gelesen oder in Figma Variables zurückgeschrieben werden. So bleiben Design und Code jederzeit synchron.
- Automatisierte Build-PipelineEine Pipeline übersetzt die Tokens automatisch in verschiedene Formate wie CSS oder Tailwind.
- Integration in FrameworksMit den generierten Tokens wird die UI Library gebaut. Diese kann über Wrappers in Angular, React oder Vue3 integriert werden.
- Visualisierung & DokumentationIn Supernova werden die Tokens zusätzlich visualisiert und dokumentiert – als jederzeit aktuelle und leicht zugängliche Referenz für Design- und Entwicklerteams.
Design token ARCHITEKTUR
Unsere Architektur ist hierarchisch aufgebaut:
- Base TokensEnthalten die Rohwerte aller Designentscheidungen (Farben, Abstände, Schriftarten etc.) und sind kontextunabhängig.Beispiel: mdx.base.color.orange.600 = #FF6600
- System TokensVerweisen auf Base Tokens und geben ihnen semantische Bedeutung (z. B. „Primary Color“). Sie definieren systemweite Entscheidungen, die für Themen, Bildschirmgrössen oder Marken angepasst werden können.
- Component TokensVerweisen auf System Tokens und definieren das Aussehen einzelner Komponenten. So bleibt das Design konsistent, selbst wenn Markenfarben oder Themen wechseln.
Ergebnisse
- Ca. 30 % effizientere Entwicklung von Websites
- Klare, maschinenlesbare Designentscheidungen ohne Interpretationsspielraum
- Leichte Skalierbarkeit auf neue Marken, Themen oder Plattformen
- Reduzierte Feedbackschleifen und schnellere Time-to-Market
NÄCHSTES PROJEKT LESEN
ZURÜCK ZU MY PROJECTS
HOME
MY STORY
MY PROJECTS
CONTACT ME
Design
tokens
Ziele
Wie können wir Design-Entscheidungen zentral definieren und auf allen Plattformen automatisiert verfügbar machen? Ziel war es, eine gemeinsame Sprache zwischen Design und Entwicklung zu schaffen, die Fehlerquellen reduziert, konsistente Nutzererlebnisse ermöglicht und Entwicklungsprozesse messbar beschleunigt.
Kontext
In vielen Projekten gibt es einen unsichtbaren Graben zwischen kreativer und technischer Welt. Figma-Designs werden erstellt, Entwickler interpretieren Spezifikationen, Änderungen kommen in letzter Minute – und am Ende weicht das Resultat vom Entwurf ab.
Methoden
- Analyse bestehender Design- und Entwicklungsprozesse
- Systemarchitektur entwickeln
- Tool-Integration
- Schulung von Design- und Entwicklerteams
Migros
Design System Lead
Learnings
- Ich habe gelernt, dass eine gemeinsame Sprache zwischen Design und Entwicklung enorm viel Zeit spart und die Konsistenz in Projekten deutlich erhöht.
- Ich habe gelernt, dass eine klare und durchdachte Namenskonvention entscheidend für die langfristige Wartbarkeit ist.
- Ich habe gelernt, dass gezielte Schulungen zu Design Tokens unerlässlich für eine reibungslose Einführung und Nutzung sind.
- Ich habe gelernt, dass Design Tokens auch die Kreativität fördern können, weil sie den Fokus von Detailabstimmungen auf die eigentliche Gestaltung verlagern.
Design Tokens bei Migros
Für die Migros-Gruppe haben wir ein tokenbasiertes Multi-Brand-Design-System aufgebaut, das unsere digitale Produktentwicklung deutlich beschleunigt. Design Tokens fungieren dabei als Brücke zwischen Design und Code – sie eliminieren Übersetzungsfehler, sorgen für Konsistenz und reduzieren den Abstimmungsaufwand zwischen Design, Entwicklung, Produktmanagement und externen Agenturen.
Was sind Design Tokens?
Design Tokens sind ein vom W3C empfohlener Standard, um Designentscheidungen in einer plattformübergreifend nutzbaren, maschinenlesbaren Form zu speichern (JSON-Format) und konsistent in allen digitalen Produkten anzuwenden. Beispiele für Design Tokens:
- Farben – Primärfarbe, Hintergrundfarbe, Statusfarben
- Typografie – Schriftfamilien, Schriftgrößen, Zeilenhöhen
- Abstände – Margins, Paddings, Grid-Spacing
- Animationen – Dauer, Verzögerung, Bewegungskurven
Der Weg unserer Design Tokens
Die Abbildung zeigt den Design Token Workflow – von der Erstellung bis zur Nutzung im Code.
- Zentrale SpeicherungAlle Designentscheidungen werden als Design Tokens zentral in GitLab gespeichert – unsere Single Source of Truth.
- Synchronisation mit FigmaÜber Tokens Studio können Tokens direkt aus Figma gelesen oder in Figma Variables zurückgeschrieben werden. So bleiben Design und Code jederzeit synchron.
- Automatisierte Build-PipelineEine Pipeline übersetzt die Tokens automatisch in verschiedene Formate wie CSS oder Tailwind.
- Integration in FrameworksMit den generierten Tokens wird die UI Library gebaut. Diese kann über Wrappers in Angular, React oder Vue3 integriert werden.
- Visualisierung & DokumentationIn Supernova werden die Tokens zusätzlich visualisiert und dokumentiert – als jederzeit aktuelle und leicht zugängliche Referenz für Design- und Entwicklerteams.
Design token ARCHITEKTUR
Unsere Architektur ist hierarchisch aufgebaut:
- Base TokensEnthalten die Rohwerte aller Designentscheidungen (Farben, Abstände, Schriftarten etc.) und sind kontextunabhängig.Beispiel: mdx.base.color.orange.600 = #FF6600
- System TokensVerweisen auf Base Tokens und geben ihnen semantische Bedeutung (z. B. „Primary Color“). Sie definieren systemweite Entscheidungen, die für Themen, Bildschirmgrössen oder Marken angepasst werden können.
- Component TokensVerweisen auf System Tokens und definieren das Aussehen einzelner Komponenten. So bleibt das Design konsistent, selbst wenn Markenfarben oder Themen wechseln.
Ergebnisse
- Ca. 30 % effizientere Entwicklung von Websites
- Klare, maschinenlesbare Designentscheidungen ohne Interpretationsspielraum
- Leichte Skalierbarkeit auf neue Marken, Themen oder Plattformen
- Reduzierte Feedbackschleifen und schnellere Time-to-Market
ZURÜCK ZU MY PROJECTS
NÄCHSTES PROJEKT LESEN