Ich sammelte wiederkehrende Komponenten, Varianten und Zustände und machte doppelte Lösungen sichtbar.
Design System
Ein System für alle Produkte
01Kontext & Herausforderung
Über mehrere Jahre waren mehr als fünf Produkte unabhängig voneinander gewachsen. Dadurch entstanden unterschiedliche UI-Muster, doppelte Komponenten und ein hoher Aufwand bei Änderungen. Mein Ziel war ein produktübergreifendes Design System als gemeinsame Grundlage für Design und Code.
02Audit
Ich prüfte alle Produkte, um sinnvolle Unterschiede von unnötigen Inkonsistenzen zu unterscheiden.
Ich verglich Farben, Typografie, Abstände und Interaktionen und leitete erste Standards ab.
Gemeinsam identifizierten wir fehlende Komponenten, unterschiedliche Benennungen und unklare Übergaben.
03Strategie
Das System bestand aus drei Ebenen: Design-Grundlagen in Figma, Tokens als Verbindung und wiederverwendbare Komponenten im Code.
04ENTSCHEIDUNGEN
Design-Tokens
Entscheidung
Ich ersetzte feste Werte für Farben, Typografie, Abstände, Größen, Radien usw. durch semantische Design-Tokens.
Begründung
Damit können Werte zentral geändert und in verschiedenen Komponenten, Produkten und Themes einheitlich verwendet werden.
Klare Verbindung zwischen Figma und Code
Entscheidung
Ich verband die Figma-Komponenten über Code Connect direkt mit den implementierten Code-Komponenten und ihren Properties.
Begründung
Code Connect ordnet die Figma-Properties der echten Component API zu. Damit ist die Referenz eindeutig und nicht nur visuell ähnlich.
Modulare Governance
Entscheidung
Ich strukturierte Regeln, Entscheidungen und Ausnahmen in kleine thematische Dokumentationsmodule mit einer zentralen Übersicht.
Begründung
Damit finden Designer und Entwickler relevante Standards schneller und verwenden einheitliche Benennungen und Beispiele.
05Umsetzung
Alle Teile des Design Systems wurden über einen gemeinsamen Workflow verbunden, von Tokens und Komponenten bis zur Dokumentation. Dadurch blieben Design, Code und Regeln konsistent und konnten zentral gepflegt werden.
Aus der Pipeline
-
01
Figma 
-
02
Token Studio 
-
03
Code 
-
04
Storybook 
-
05
Dokumentation & Governance 
06Wirkung
Einheitlich & flexibel
Wiederkehrende Elemente folgen denselben Regeln und werden zentral verwaltet. Dadurch bleiben die Produkte konsistent und der Pflegeaufwand wird reduziert.
Effizienter Design-Handoff
Gestaltete Screens konnten direkt mit den passenden Komponenten des Design Systems umgesetzt werden. Das reduzierte Fehler und den Aufwand für die Design-QA.
Bessere Zusammenarbeit
Design, Code und Dokumentation nutzen dieselben Komponenten und Regeln. Dadurch wird die Abstimmung zwischen Design und Entwicklung klarer.
