Bevor du anfängst

Wer diese Funktion verwenden kann

Unterstützt von jedem Team und jedem Abo

Alle Personen mit Lesezugriff können sich Designs in Dev Mode ansehen.

Alle Personen mit Lesezugriff können Entwickler-Ressourcen-Links zu Komponenten hinzufügen.

Alle Personen mit Schreibzugriff können Abschnitte erstellen und als entwicklungsfertig markieren.

 

Dev Mode bietet im Figma-Design alles, was beim Entwickeln zum Navigieren in Design-Dateien und zum Umwandeln von Designs in Code benötigt wird. Mit Dev Mode sind alle Personen im Design- und Entwicklungsprozess immer auf dem gleichen Stand, sodass sichergestellt ist, dass beim Übergabeprozess keine wichtigen Details verlorengehen.

Dev Mode wird verwendet, um:

• Eigenschaften, Werte und Code aus Designkomponenten anzuzeigen und zu kopieren
• durch den Vergleich von Rahmen-Versionen zu sehen, was sich seit deinem letzten Zugriff auf die Datei verändert hat
• Design-Dateien mit einfachen Interaktionen, die wichtige Ebenen-Informationen anzeigen, zu prüfen und darin zu navigieren
• entwicklungsfertige Designs mit dem Status der Bereiche schnell zu finden
• deinen Workflow mit auf Entwicklung ausgerichteten Integrationen wie Jira, Storybook und GitHub zu optimieren
• Relevante Links und Ressourcen zum Entwickeln zu Komponenten hinzuzufügen

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 den Umschalter </> Dev Mode oben auf der Seite oder Verwende das Tastenkürzel ShiftD.

In Designs 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 Bereiche entwicklungsfertig sind

  Das Dev Mode-Symbol gibt an, welche Seiten Bereiche enthalten, die als entwicklungsfertig markiert wurden. Als fertig markierte Bereiche sind im Dev Mode Navigationspanel unter Ready for development (Entwicklungsfertig) einsehbar.

• 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:Designer*innen alle können Inhalte in Bereiche gruppieren und Bereiche als entwicklungsfertig markieren. Dev Mode priorisiert Inhalte, die sich in einem Bereich befinden. Inhalte, die sich nicht in einem Bereich befinden, sind in der linken Seitenleiste noch sichtbar, sind aber standardmäßig minimiert.

  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

Designs 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 seit deinem letzten Zugriff auf eine Datei Änderungen vorgenommen wurden, erscheint im Inspektionspanel die Option Compare changes (Änderungen vergleichen) neben den Informationen zur Ebene. Klicke auf den Link, um den Rahmenversionsverlauf zu öffnen, in dem du die aktuelle Version mit früheren Versionen des Designs vergleichen kannst.

  Du kannst auch abgelöste Komponenten mit Hauptkomponenten vergleichen, oder deren Ablöseverlauf zurücksetzen, um die Anzeige von Informationen der ursprünglichen Komponente zu vermeiden.

  Rahmenänderungen im Dev Mode 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 Code-Bereich im Inspektionspanel zu füllen. Je nach ausgewähltem Element wird eine typographische Vorschau oder ein Box-Modell angezeigt, gefolgt von autogenerierten Codeschnipseln für das Objekt. Du kannst die Sprache und Einheiten auswählen, die auf der Arbeitsfläche und im generierten Code angezeigt werden sollen, und die Funktionalität der Codeschnipsel erweitern.

  Codeschnipsel im 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→

Erweiterungen von Dev Mode verwenden

Dev Mode Plug-ins verbessern die Entwicklung des Workflows durch automatische Tasks, das Hinzufügen neuer Funktionen und die Integration von Tools, die zur Dokumentation und Kommunikation verwendet werden.

• 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 Code-Designsystem mit Storybook
• Verlinke Designs mit Code, sodass sie immer synchronisiert sind, indem du GitHub in Figma integrierst.

Das Plug-ins-Tab in Dev Mode zeigt deine zuletzt verwendeten Plug-ins sowie von der Figma Community empfohlene Plug-ins.

Erfahre, wie du Plug-ins in Dateien verwendest→

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 →