'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Was gibt es Neues beim Dev Mode?
Seit der Ankündigung von Dev Mode auf der Config 2023 haben wir gemeinsam mit unseren Kund*innen daran gearbeitet, ein Tool für eine bessere Übergabe zu entwickeln. Für Dev Mode beginnt nun ein neues Kapitel – der Zugriff ist jetzt nur noch mit einer bezahlten Lizenz möglich. Mit dieser Veränderung haben wir neue Funktionen und Verbesserungen eingeführt, die ein schnelleres Arbeiten, eine bessere Zusammenarbeit und individuelle Workflows ermöglichen.
Wir stellen die neuen Funktionen von Dev Mode vor
Der Dev Mode in Figma bietet Entwickler*innen alles, was sie zum Navigieren in Design-Dateien und zum Umwandeln von Designs in Programmcode brauchen. Mit dem Dev Mode sind Designer*innen und Entwickler*innen auf demselben Stand, sodass bei der Übergabe keine wichtigen Details verloren gehen.
Wir haben außerdem einige neue Dev Mode-Funktionen und -Verbesserungen eingeführt.
- Schnellere Übergabe-Vorbereitung durch Anmerkungen im Dev Mode, die immer mit den Designs auf dem neuesten Stand sind
- Verbesserte Navigation und die Fähigkeit, Plug-ins in Figma for VS Code auszuführen
- Eine neue Ansicht zum Vergleichen von Veränderungen, mit denen du Unterschiede im Programmcode und zwischen zwei Rahmen siehst
- Automatische Plug-ins für dich selbst oder dein gesamtes Unternehmen (nur Enterprise-Abo)
Erfahre mehr über die Inhalte von Dev Mode →
So profitierst auch du von Dev Mode
Die kostenlose Betaversion von Dev Mode endete am 31. Januar. Dev Mode erfordert nun eine bezahlte Lizenz innerhalb eines Teams oder eines Unternehmens. Dein Zugriff auf Dev Mode hängt von deinem Team- oder Unternehmens-Abo und deiner Lizenz ab sowie davon, ob dein Team oder dein Unternehmen die Datei besitzt. Der Zugriff auf Dev Mode, wie auch auf unsere anderen Lizenztypen, wird einem Team oder einem Unternehmen gewährt und nicht einem Konto.
- Starter-Abo: Nicht verfügbar
- Professional-Abo: Verfügbar nur mit einer unbeschränkten Design-Lizenz
- Organisation-Abo: Verfügbar mit einer unbeschränkten Design-Lizenz oder einer eigenständigen Lizenz für 25 $ pro Monat
- Enterprise-Abo: Verfügbar mit einer unbeschränkten Design-Lizenz oder einer eigenständigen Lizenz für 35 $ pro Monat
Nutzer*innen mit Starter-Abo und Betrachter*innen können weiterhin Eigenschaften und Maße einsehen, Programmcode kopieren und Objekte aus dem Design-Modus exportieren.
Hinweis: Wenn du als Freiberufler*in oder für eine Agentur an einer Datei im Team oder dem Unternehmen deines Kunden arbeitest, musst du eine unbeschränkte Design-Lizenz oder eine Dev Mode-Lizenz im Team oder dem Unternehmen deines Kunden beantragen. Weitere Informationen zu unseren Empfehlungen für die Zusammenarbeit mit Kunden in Figma findest du hier →
Upgrade auf eine bezahlte Lizenz
Um Dev Mode mit einem Upgrade auf eine bezahlte Lizenz weiterhin zu nutzen, klicke in deiner Datei in Dev Mode im Banner oben auf Get Dev Mode (Dev Mode erhalten) und folge den Anweisungen, um ein Upgrade für dein Abo zu erhalten oder eine Lizenz zu beantragen.
Hinweis: Alle Upgrades zu Dev Mode mit einem kostenpflichtigen Abo erfordern die Genehmigung durch eine*n Admin. Um unmittelbare Unterbrechungen deines Workflows zu reduzieren, kannst du Dev Mode bis zu 14 Tage lang weiter nutzen, während du auf die Genehmigung wartest.
Erfahre mehr über die Verwaltung von Dev Mode-Lizenzen als Admin →
Die Auswahl der richtigen Lizenz
Wenn du kein Upgrade für Dev Mode wünschst, kannst du trotzdem weiterhin Designs prüfen und mit anderen an Designs zusammenarbeiten. Als Betrachter*in im Design-Modus kannst du Eigenschaftswerte und Rahmendetails prüfen, Objekte exportieren, CSS-, iOS- und Android-Codeschnipsel kopieren sowie Designs mit einer Zusatztaste abgrenzen und vermessen.
Dev Mode
-
A
Umfassende Prüfungsmöglichkeiten und benutzerdefinierte Plug-ins
-
B
Vergleiche Veränderungen zwischen Versionen und verknüpfe Entwickler-Ressourcen für ein verbessertes Handoff
-
C
Zusätzliche Codegen-Sprachen
Lesezugriff im Design-Modus
-
A
Eigenschaftswerte und Rahmendetails prüfen
-
B
Objekte exportieren
-
C
Codegen für CSS, iOS und Android als Programmcode aus dem Kopieren-und-Einfügen-Menü kopieren, indem du mit der rechten Maustaste auf eine Ebene klickst
Hier sind einige weitere wichtige Unterschiede zwischen Dev Mode und dem Status als Betrachter*in in einer Designdatei
|
Deine Möglichkeiten |
In Dev Mode verfügbar | Für Betrachter*innen im Design-Modus verfügbar |
|---|---|---|
|
Abstand und Maße ansehen, |
wenn der Cursor darüber hovert |
indem du die Zusatztaste verwendest |
|
Eigenschaftswerte und Rahmen-Details ansehen |
✓ |
✓ |
|
Objekte exportieren |
✓ |
✓ |
|
Codegen von CSS, iOS und Android ansehen |
✓ |
✓ |
|
✓ |
|
|
|
Anmerkungen verwenden, um Dateien um Informationen und Maße zu ergänzen |
✓ |
|
|
✓ |
|
|
|
✓ |
|
|
|
Auf Entwickler*innen ausgerichtete Integrationen wie Jira, Storybook und GitHub verwenden |
✓ |
|
|
Designsystem-Komponenten in einer Testumgebung ausprobieren |
✓ |
|
|
Designs über Links mit Tickets, Dokumentationen und Komponenten mit Programmcode verknüpfen |
✓ |
|
|
✓ |
|