
Smart Grid
Design System
Multiplattform-, Multimarken- und tokenisiertes Designsystem
Herausforderungen
Elli, eine Marke des Volkswagen-Konzerns, die auf Energie- und Ladelösungen spezialisiert ist, stand vor der Herausforderung, mehrere Produkte auf verschiedenen Plattformen zu verwalten. Diese Herausforderung erforderte ein einheitliches Branding für verschiedene VW-Tochtergesellschaften, was zu Inkonsistenzen bei den Komponenten, Redundanz und Ineffizienzen bei der Projektentwicklung führte.
Implementierte Lösungen
Um dieses Problem zu lösen, begann Elli mit der Entwicklung eines multiplattform, multimarken, White-Label- und Token-Designsystems. Ziel des Designsystems war es, eine einzige zuverlässige Quelle für alle Komponenten, Farben, Abstände, Typografien, Symbole und andere Designelemente zu schaffen und so Konsistenz und Genauigkeit auf allen Elli-Plattformen sicherzustellen: Figma, Web, Android und iOS.
Durch die Prüfung von Designelementen, -stilen und -komponenten in jedem Elli-Produkt konnte das Designsystem-Team eine variable Architektur und globale Komponenten für alle Produkte erstellen, die genau auf die Bedürfnisse von Elli zugeschnitten sind. Dies betonte auch die Zusammenarbeit nicht nur zwischen Designern und Entwicklern, sondern auch über verschiedene Produkte, Plattformen und Marken hinweg
Beitrag von Reply
-
Erstellung und Pflege der Variablen/Token-Architektur
-
Synchronisierung aller Plattformen mit Variablen/Tokens über Style Dictionary
-
Durchführung von Audits von Komponenten über verschiedene Plattformen, Produkte und Marken hinweg
-
Design von Figma-Komponenten mit integrierten Variablen/Tokens
-
Implementierung von Web-Komponenten in Übereinstimmung mit dem Figma-Design (React, Style Dictionary, Storybook, MUI)
-
Erstellung und Verteilung von Icons über alle Plattformen hinweg
-
Umfassende Dokumentation von Komponenten und Variablen, einschließlich der Komponentenstruktur, Spezifikationen sowie Empfehlungen und Warnungen
-
Beratung in Design und Entwicklung
Hauptmerkmale
Synchronisierung aller Plattformen mit Hilfe von Variablen/Tokens, die über das Figma-Plugin „Token Stdio“, Figma-Variablen und das Style Dictionary
Eine Sammlung wiederverwendbarer Komponenten für die verschiedenen Plattformen, gestaltet mit diesen Variablen/Tokens
Sicherstellung der Konsistenz und Skalierbarkeit der Komponenten für einfache Änderung oder Hinzufügung von Marken und Themen, aber auch ausreichende Flexibilität an die Anforderungen verschiedener Plattformen
Erstellung von umfassenden Richtlinien für verschiedene Komponente, Variablen und Tokens
Impact
Durch die Standardisierung des Designsystems und die Bereitstellung wichtiger Services konnte Elli dank REPLY auf lange Sicht viel Zeit und Ressourcen einsparen. Das einheitliche Designsystem ermöglicht eine effiziente Zusammenarbeit, optimierte Entwicklung und sorgte für ein einheitliches Branding über verschiedene Plattformen und Produkte innerhalb des Volkswagen-Konzerns hinweg.
Methodology
Scrum, Design thinking
Technologies & Tools
Figma, Figma variables & modes, Token Studio, Style Dictionary, React, TypeScript, MUI, Azure DevOps, Asana
Sprich unseren Experten für die Verwaltung von Ladestationen an

Stefan
Software Engineer