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 auf das Entwickeln ausgerichtete Schnittstelle, um Designs zu prüfen und darin zu navigieren. Du kannst Dev Mode aus allen Figma-Design-Dateien aufrufen. So wechselst du zwischen Design Mode und Dev Mode:

1. Öffne eine Figma-Design-Datei.
2. Klicke auf die Dev Mode-Schaltfläche oben auf der Seite, oder nutze 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).
• 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

  Klicke auf ein beliebiges Objekt auf der Arbeitsfläche, wenn du dich in Dev Mode befindest, um den Programmier-Bereich im Prüfungspanel zu füllen. Je nach ausgewähltem Element wird eine typographische Vorschau oder ein Box-Modell angezeigt, gefolgt von automatisch erzeugten Programmcodeschnipseln für das Objekt.

  Du kannst die Sprache und Einheiten auswählen, die auf der Arbeitsfläche und im generierten Programmcode angezeigt werden sollen, und die Funktionalität der Codeschnipsel erweitern. So änderst du die Sprache und Einheitenauswahl:

  1. Wähle oben rechts im Abschnitt Code eine Sprache aus dem Dropdown-Menü aus.
  2. Klicke auf Inspect settings (Einstellungen prüfen) und wähle eine Einheit aus dem Dropdown-Menü aus.

  So verwendest du Programmcodeschnipsel in Dev Mode→

• 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

  Lass dir die Stile und Variablen anzeigen, die auf die ausgewählte Ebene angewendet wurden.

• 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.

• E

  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 →

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 →