Das ist neu im Dev Mode: Anmerkungen, Änderungen vergleichen, Plugins und mehr

Seitdem wir uns gefragt haben „Wie kann ein Design-Tool Entwickler*innen besser in ihrem Arbeitsalltag unterstützen?“, haben wir viel Feedback aus unserer wachsenden Community von Dev Mode Nutzer*innen sammeln können – dazu, was sich Front-End- und Design-System-Entwickler*innen wirklich von Figma wünschen. Seit dem Start der kostenlosen Beta-Version im Juni letzten Jahres wurden mehr als zwei Millionen Dateien als „Ready for Dev“ markiert und wir haben mehr als 200 neue Funktionen und Fixes als Reaktion auf das Feedback der Nutzer*innen ausgerollt. Zum Ende der Beta-Phase nächste Woche liefern wir nochmal eine Reihe von Verbesserungen und Funktionen, mit denen du schneller arbeiten, die Übergabe verbessern und Workflows individualisieren kannst.

Zeit sparen mit nativen Anmerkungen im Dev Mode

Fortlaufende Produktentwicklung setzt eine durchgehend klare und effektive Kommunikation voraus. Entwickler*innen müssen Veränderungen in Designs präzise nachvollziehen können, um zuverlässig zu arbeiten – und nicht nur zu wissen, dass ihr Design-Kollege ein Design als „bereit für die Entwicklung“ markiert hat. Wir wissen, dass Designer*innen aktuell viel Zeit in die manuelle Erstellung von Redlines investieren. Um diesen Prozess zu vereinfachen, führen wir ein intuitives Tool für Anmerkungen ein. Dieses Tool ermöglicht es Designer*innen, wichtige zusätzliche Informationen, Spezifikationen und Maße direkt im Design zu hinterlassen. Entwickler*innen können diese Anmerkungen während ihrer Arbeit einsehen, um bei der Übergabe keine wesentlichen Details zu übersehen.

Schnell Maße anlegen

Mit dem Vermessungstool können Designer*innen ganz einfach Messungen vornehmen und neu positionieren. Diese Messungen lassen sich als Anmerkungen pinnen, was das Redlining deutlich beschleunigt.

Änderungen nur einmal vornehmen

Anmerkungen sind direkt mit einer Ebene auf der Arbeitsfläche verknüpft. Ändert ein*e Designer*in eine Eigenschaft oder eine Abmessung, die zuvor gepinnt wurde, wird die zugehörige Anmerkung automatisch und live aktualisiert.

Fokus auf die richtigen Details

Anmerkungen von Designer*innen werden je nach Zoomstufe ein- oder ausgeblendet. So bleiben sie für Entwickler*innen gut sichtbar, ohne zu stören.

Anmerkungen mit Plugins automatisieren und anpassen

Wir haben unsere Plugin-API um Anmerkungen erweitert. Teams können nun benutzerdefinierte Dev Mode-Plugins entwickeln, um Anmerkungen gesammelt zu erstellen und zu verwalten.

Zusammen mit den Anmerkungen führen wir ein neues Modal ein, mit dem du Änderungen vergleichen kannst. So siehst du Unterschiede nicht nur visuell, sondern kannst sie auch im Code erkennen – selbst bei getrennten Komponenten. Um die Übergabe noch weiter zu vereinfachen, bündeln wir zahlreiche Tools, die Teams bereits in ihren individuellen Workflows einsetzen. Mit der Figma für Jira App kannst du Design-Dateien direkt zu Jira-Tickets hinzufügen und wirst in Jira benachrichtigt, wenn sich die Designs ändern.

Anpassen des Codes mit Plugins im Dev Mode

Wenn es um Code geht, ist kein Unternehmen wie das andere. Manche Unternehmen setzen zum Beispiel stärker auf Codegen, andere Teams arbeiten mit Frameworks wie Tailwind oder Bootstrap und wieder andere halten sich an ein Design-System, bei dem der Code bereits auf Komponentenebene geschrieben wird. Um diesen vielfältigen Anforderungen gerecht zu werden, kannst du eine Auswahl an Codegen-Plugins verwenden. Diese ermöglichen es dir, Code in dem von dir bevorzugten Framework – wie React, Tailwind und weitere – zu generieren. Du hast auch die Möglichkeit, eigene Plugins zu erstellen, um sicherzustellen, dass der im Dev Mode dargestellte Code perfekt zu deinem Design-System und deinem Arbeitsstil passt. Praktischerweise kannst du diese Plugins oben im Kontrollfeld anpinnen und so einstellen, dass sie automatisch im Dev Mode aktiviert werden. So hast du sie immer schnell zur Hand, wenn du sie benötigst.

Bei Razorpay haben Entwickler*innen RazorSharp entwickelt, ein eigenes Dev Mode Plugin, das automatisch entsprechenden Code für Designs generiert. Die ganze Geschichte findest du hier.

Wir sind uns bewusst, dass Teams laufend mit dem Design-System ihrer Organisation Schritt halten müssen. Daher reicht es oft nicht aus, nur Code für ein Design zu generieren. Vielleicht möchtest du überprüfen, ob ein Design das Design-System korrekt nutzt, Links zur Dokumentation des Systems anzeigen, Informationen über die internen APIs bereitstellen oder sicherstellen, dass ein Design bereits vorhandene Komponenten in deiner Codebasis verwendet. Wir haben festgestellt, dass viele Teams benutzerdefinierte Plugins entwickelt haben, um die Integration und Akzeptanz des Design-Systems sowohl in Figma als auch im Code zu verbessern. Nun ermöglichen wir Enterprise-Administrator*innen, solche Plugins zu fixieren und so einzustellen, dass sie standardmäßig im Dev Mode für alle Dateien ihres Teams aktiv sind.

Workflows optimieren mit der Figma for VS Code-Erweiterung

Der ständige Wechsel zwischen verschiedenen Tools kann Teams ausbremsen und für unnötige Reibung sorgen. Unsere Erweiterung für VS Code bietet hier eine Lösung: Sie ermöglicht Entwickler*innen, direkt in VS Code auf Designs zuzugreifen und diese zu überprüfen. Die Flexibilität von Dateien mit mehreren Seiten, jede mit ihrer eigenen unendlichen Arbeitsfläche, ist perfekt für Designer*innen. Für Entwickler*innen jedoch kann es schwierig sein, sich zurechtzufinden. Deshalb haben wir Figma für VS Code mit einer übersichtlichen, strukturierten Ansicht neu gestaltet, um das Navigieren und Auffinden von Design-Dateien zu erleichtern. Anstatt auf einer großen Arbeitsfläche zu navigieren, kannst du jetzt einfach aus einem Raster von Frames wählen und diese in einer Fokusansicht einzeln betrachten.

Wir haben außerdem die Möglichkeit eingeführt, Plugins in VS Code auszuführen, sodass du Tools und Codegen von Drittanbietern nutzen kannst, die für VS Code aktualisiert wurden, ohne deinen Code-Editor zu verlassen. In unseren Docs erfährst du, wie du dein eigenes Plugin in VS Code implementierst.

Was das für dich bedeutet

Ab dem 31. Januar benötigen Nutzer einen kostenpflichtigen Zugang, um auf Dev Mode mit Funktionen wie Anmerkungen, Vergleich von Änderungen, anpassbare Code-Snippets, Dev Mode Plugins und Entwicklerressourcen zuzugreifen. Wenn du einen uneingeschränkten Design-Zugang in den Abos Professional, Organization oder Enterprise hast, kannst du alle Funktionen des Dev Mode ohne Unterbrechung weiter nutzen. Wie bereits auf der Config 2023 angekündigt, bieten wir zusätzlich die Möglichkeit, spezielle Lizenzen für Dev Mode zu erwerben: für 25€ pro Lizenz und Monat im Organization-Abo und für 35€ pro Lizenz und Monat im Enterprise-Abo. Detaillierte Informationen zu Preisen und Lizenzen findest du hier.

Nutzer*innen von Dev Mode im Organization- und Enterprise-Abo können eine Dev Mode-Lizenz anfordern, die Administrator*innen im Admin-Panel prüfen und genehmigen können. Während du auf die Genehmigung wartest, kannst du Dev Mode noch 14 Tage lang kostenlos nutzen. Sollte dein Upgrade-Antrag nicht bestätigt werden, kannst du weiterhin Design-Modus Eigenschaften und Maße einsehen, Code kopieren und Assets exportieren. Dieses 14-Tage-Fenster bietet Entwickler*innen die Flexibilität, Dev Mode ohne Unterbrechung zu nutzen, während Administrator*innen ausreichend Zeit haben, den Einsatz und Zugang von Dev Mode zu organisieren.

Unser Ziel ist es, die Arbeitsabläufe von Entwickler*innen zu optimieren und die Zusammenarbeit zwischen Designer*innen und Entwickler*innen in Figma zu verbessern. Mit den Updates, die am 31. Januar live gehen, und eurem Feedback, werden wir kontinuierlich Weiterentwicklungen vornehmen. Sei bei unserem nächsten Livestream dabei, um mehr über diese Änderungen zu erfahren und direkt von dem Team zu hören, das dahintersteckt.