Designer und Entwickler arbeiten zusammen
Design Systeme:
Eine gemeinsame Sprache
Nicht nur Kundenprojekte, sondern auch Konferenzen und die Online-Community rund um Figma sind seit den letzten Jahren geprägt vom Thema Design Systeme und Design Tokens. Designer und Developer sprechen erstmals eine gemeinsame Sprache mit der Definition von Design Entscheidungen in Variablen (Design Tokens). Diese These war Motivation für das Projekt und sollte die folgenden Fragen beantworten:
➔ Ist eine Synchronisierung und Teilautomatisierung zwischen UI-Design und Frontend Development via Tokens möglich?
➔ Und wie kann ein Workflow aussehen, der die Zusammenarbeit dahingehend wirklich optimiert?
Dieses Forschungsprojekt fokussiert sich auf ein Token-basiertes Design System, das von Anfang an in Zusammenarbeit von Designern und Entwicklern entsteht. Die Herausforderung besteht darin, das Design System aufzubauen und dabei den Prozess von Anforderungen über das Design bis hin zu der Entwicklung von Webkomponenten auf das Fundament von Design Tokens zu stellen.
Bindeglied von Figma und Web Components Bibliothek
Design Tokens als Basis für Zusammenarbeit
Im Rahmen des R&D Projekts wurde als Fundament ein technischer Weg gewählt, um für die Zusammenarbeit zwischen Design und Entwicklung zu verbessern. Design Tokens bilden dabei das Bindeglied zwischen den Figma Designs und einer Web Components Bibliothek.
Änderungen an den Design Tokens werden somit über einen technischen Prozess gesteuert und sowohl im Design als auch im Code gespiegelt. Dabei wird nicht automatisch Code generiert. Vielmehr haben kleinste Designentscheidungen – wie etwa Abstände, Schriften oder Farben – direkte Auswirkungen auf die implementierte Version der Elemente.
TLM – The Liberation Machine
Unser aktueller Workflow
Ein sehr strikter Aufbau und Namensschema der Design Tokens stützen den technischen Ablauf. So entsteht eine unmissverständliche Basis für die kleinsten, aber essenziellen Designentscheidungen, mit denen sowohl Entwickler als auch Designer arbeiten.
Technologien:
Figma, Token Studio Plugin, Stencil, Style Dictionary, Storybook, Chromatic, React, Vue, Angular, Web Components, GitHub, GitHub Actions
Methoden:
Agiles Projektmanagement, Kanban
Herausforderungen früh erkennen und gemeinsam lösen
Erfolgreiches Design System: Kommunikation als Schlüssel
Kommunikation zwischen Entwicklern und Designern ist unabdingbar, um ein Softwareprojekt erfolgreich und effizient umzusetzen. Die Expertise beider Bereiche fließt auf ein gemeinsames Produkt ein und bedingen sich an vielen Stellen gegenseitig.
Damit ein guter Austausch von Kreativität, technischer Machbarkeit und Entscheidungsfindung stattfinden kann, ist eine unmissverständliche Kommunikation wichtig. Manche Entscheidungen entspringen der Kreativität eines Designers, andere sind getrieben von technischer Umsetzbarkeit oder weiteren Rahmenbedingungen.
Herausforderungen können durch eine gute Designer-Entwickler Kommunikation frühzeitig erkannt und Lösungen gemeinsam gefunden werden.
Mehr erfahren