Dev Mode: Alles, was du wissen musst

Figma war nie als reines Design-Tool gedacht. Denn Design ist weit mehr als eine Rolle, es geht vielmehr um die Entwicklung großartiger Produkte. Deshalb haben wir Figma speziell für das Web konzipiert. Mit nur einem Link können Teams gemeinsam an aktuellen Projekten arbeiten und ihre ersten Entwürfe direkt in der Datei teilen. Dieser Multiplayer-Ansatz fördert Zusammenarbeit und Problemlösung in einem gemeinsamen Raum. Unser Ziel ist es, Design für alle zugänglich zu machen.

Diese Vision bauen wir kontinuierlich aus. Indem wir unseren Nutzer*innen zuhören, können wir genau auf deren Bedürfnisse zugeschnittene Funktionen entwickeln. Wenn wir eine Gelegenheit sehen, neue Tools und Erlebnisse zu schaffen, um ihre Arbeit besser zu machen, dann ergreifen wir diese. Dev Mode ist ein perfektes Beispiel für diese Herangehensweise.

Warum wir Dev Mode entwickelt haben

Entwickler*innen machen mittlerweile ein Drittel unserer wöchentlich aktiven Nutzer*innen aus – obwohl Figma ursprünglich nicht speziell für ihre Arbeitsweisen optimiert war. Denn sie arbeiteten immer mehr mit Designer*innen, Produktmanager*innen und anderen Beteiligten zusammen am Produktentwicklungsprozess. Durch ihr Feedback und ihre Einblicke in die Feinheiten ihrer Arbeitsabläufe, Toolchains und Anforderungen haben sie uns maßgeblich bei unserem Ziel geholfen: Wir wollten in Figma einen Bereich schaffen, der speziell für Entwickler*innen geeignet ist – ob Front-End-Entwickler*innen mit ausgereiften Design-Systemen, Komponenten erstellende Design System Engineers oder für die Zusammenarbeit mit Markendesigner*innen an Content Layouts und Assets. Wir wollen eine Vielzahl von Teams unterstützen – von der Idee bis zum Code.

Wir brauchten ein Team, das Entwicklung genauso lebt wie wir Design. Deswegen haben wir 2021 Visly übernommen, ein Team aus acht Designer*innen und Entwickler*innen, die ein Tool für die Entwicklung von UI-Komponenten in React entwickelt haben. „Mit vielen Entwickler*innen zu sprechen, ist eine Sache, aber eine tiefe Intuition zu entwickeln, ist eine ganz andere“, erklärt Sho Kuwamoto, Vice President of Product bei Figma. „Du musst wirklich in diese Welt eintauchen.“ Das Visly-Team brachte nicht nur jahrelange praktische Erfahrung, sondern auch umfassenden Research zu Entwicklertools mit – genau die „Intuition“, die wir suchten.

Das Visly-Team eröffnete uns sofort neue Perspektiven auf die Arbeitsweisen von Entwickler*innen in verschiedenen Umgebungen und zeigte uns Praxisbeispiele, wie ihr eigenes Team Figma nutzt. Aber vor allem lieferten sie uns wertvolle Erkenntnisse darüber, was Entwickler*innen wirklich von einem Design-Tool erwarten. „Entwickler*innen sollten sich nicht darum kümmern müssen, alle Interaktionen im Design-Modus zu lernen“, sagt Joel Miller, ein Produktdesigner im Visly-Team. „Es geht vielmehr darum, das Figma-Erlebnis auf ihre Bedürfnisse zuzuschneiden.“

Weitere Informationen über unsere Produkt- und Designentscheidungen.

Da das Team die spezifischen Bedürfnisse und Herausforderungen von Entwickler*innen genau kannte, konzentrierte es sich auf eine entscheidende Frage: Wie sollte der Dev Mode aussehen und sich anfühlen? „Wir haben wahrscheinlich anderthalb Jahre mit dieser Frage verbracht“, sagt Visly-Mitbegründer Emil Sjölander. „Wir haben eine Million Iterationen durchlaufen, die sich alle in diesem Spektrum zwischen isolierten und integrierten Dateien bewegten.“

Am Ende entschied sich das Team für einen Modus, der es Entwickler*innen ermöglicht, nahtlos zwischen Design und Entwicklung zu wechseln, ohne dass sie komplett andere Tools oder Dateiformate verwenden müssen. Diese Lösung kombiniert das Beste aus beiden Welten: Sie ist isoliert genug, um den spezifischen Anforderungen der Entwickler*innen gerecht zu werden, aber gleichzeitig als Teil von Figma integriert. So können Entwickler*innen wichtige Verbindungen zu ihren Design-Kolleg*innen aufrechterhalten und effizienter arbeiten.

Im Vortrag von Figma CTO Kris Rasmussen auf der Config 2023 erfährst du mehr über die Idee hinter Dev Mode.

Auf der Config 2023 haben wir eine offene Beta gestartet, um Probleme für Entwickler*innen zu lösen, und das Feedback der Nutzer*innen hat viele unserer Produktentscheidungen beeinflusst. (Emil hatte sogar einen Slackbot, der ihn über eingehende Kundenanfragen informierte.) In den ersten zwei Monaten der Beta-Phase konnten wir mehr als 200 der am meisten geforderten Updates für Dev Mode umsetzen.

Was Dev Mode möglich macht

Auch im Rahmen unseres eigenen Produktentwicklungsprozesses standen wir vor der Aufgabe, die Arbeit mit Figma für Entwickler*innen zu verbessern. Das Ergebnis ist ein speziell gestalteter Arbeitsbereich in Figma, der darauf ausgerichtet ist, Entwickler*innen genau das zu bieten, was sie benötigen – wann sie es benötigen. Dabei nutzen sie ihre gewohnten Tools. Je leichter es für Teams ist, High-Fidelity-Designs zu entwerfen, zu dokumentieren, zu finden und umzusetzen, ohne dabei die Übersicht über die Arbeit und die Zusammenarbeit zu verlieren, desto besser sind die Ergebnisse des fertigen Produkts.

Hier erfährst du mehr über Dev Mode und wie er entstanden ist.

Kommunikation von Designabsichten

Bisher mussten Designer*innen Maße und Beschriftungen manuell erstellen und ihre Designs sorgfältig strukturieren, um Entwickler*innen den nötigen Kontext für eine korrekte Umsetzung zu geben. Im Dev Mode führen wir deshalb Anmerkungen ein, um diesen Prozess zu vereinfachen. Diese Anmerkungen werden live aktualisiert, wenn sich ein Design ändert, sodass Designer*innen zusätzliche Kontexte, Spezifikationen und Maße direkt mit dem Design verknüpfen können. Entwickler*innen können diese Notizen während ihrer Arbeit einsehen.

Zeitersparnis durch Anmerkungen (Neu)

• Einfaches Messen durch Klicken und Ziehen
• Immer auf dem neuesten Stand dank Live-Updates
• Wichtige Details hervorheben, ohne den Arbeitsbereich zu überladen
• Anmerkungen mit Plugins automatisieren und individualisieren

Designer*innen können einen Bereich als „ready for development“ (bereit für die Entwicklung) markieren und ihn direkt an das Entwicklerteam senden, ohne eine separate Seite oder Datei erstellen zu müssen. Mit Diff Support kannst du Änderungen zwischen verschiedenen Versionen eines Frames (Rahmens) vergleichen und so immer up to date bleiben.

Vergleich zwischen zwei beliebigen Frames (Neu)

Wir haben das Diffing-Modal überarbeitet. Jetzt kannst du zwischen zwei beliebigen Frames vergleichen, um Unterschiede zwischen verschiedenen Iterationen eines Designs zu sehen. Ebenso kannst du auch zwischen abgetrennten Komponenten oder Überschreibungen der Hauptkomponente vergleichen. Zudem ist das Diffing-Moda jetzt interaktiver und umfasst Code-Diffs, wodurch du die Unterschiede sowohl visuell als auch im Code erkennen kannst.

Schneller arbeiten mit deinen gewohnten Tools

Dev Mode soll deine Produktivität unterstützen, indem er die von dir genutzten Tools und Code-Komponenten mit der Design-Datei verbindet. Einen One-Size-Fits-All-Ansatz gibt es nicht, deswegen lässt Dev Mode sich an eine Vielzahl von Tools, Prozessen und Workflows anpassen. Ob du Design und Code mit Storybook verknüpfen, die Barrierefreiheit mit Stark prüfen oder das Projektmanagement mit Jira, Linear und GitHub optimieren möchtest: Mit Plugins kannst du Figma so erweitern, dass es perfekt auf die Arbeitsweise deines Teams zugeschnitten ist.

Zugriff auf alle erforderlichen Informationen in deinem Code-Editor

Mit unserer Erweiterung kannst du Dev Mode in deinen Code-Editor integrieren. So kannst du Designs reviewen, Benachrichtigungen und Kommentare einsehen und über Änderungen informiert bleiben, ohne deine Programmierumgebung verlassen zu müssen. Die Erweiterung vervollständigt zudem automatisch Code basierend auf dem Design, das du gerade checkst – und du kommst schneller voran.

Verbesserte Navigation in Design-Dateien und Plugin-Ausführung in VS Code (Neu)

Wir haben Figma für VS Code überarbeitet, um die Navigation in Designdateien und deren Auffindbarkeit zu verbessern. Anstelle durch ein großes Canvas zu navigieren, kannst du jetzt einfach aus einem Raster von Frames auswählen und die Frames einzeln in der Fokusansicht betrachten. Zudem haben wir die Möglichkeit eingeführt, Plugins direkt in VS Code auszuführen. So kannst du Drittanbieter-Tools und angepassten Code nutzen, ohne deinen Code-Editor zu verlassen. In unseren Docs findest du Anleitungen, wie du dein eigenes Plugin in VS Code zum Laufen bringst.

Codegenerierung anpassen und die Einführung von Design-Systemen erleichtern

Wir wissen, dass generierter Code nicht immer genau so verwendet werden kann. Er stellt stattdessen einen Ausgangspunkt dar, um nicht bei jedem Projekt von Null anfangen zu müssen. Im Dev Mode siehst du eine vertraute Box-Modell-Visualisierung, eine moderne Syntax mit einer Baumansicht und du kannst zwischen verschiedenen Maßeinheiten (rems und Pixel) umschalten, um sie an deine Codebasis anzupassen. Wenn du schnell einsatzbereiten Code in Sprachen wie HTML & CSS, React oder Tailwind benötigst, können dir Plugins wie Anima oder Figma to Code helfen.

Um mit deinem Design-System Schritt zu halten, musst du Designs mit Code erstellen können, der zu der Komponentenbibliothek deines Systems passt. Du kannst Figma mit selbst entwickelten Codegen-Plugins erweitern und den Code Snippet Editor nutzen, um dynamische Codeschnipsel hinzuzufügen, die deinen Komponentencode widerspiegeln. Oder du kannst Tools zur bidirektionalen Synchronisation von Design-Tokens mit unserer Variables REST API entwickeln.

Plugins anpinnen und für die automatische Ausführung einrichten (neu)

Viele Teams haben benutzerdefinierte Plugins entwickelt, um die Akzeptanz ihres Design-Systems in Figma und im Code zu verbessern. Nun können Enterprise-Administrator*innen Plugins anpinnen und so einrichten, dass sie standardmäßig im Dev Mode für alle Dateien in ihrer Organisation ausgeführt werden.

Hier erfährst du, was als nächstes für Dev Mode geplant ist.

Aufbruch von Silos zwischen Design und Code

Mit dem heutigen Tag, an dem Dev Mode die kostenlose Beta-Phase verlässt, führen wir neue Funktionen ein, die Design und Code noch näher zusammenbringen. Zu den Neuerungen zählen Anmerkungen im Dev Mode, verbesserte Möglichkeiten zum Vergleichen von Änderungen, Plugins und die Figma-Erweiterung für VS Code.

Viele dieser Änderungen machen es einfacher, vom Design zur Entwicklung überzugehen und wir werden weiter an der engen Verknüpfung von Code-Komponenten mit Design-Komponenten arbeiten Unser Ziel ist es, die Übergabe nicht als einen einmaligen Vorgang, sondern als Teil einer kontinuierlichen Kooperation zwischen Designer*innen und Entwickler*innen zu betrachten. Denn wahre Kollaboration bedeutet, gemeinsam Neues zu erschaffen.

Wir freuen uns sehr, diese auf dem Nutzerfeedback basierenden Updates veröffentlichen zu können. Euer Input ist für uns enorm wertvoll und wir werden weiterhin von euch lernen und uns weiterentwickeln. Dev Mode wird kontinuierlich verbessert, um das Entwicklererlebnis zu optimieren und ein schnelleres, noch effizienteres Arbeiten in Figma zu ermöglichen.

Hier kannst du dich für unseren nächsten Livestream registrieren, in dem unser Team alles zu den neuen Features und Verbesserungen erklärt.