Mit Dev Mode in Figma hast du alles, was du brauchst, um in Design-Dateien zu navigieren und Desgins in Programmcode zu verwandeln. Designer*innen und Entwickler*innen bleiben mit Dev Mode auf demselben Stand, damit keine wichtigen Informationen bei Übergaben verloren gehen.

Dev Mode-Kernfunktionen für Entwickler*innen sind Folgende:

• Zugriff auf umfassende Prüfungsmöglichkeiten und mehr Codegen-Sprachen
• Gewissheit garantiert mit den neuesten Spezifikationen zu programmieren, da sich Rahmen-Versionen ganz einfach vergleichen lassen
• Designs, die für die Entwicklung bereit sind, schnell mit Status und Anmerkungen prüfen
• Workflows mit den auf Entwickler*innen ausgerichteten Integrationen wie JIRA, Storybook und GitHub optimieren
• In einer Komponentengruppe alle Varianten ansehen, ohne die Datei zu bearbeiten
• Designs mit Tickets, Dokumentationen und Code-Komponenten verknüpfen
• Designs prüfen und parallel am Programmcode schreiben mit der Erweiterung Figma for VS Code.

Dev Mode aufrufen

Dev Mode ist eine entwicklerorientierte Schnittstelle zum Untersuchen und Navigieren von Designs. Du kannst in jeder Figma Design-Datei auf den Dev Mode zugreifen. So wechselst du zwischen dem Design-Modus und dem Dev Mode:

1. Öffne eine Figma-Design-Datei.
2. Klicke auf die Dev Mode-Schaltfläche oder verwende die Tastenkombination Shift D.

Navigieren

In Dev Mode bietet die rechte Seitenleiste eine einfache Möglichkeit, sich zwischen Designs zu bewegen, die als entwicklungsfertig markiert wurden.

• A

  Sieh dir an, welche Objekte zum Entwickeln bereit sind

  Das Dev Mode-Symbol zeigt, welche Seiten Rahmen, Komponenten, Instanzen und Bereiche enthalten, die als entwicklungsfertig markiert wurden. Objekte, die als entwicklungsfertig markiert wurden, erscheinen im Ebenen-Tab in Dev Mode unter Ready for developement.

  So markierst du ein Objekt als entwicklungsfertig:

  1. Wähle in Dev Mode einen Rahmen, eine Komponente, eine Instanz oder einen Bereich aus.
  2. Klicke in der Toolbar auf Mark as ready for dev (Als entwicklungsfertig markieren).

  Wenn du eine unbeschränkte, eine Dev Mode- oder eine Betrachter*innen-Lizenz in einem Unternehmen oder einer Organisation hast, bietet Dev Mode außerdem eine Ansicht der Designs, die als entwicklungsfertig markiert wurden. Die Ansicht „entwicklungsfertig“ ist nur zu sehen, wenn eines oder mehrere Designs in der Datei diesen Status haben.

• B

  Wissen, wann ein Rahmen zuletzt bearbeitet wurde

  Unter dem Namen des Rahmens im Navigations-Panel kannst du sehen, wann ein Rahmen zuletzt bearbeitet wurde.

• C

  Navigation in Rahmen und Ebenen

  Im Design Mode kann jede*r verwandte Inhalte in Bereiche gruppieren und Bereiche als entwicklungsfertig markieren. Dev Mode priorisiert Inhalte in einem Bereich. Inhalte außerhalb eines Bereichs sind in der linken Seitenliste sichtbar, aber standardmäßig ausgeblendet.

  Klicke auf einen Rahmen in der linken Seitenleiste, um ihn auf der Arbeitsfläche zu zentrieren. Wähle den Rahmen auf der Arbeitsfläche aus, um die darin eingebetteten Ebenen zu sehen. Durch die Auswahl eines Rahmens wird das Navigations-Panel zu einem Ebenen-Tab und zeigt nur die Ebenen für den aktuell ausgewählten Rahmen der obersten Ebene an.

  Navigation in Rahmen und Ebenen im Dev Mode

Prüfen

Das Inspektionspanel zeigt Informationen zum Design und relevante Informationen zu den Komponenten an, die erforderlich sind, um das Design zu verstehen und in Code umzuwandeln.

• A

  Design-Änderungen vergleichen

  Wenn an einer Datei Änderungen vorgenommen wurden, seit du sie zuletzt angesehen hast, erscheint neben den Ebeneninformationen im Prüfungspanel Änderungen vergleichen. Klicke auf den Link, um die Rahmenverlaufsansicht zu öffnen. Dort kannst du die aktuelle Version des Designs mit früheren Versionen vergleichen.

  Du kannst auch abgelöste Komponenten mit früheren Versionen vergleichen sowie mit der Hauptkomponente, mit der sie zuvor veknüpft war. Du kannst den Ablöseverlauf löschen, wenn du keine Informationen zur ursprünglichen Hauptkomponente mehr sehen möchtest.

  In Dev Mode Änderungen vergleichen ->
• B

  Externe Links und Ressourcen für die Entwicklung hinzufügen

  Sowohl Designer*innen als auch Entwickler*innen können Links zu externen Ressourcen hinzufügen, die bei der Implementierung einer Komponente helfen können. Dies kann Links zu GitHub, Jira und Storybook sowie VS Code-Links umfassen, die mit der Erweiterung Figma for VS Code verwendet werden können. Entwickler-Ressourcen werden allen Instanzen der entsprechenden Komponente hinzugefügt.

  Links zu Ressourcen im Dev Mode zu Ebenen hinzufügen →

C

Schnelleres Erstellen mit anpassbaren Codeschnipseln

• D

  Namen und Typen von Ebenen anzeigen

  Der Name der ausgewählten Ebene wird oben auf dem Prüfungspanel angezeigt, zusammen mit dem Typ der Ebene (Komponente, Instanz, Rahmen, Text usw.). Hier kannst du auch sehen, wann die Ebene aktualisiert wurde.

• E

  Komponentenvariationen in der Komponenten-Testumgebung ausprobieren

  Wenn du eine Komponente oder eine Instanz auswählst, erhältst du eine Komponentenvorschau, einen Link zur Hauptkomponente sowie alle Links zur relevanten Dokumentation und zu relevanten Entwickler-Ressourcen.

  Die Testumgebung für Komponenten erscheint im Inpektionspanel, wenn eine Komponenteninstanz ausgewählt wird. Die Testumgebungsdatei kannst du verwenden, um mit den verschiedenen Eigenschaften der Komponente zu experimentieren, ohne dass das aktuelle Design verändert wird.

• F

  Angewandte Stile anzeigen

  Lassen Sie sich die Stile und Variablen anzeigen, die auf die ausgewählte Ebene angewendet wurden. Zusätzlich können Sie den Lesezugriff auf Details zu Variablen und den Lesezugriff auf vorgeschlagene Variablen einsehen.

• G

  Assets öffnen

  Im Dev Mode kannst du Symbole automatisch identifizieren und sie als herunterladbare Assets für Entwickler*innen darstellen. Wenn du eine einzelne Vektorebene eines Symbols prüfen möchtest, kannst du das automatische Identifizieren von Symbolen deaktivieren:

  1. Klicke in der Symbolleiste auf Main menu (Hauptmenü).
  2. Bewege den Mauszeiger über View (Ansicht) im Drop-down-Menü.
  3. Hebe die Auswahl für Automatically detect icons (Symbole automatisch identifizieren) auf.

  Mit Assets kannst du GIF-Bilder und MP4-Videos herunterladen.

• H

  Export

  Du kannst die Export-Einstellungen auf Ebenen anwenden, um das Format und andere Export-Einstellungen zu definieren. Figma unterstützt die folgenden Export-Formate: PNG, JPG, SVG und PDF.Weitere Informationen zu Exporte in Figma→

Anmerkungen hinzufügen

Designer*innen können durch Anmerkungen Designs mit zusätzlichem Kontext, Spezifikationen und Maßen versehen. So ist es für Entwickler*innen einfacher, während der Übergabe keine wichtigen Informationen zu verpassen. Du kannst Anmerkungen und Maße in Dev Mode nutzen, um:

• Wichtige Eigenschaften hervorzuheben, damit Entwickler*innen sie nicht übersehen
• Entwickler*innen dabei zu helfen, Abstände und Größen zu veranschaulichen
• Durch direkt mit den Designs verbundene Textnotizen zusätzlichen Kontext hinzuzufügen

Hier erfährst du, wie du in Dev Mode Maße hinzufügst und Anmerkungen zu Designs hinzufüst →

Übergabe an Programmierer*innen verwalten

Wenn du entwicklungsfertige Abschnitte, Rahmen und Komponenten hast, kannst du die Ansicht „Entwicklungsfertig“ und die Fokusansicht im Dev Mode nutzen, um den Prozess der Entwicklerübergabe zu erleichtern:

• Die Ready for Dev Ansicht bietet eine einfache Möglichkeit, alle Designs in einer Datei zu erkunden, die als Ready for Dev markiert sind. Sie können alle Ihre Designs filtern und anzeigen, die als Ready for Dev markiert sind. Erfahren Sie mehr über die Ready for Dev Ansicht und den Übergabeprozess →
  

• In der Fokusansicht wird jeweils nur ein Design angezeigt, das bereit für die Entwicklung ist. Sie können all deine gewohnten Dev Mode-Tools verwenden, die Ebenen des Designs erkunden und wichtige Informationen wie einen kommentierten Versionsverlauf finden. Erfahre mehr über die Fokusansicht →
  

Status und Benachrichtigungen im Dev Mode

Status und Benachrichtigungen im Dev Mode helfen bei der Verwaltung der Entwicklerübergabe. Mithilfe von Status lässt sich verfolgen, wann Abschnitte, Rahmen oder Komponenten entwicklungsfertig sind. Benachrichtigungen basieren auf Statusänderungen, sodass Entwickler*innen auf den Stand der Designs reagieren können.

Status

Alle Abos, die den Dev Mode bereitstellen, beinhalten den Status Entwicklungsfertig. Du kannst den Status Entwicklungsfertig für Komponenten, Rahmen und Abschnitte festlegen, um anzuzeigen, dass das Design entwicklungsfertig ist. Der zusätzliche Status, Abgeschlossen ist verfügbar, wenn du über ein Organization- oder Enterprise-Abo verfügst.

Weitere Informationen, beispielsweise zur Verwendung von Status, findest du unter Status und Benachrichtigungen im Dev Mode.

Benachrichtigungen

Wenn du eine Datei im Dev Mode angesehen hast und entweder über eine Full- oder Dev-Lizenz verfügst, wirst du jedes Mal benachrichtigt, wenn ein Design in dieser Datei als entwicklungsbereit markiert wird. Dies umfasst sowohl das erstmalige Markieren eines Designs als „entwicklungsbereit“ als auch den Fall, dass der Status „entwicklungsbereit“ entfernt und dann erneut gesetzt wird.

Weitere Informationen, einschließlich zum Ein- und Ausschalten von Benachrichtigungen im Dev Mode, findest du unter Status und Benachrichtigungen im Dev Mode.

Dev Mode-Plug-ins nutzen

Mit Dev Mode-Plug-ins kannst du Aufgaben automatisieren und andere Tools für Dokumentation und Kommunikation verknüpfen. Beispielsweise:

• Bleibe auf dem Laufenden in Bezug auf die Entwicklungs-Tasks durch Synchronisierung mit Jira über Figma, FigJam und Dev Mode
• Verbinde dein Figma-Designsystem und dein Designsystem im Programmcode mit dem Storybook
• Verknüpfe Designs mit Programmcode, um sie synchron zu halten, indem du Github in Figma integrierst.
• Passe Programmcode-Output individuell an (für Tailwind oder React) oder für deine eigenen Programmcode-Komponenten

Auf dem Plug-ins-Tab in Dev Mode siehst du die kürzlich verwendeten Plug-ins und empfohlene Plug-ins der Figma Community.

So nutzt du Plug-ins in Dateien →

In der Plug-ins für Dev Mode Testumgebungsdatei kannst du praktische Erfahrungen mit Dev Mode-Plug-ins sammeln.

Figma for VS Code

Mit Figma for VS Code kannst du Desgindateien ansehen und zwischen ihnen navigieren, mit Designer*innen zusammenarbeiten, Design-Änderungen nachverfolgen und Designs schneller implementieren, ohne den Texteditor jemals zu verlassen. Indem Kontextwechsel sowie aufwändige Arbeitsschritte, die Designs in Code verwandeln, vermieden werden, kannst du die Entwicklungsproduktivität verbessern.

• Kommentare und Aktivität in Echtzeit sehen und darauf reagieren
• Auf Designs basierende Programmcode-Empfehlungen erhalten
• Code-Dateien mit Design-Komponenten verbinden

Weitere Informationen zur Erweiterung Figma for VS Code →