Developer-Export in Figma – Tipps für Hand-Off, Dev Mode und Co.
Von: Jonas Figma vereint Werkzeuge für Design und Development in einer App. Der Schlüssel zu einer erfolgreichen Datenübergabe (Hand-Off) liegt darin, dass sowohl Designer als auch Developer sich mit den jeweiligen Anforderungen und Möglichkeiten des Figma Dev Modes vertraut machen.
Figma ist das zentrale Design-Tool für digitale Produkte wie Websites, Web-Anwendungen, Apps und Shops jeglicher Größenordnung. Zwar richtet sich das Tool in erster Linie an Design-Teams, doch mit mächtigen Funktionen für Kollaboration und dem sogenannten Dev Mode schlägt es die Brücke zwischen Design, Development und Projektmanagement. Figma hat die Entwickler-Zielgruppe klar erkannt und baut den Dev Mode sowie die Funktionen für Developer kontinuierlich aus. Wir geben einen Überblick über die wichtigsten Features für eine erfolgreiche Zusammenarbeit.
Figma-Tipps für die Übergabe an die Entwicklung
Ein großer Vorteil von Design-Tools wie Figma ist die zentrale Arbeits- und Kommunikationsplattform. Bereits während der Konzeptions- und Gestaltungsphase können alle am Projekt beteiligten Personen durch Kommentare, Freigabelinks und Audio-Chats »im Loop« gehalten werden. Im Idealfall stimmen sich Design, Development, Projektleitung, Marketing usw. bezüglich der Anforderungen ab, bevor bzw. während das Design final ausgearbeitet wird.
Fertig gestaltete Bereiche einer Figma-Datei werden als »ready for dev« markiert und an das Development übergeben. Developer betrachten die Datei anschließend im Dev Mode und können dort Grafiken exportieren, Code-Snippets und CSS-Variablen auslesen oder spezifische Plugins für Developer installieren.
Designs müssen sauber vorbereitet werden
Die Qualität im Dev Mode hängt entscheidend von der Qualität des Designs ab. Je sauberer und strukturierter das Design ist und je mehr Funktionen wie Variablen, Auto-Layout usw. genutzt wurden, desto aussagekräftiger wird auch der Code-Export.
Styles oder Variablen einsetzen und sinnvoll benennen
Design-Systematiken (Design Tokens) wie Farben, Schriften, Abstände usw. sollten mit Variablen oder zumindest mit Styles umgesetzt werden. Wenn dies der Fall ist, können die Werte im Dev Mode ausgelesen werden. Dieses Vorgehen sorgt für konsistente Layouts und erleichtert die Umsetzung erheblich.
Im Idealfall gibt es keine Schriften, Farben, Schatten, Linien, Abstände, Ecken-Abrundungen usw., die nicht als Variable definiert wurden.
Komponenten und Varianten benennen und organisieren
Komponenten sollten sinnvoll benannt und deren Eigenschaften (Properties) sorgfältig gepflegt sowie über verschiedene Komponenten hinweg einheitlich benannt werden. Wenn Komponenten in Sections zusammengefasst werden, nutzt Figma den Namen der Section zur Organisation der »Assets«.
Varianten werden häufig dazu genutzt, verschiedene States abzubilden – z.B. Normal und Mouse Over bei einem Button. Es empfiehlt sich, branchenübliche Bezeichnungen zu verwenden bzw. sich mit dem Development abzustimmen. Da in unseren Projekten der Browser die Zielplattform ist, benennen wir alle States so, wie sie auch in CSS definiert sind (:hover, :focus etc.).
Auto-Layout einsetzen, Edge Cases beachten
Die Auto-Layout-Technik von Figma ist vergleichbar mit einer vereinfachten Form von Flexbox in CSS. Wenn in Figma mit Auto-Layout gearbeitet wird, verbessert sich der Code-Export im Dev Mode spürbar.
Dank Auto-Layout wird häufig schon während des Gestaltungsprozesses über Edge Cases wie verschiedene Breiten und variable Inhalte nachgedacht. Die konzeptionelle Qualität des Layouts bzw. einer Komponente steigt dadurch erheblich.
Nicht sichtbare Anforderungen dokumentieren
Designer können in den Dev Mode wechseln und dort das Anmerkungen-Werkzeug verwenden, um nicht sichtbare Anforderungen zu dokumentieren oder auf Besonderheiten hinzuweisen, die ggf. übersehen werden könnten. So kann z.B. der Accessible Name für ein Icon kommuniziert werden.
Ready for Dev einsetzen
Sobald ein Frame oder eine Section fertig ist – also an die Entwicklung übergeben werden kann – sollte sie als »Ready for dev« markiert werden. Über das kleine Icon neben dem Namen des Frames kann die Markierung hinzugefügt werden. Developer sehen dann im Dev Mode auf einen Blick, welche Bereiche umgesetzt werden sollen.
In höheren Lizenzmodellen steht darüber hinaus ein sogenannter Fokus View zur Verfügung, der die fertigen Komponenten der Reihe nach auflistet und dem Dev-Team die Möglichkeit bietet, eine »Completed«-Markierung zu setzen.
Versionierung und Branching-Konzept verwenden
Wenn eine Figma-Datei weiterentwickelt wird, sollten ältere Zwischenschritte mithilfe von gespeicherten Versionen archiviert werden. Dieses Vorgehen verhindert Verwechslungen. Die Chronik eines Dokuments kann über den Pfeil neben dem Dateinamen aufgerufen werden.
In höheren Lizenzmodellen stehen zudem Branches zur Verfügung, mit denen Erweiterungen oder Alternativen parallel zur Hauptdatei gestaltet werden können. Nach einer optionalen Freigabe werden die Änderungen in die Hauptdatei zurückgeführt. Dieses Vorgehen ist im Development tief verankert und vereinfacht das Arbeiten mit größeren Teams an einer Datei.
Developer müssen die Dev Mode-Features kennen
Unserer Erfahrung nach erhalten viele Developer zwar Lizenzen für den Dev Mode, nutzen die Features jedoch nur sehr oberflächlich. Zu einer erfolgreichen Zusammenarbeit gehört es, dass auch Developer sich intensiv mit Figma auseinandersetzen.
Farben, Abstände usw. korrekt auslesen können
Im Dev Mode kann der gesamte Dokumentaufbau analysiert werden. Dazu steht wie im Design Mode die Ebenenpalette zur Verfügung – allerdings sind alle Funktionen zur Bearbeitung deaktiviert.
Sobald ein Bereich auf der Arbeitsfläche angeklickt wird, zeigt Figma in der rechten Seitenleiste Informationen wie Farben, Variablen, CSS-Snippets usw. an. Die Qualität dieser Informationen hängt von der Vorarbeit im Design ab.
Abstände können gemessen werden, indem ein Objekt auf der Arbeitsfläche markiert und ein zweites mit dem Cursor berührt wird.
Den Dev Mode konfigurieren – z.B. CSS-Einheiten
Damit in Code-Snippets und auf der Arbeitsfläche hilfreiche Informationen angezeigt werden, sollte der Dev Mode korrekt eingestellt sein. Es ist z.B. sinnvoll, die CSS-Einheit von px auf rem umzustellen. Die Basis bei rem ist 16 – auch dieser Wert kann angepasst werden.
Grafiken und SVG korrekt exportieren
Grafiken können exportiert werden, indem die Ebene markiert und rechts über die Sidebar exportiert wird. Für den Export können verschiedene Einstellungen je Dateityp gewählt werden. Auch auf der Arbeitsfläche finden sich Export-Features. Ein Rechtsklick auf das Objekt ermöglicht es z.B., den SVG-Code direkt in die Zwischenablage zu kopieren.
Component Playground nutzen
Wenn eine Komponente im Dev Mode angeklickt wird, steht rechts in der Sidebar der sogenannte Playground zur Verfügung. Im Playground kann alles getestet werden, was die Komponente an Eigenschaften hat, ohne dass etwas versehentlich kaputt geht. Alle Eigenschaften müssen im Design Mode vorbereitet worden sein, damit sie im Dev Mode angezeigt werden.
Den Dev Mode mit Plugins individualisieren
Für den Dev Mode existieren zahlreiche Plugins, die Informationen ergänzen, Export-Möglichkeiten erweitern oder Drittanbieter-Tools integrieren.
Sehr hilfreich ist z.B. ein Plugin für den Export der CSS-Variablen oder die Integration von GitHub, Jira, Asana und Co.
Dev Mode + VS Code
Der beliebteste Code-Editor – VS Code – kann mit einem Plugin ausgestattet werden, das Figma in VS Code integriert. Anschließend stehen alle Informationen aus dem Dev Mode direkt in VS Code zur Verfügung, ohne dass zwischen dem Code-Editor und Figma hin- und hergewechselt werden muss.
Über eine Konfigurationsdatei kann zudem festgelegt werden, ob VS Code Eigenschaften im Code entsprechend der Figma-Vorlage vervollständigen soll.
