Ein Jahr mit Dev Mode: 10 Tipps von einem Engineering Manager
Seit der Integration von Dev Mode in unseren Designsystem-Workflow habe ich viel darüber gelernt, wie Teams das meiste aus dem leistungsstarken Tool herausholen können. Hier sind meine wichtigsten Learnings.
Ein Jahr mit Dev Mode: 10 Tipps von einem Engineering Manager teilen
Als Figma Dev Mode auf der Config 2023 ankündigte, war ich neugierig, aber auch skeptisch. Einerseits bin ich als Engineering-Manager bei Decathlon, dem Outdoor- und Sportartikelhändler, immer offen für neue Tools. Andererseits habe ich schon so manches vielversprechendes Tool scheitern sehen, wenn es darum ging, Design- und Entwicklungsprozesse wirklich zu harmonisieren. Doch nach einem Jahr intensiver Nutzung hat sich Dev Mode als echte Transformation für unser Team erwiesen.
Das Highlight ist Code Connect, das unseren Designsystem-Workflow deutlich verbessert hat. Durch die direkte Verknüpfung von Figma-Komponenten mit unserem tatsächlichen Komponentencode werden hartnäckige Herausforderungen bei der Angleichung von Eigenschaften, Namenskonventionen und Zustandsmanagement zwischen Design und Entwicklung gelöst. Das ist besonders wertvoll, wenn es um komplexe Komponenten geht, die im Code anders strukturiert sind als im Design. Hier sind die wichtigsten Ratschläge, die ich weitergeben möchte:
Design-Tokens sind die kleinen, wiederholbaren Entscheidungen, die deine visuelle Sprache definieren. Diese Tokens richtig im Design-Tool darzustellen, war ein echter Erfolg bei der Übergabe an unsere Entwickler
1. Klein anfangen, groß denken
Entwickler*innen haben ihre bewährte Arbeitsabläufe und die Einführung eines neuen Tools kann diese stören. Verständlicherweise waren einige Teammitglieder zunächst zögerlich, Dev Mode auszuprobieren. Statt unsere gesamten Workflows umzukrempeln, haben wir klein angefangen und uns darauf konzentriert, schnelle Erfolge mit Design-Tokens durch Figma Variables zu erzielen.
Tipp: Nutze das Variable Aliasing von Figma, um eine klare Hierarchie in deinen Design-Tokens zu schaffen. Dieser Ansatz erleichtert die Umsetzung der Thematisierung durch semantische Strukturierung und macht es für die Teammitglieder einfacher, das Framework des Systems zu verstehen und anzuwenden.
Die Möglichkeit, Variablen zu scannen, ermöglicht eine präzise Steuerung und verhindert Fehlanwendungen wie die Verwendung von Hintergrundfarben für Text oder Abstandswerte für Randradien. Wir haben die Code-Syntax so angepasst, dass die Variablennamen plattformübergreifend mit unseren Entwicklerkonventionen übereinstimmen. Wenn wir ein Farb-Token aktualisieren, können unsere Entwickler*innen die entsprechenden Code-Änderungen sofort sehen.
2. Erweiterte Inspektionsmöglichkeiten nutzen
Flexbox ist ein CSS-Layoutmodell, mit dem du flexible und responsive eindimensionale Layouts für Webseiten erstellen kannst. Es ermöglicht eine einfache Ausrichtung und Verteilung des Platzes zwischen den Elementen innerhalb eines Containers, auch wenn ihre Größe unbekannt oder dynamisch ist.
Die Inspektionsfunktionen von Dev Mode haben unseren Workflow erheblich verbessert, da sie komplexe Layouts – einschließlich Flexbox – effizient handhaben und Code generieren, der sowohl elegant als auch leicht umzusetzen ist.
Diese Funktionen ermöglichen es unserem Designsystem-Team, UI-Komponenten im Detail zu untersuchen und Eigenschaften wie CSS, iOS (SwiftUI, UIKit) oder Android (XML, Compose) Styles direkt in der Entwicklungsumgebung zu überprüfen. So können Designer*innen sicherstellen, dass Komponenten genau nach den Spezifikationen umgesetzt werden. Mit der Figma-Erweiterung für VSCode können wir mithilfe der Autovervollständigung schnell durch CSS-, Compose- oder SwiftUI-Implementierungen navigieren.
3. Ein gemeinsame Definition von „Fertig“ schaffen
Die Pflege einer aktuellen Dokumentation des Designsystems war schon immer schwierig und fühlt sich oft wie ein Vollzeitjob an. In meiner Erfahrung gehen Design-Intentionen und spezifische Anforderungen oft in der Kommunikation zwischen Designer*innen und Entwickler*innen verloren. Die Dokumentations- und Annotationsfunktionen von Dev Mode haben die Art und Weise, wie wir Informationen pflegen und teilen, grundlegend verändert.
Mit Annotationen können Designer*innen Designeigenschaften und andere wichtige Informationen direkt in der Datei definieren. Sie können freien Text mit definierten Werten wie Ausrichtung oder Größe mischen und schnell Maße hinzufügen, um Entwickler*innen zu helfen, Abstände und Größen zu visualisieren. Bei der Zusammenarbeit mit den Entwickler*innen können die Designer*innen zur Verdeutlichung direkt auf die Anmerkungen verweisen.
Wir haben ein System eingeführt, bei dem jede Komponente umfassend dokumentiert ist: Links zum GitHub-Quellcode, README-Dateien und zugehörige Playgrounds sind direkt verfügbar. Dieser Ansatz stellt sicher, dass jedes Teammitglied jederzeit auf die aktuellsten Informationen zugreifen kann und reduziert die Zeit für die Suche nach relevanten Ressourcen erheblich. Unsere neue Regel lautet: Wenn es nicht in Figma verlinkt ist, existiert es nicht.
In diesem Artikel von Wart Burggraaf, UX-Designberater und -Gründer, erfährst du mehr darüber, wie du die „Definition von fertig“ für dein Team festlegst und Beiträge zum Designsystem verwaltest.
Um mit Code Connect loszulegen, besuche unser GitHub-Repositorium, wo du Anweisungen zur Installation und Konfiguration des NPM-Pakets findest, und sieh dir unsere Dokumentation für weitere Informationen an.
Code Connect hat sich dabei als besonders wirkungsvoll erwiesen. Durch die Zuordnung unseres tatsächlichen Komponenten-Codes zu Figma-Komponenten haben wir einen deutlichen Anstieg der Akzeptanz unseres Designsystems in unseren Produktteams verzeichnet. Ich empfehle, dies in die „Definition von fertig“ für jede Komponente aufzunehmen, sodass die richtige Code-Dokumentation direkt mit den Designs verknüpft ist.
4. Funktionalität mit Plugins erweitern
Obwohl Dev Mode von Haus aus leistungsstark ist, ermöglichen Plugins eine noch bessere Anpassung auf unsere spezifischen Bedürfnisse. Hier sind einige Plugins, die unsere Arbeit erheblich verbessert haben:
- GitHub- und Jira-Integrationen: Damit können wir Probleme und Pull-Requests direkt mit Komponenten verknüpfen und so das Tracking und die Genauigkeit bei der Umsetzung verbessern.
- Figma für VS Code: Diese Erweiterung erlaubt es unseren Entwickler*innen, Figma-Designs direkt in Visual Studio Code zu betrachten und zu inspizieren.
Traut euch auch ruhig, eigene Lösungen zu entwickeln. Ich habe das Variables Converter Plugin erstellt, um Figma-Variablen in verschiedene Code-Formate zu übersetzen. Dieses Plugin wird inzwischen von über 5.000 Figma-Nutzer*innen verwendet.
Das Variables Converter Plugin vereinfacht die Umwandlung von Figma-Variablen in CSS Custom Properties, JavaScript-Variablen, Compose-Variablen und SwiftUI-Variablen.
Schau dir diese Demo von Romain Dao (Senior Product Designer und Gründer von The Cacatorès Theory) und Laurent Thiebault (Engineering Manager und Designsystem Lead bei Decathlon) an, um mehr über die Bedeutung von Dev Mode für die Zusammenarbeit zwischen Designern und Entwicklern zu erfahren. [nur auf Französisch]
Für noch fortgeschrittenere Anpassungen kann ich die Figma REST API empfehlen. Sie bietet umfangreiche Möglichkeiten zur Automatisierung und Integration, besonders mit den neuen Variablen-bezogenen APIs. Das Figma variables GitHub Action Example Repository zeigt, wie man ein bidirektionales Syncing zwischen Figma-Variablen und Design-Tokens einrichtet und verdeutlicht die Stärke und Flexibilität der API.
5. Mit dem Component Playground experimentieren
Eine multivariate Chip-Komponente ist wie ein vielseitiger Baustein in Designsystemen, der sich an verschiedene Zwecke anpassen lässt, vom Filtern von Inhalten bis hin zum Markieren von Objekten, und dabei ein einheitliches Erscheinungsbild beibehält.
Der Komponenten-Playground in Dev Mode ist ein ausgezeichnetes Tool für Experimente. Er kann im Inspektionspanel aufgerufen werden, wenn eine Komponente oder Instanz ausgewählt ist. Bei der Einführung einer neuen Multi-Variant-Chip-Komponente konnten wir im Playground verschiedene Konfigurationen testen und Randfälle identifizieren, die im ursprünglichen Design nicht berücksichtigt wurden.
Code Connect integriert sich nahtlos in den Komponenten-Playground und aktualisiert sich live, wenn Parameter angepasst werden. In unserem Fall führt eine einzige Chip-Komponente im Design zu drei unterschiedlichen Komponenten in der Webentwicklung. Diese Integration ermöglicht es uns, in Echtzeit Code-Updates zu sehen, wenn Eigenschaften verändert werden.
6. Versionskontrolle und visuelle Vergleiche nutzen
Die Funktion zum Vergleichen von Änderungen war für unser Designsystem-Team super hilfreich. Wir können Änderungen an Komponenten im Laufe der Zeit einfach nachverfolgen, verschiedene Versionen nebeneinander vergleichen und bei Bedarf zu vorherigen Iterationen zurückkehren. Diese Fähigkeit gibt uns die Sicherheit, unser Designsystem schneller zu iterieren und unterstützt das Branching, indem es Teams ermöglicht, parallel an Updates zu arbeiten, ohne das Hauptsystem zu stören.
Im Rahmen der Aktualisierung unserer Button-Komponente zur Verbesserung der Barrierefreiheit haben wir die visuelle Vergleichsfunktion genutzt, um die Änderungen unserer gesamten Produktorganisation klar zu kommunizieren. Diese Transparenz hat den Übergang erleichtert und die Akzeptanz für das Update erhöht.
7. Mit der Fokusansicht die Details prüfen
Die Fokusansicht im Dev Mode ist ein weiteres starkes Feature, das wir in unserem Workflow verwenden. Die Fokusansicht ist darauf ausgelegt, spezifische Designs, die für die Entwicklung bereit sind, in den Vordergrund zu rücken. Mit dieser Ansicht können wir auf alle Dev Mode-Tools zugreifen – wie zum Beispiel die Tabs „Inspect“ und „Plugins“ – während wir eine klare, isolierte Ansicht des Designs haben. Das ist besonders nützlich, um einzelne Ebenen zu untersuchen, den Versionsverlauf spezifisch für das Design zu verfolgen und sicherzustellen, dass alle notwendigen Änderungen vorgenommen wurden, bevor ein Design als fertig markiert wird.
Dieses Feature war besonders bei der Fertigstellung unseres Button-Komponenten-Updates hilfreich. Mit der Fokusansicht konnten wir das Design kleinteilig prüfen und so sicherzustellen, dass kein Detail übersehen wurde. Außerdem hat das die reibungslose Kommunikation mit den Entwickler*innen gefördert.
8. Eine Kultur der Zusammenarbeit fördern
Um das Potenzial von Dev Mode voll auszuschöpfen, haben wir kollaborative Sessions eingeführt, bei denen Designer*innen und Entwickler*innen in jeder Phase des Projekts zusammenkommen. Wir beginnen jedes Projekt mit kollaborativen FigJam-Sessions, in denen Teams frei die Eigenschaften, Varianten und Verhaltensweisen von Komponenten entwerfen und verfeinern können. Sobald die Ideen Form annehmen, wechseln wir nahtlos zu Dev Mode, nutzen diesen gemeinsamen Raum, um Fortschritte zu visualisieren, Erwartungen abzugleichen und Meilensteine zu feiern. Dieser fließende Übergang zwischen Ideenfindung und Entwicklung baut nicht nur Silos ab, sondern stellt auch sicher, dass das Fachwissen jedes Teammitglieds während des gesamten Prozesses zum Tragen kommt.
9. Ein iteratives Mindset behalten
Wir sehen Dev Mode als dynamischen Bestandteil unseres Designprozesses, der regelmäßige Iteration und Verbesserung erfordert. Während sich unser Designsystem weiterentwickelt, entwickelt sich auch unser Ansatz zur Nutzung von Dev Mode.
Regelmäßiges Feedback sammeln wir durch Methoden wie vierteljährliche System Usability Scale (SUS) Umfragen. Diese Bewertungen können wertvolle Einblicke geben, wie Designer*innen und Entwickler*innen mit Bibliotheken interagieren. Und sie helfen dabei, Bereiche der Exzellenz und Möglichkeiten zur Verbesserung zu identifizieren. Nutzt diese Erkenntnisse, um eure nächste Iteration anzutreiben und einen kontinuierlichen Verbesserungszyklus zu schaffen.
10. Neugierig bleiben und kontinuierlich lernen
Wir testen ständig neue Funktionen und Updates in Dev Mode. Auf dem Laufenden zu bleiben hilft uns, unsere Prozesse kontinuierlich zu verbessern. Wir widmen Zeit für Schulungen und persönliche Weiterentwicklung und integrieren diese Elemente in unsere regelmäßigen Routinen.
Ich kann dir nur empfehlen, alle Ressourcen zu nutzen, die Figma bietet – einschließlich Dokumentation, Webinare und das Community-Forum. Indem wir uns dem kontinuierlichen Lernen verschreiben und unseren Fortschritt mit wichtigen Leistungsindikatoren verfolgen, verbessern wir ständig unsere Fähigkeiten und passen uns an neue Tools und Techniken an.
Rückblick auf ein Jahr mit Dev Mode
Nach einem Jahr Arbeit mit Dev Mode ist klar, dass dieses Tool unseren Designsystem-Workflow erheblich verbessert hat. Obwohl es weiterhin Herausforderungen gibt, insbesondere bei der Handhabung komplexer Komponenten, hat Dev Mode eine wichtige Brücke zwischen Design und Entwicklung geschlagen. Das hat unsere Teams näher zusammengebracht und zu kohärenteren und hochwertigeren Benutzererlebnissen geführt.
Für Teams, die mit der Einführung eines Designsystems und der Zusammenarbeit zwischen Designer*innen und Entwickler*innen kämpfen, empfehle ich das Ausprobieren von Dev Mode. Fangt klein an, seid auf einige anfängliche Herausforderungen vorbereitet und passt das Tool an eure Bedürfnisse an. Die potenziellen Vorteile in Bezug auf Konsistenz, Effizienz und Zusammenarbeit sind enorm. Mit Blick in die Zukunft bin ich gespannt, wie Dev Mode unsere Arbeit mit Designsystemen weiter prägen wird.