'%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)
In Dev Mode in Designs navigieren
🚧 Der Dev Mode ist nicht mehr in der Beta-Version
Dev Mode in Figma bietet Entwickler*innen alles Nötige, um Designs in Programmcode zu verwandeln. Seit dem 31. Januar ist für den Zugriff auf Dev Mode eine kostenpflichtige Lizenz erforderlich.
Hier erfährst du, was das Ende der Beta-Phase von Dev Mode bedeutet →
Bevor du anfängst
Wer kann diese Funktion verwenden?
Enthalten in einer unbeschränkten Design-Lizenz bei Professional-, Organization- und Enterprise-Abos.
Alle Personen mit Zugang zu Dev Mode können die Dev Mode-Features nutzen.
Das Aktivieren von Dev Mode ändert die Benutzeroberfläche einer Figma Design-Datei. Im Dev Mode kannst du mit der linken Seitenleiste einfach zwischen Designs navigieren und ermitteln, welche Bereiche zum Entwickeln bereit sind.
-
A
Suchen
Verwende das Feld Suchen, um eine bestimmte Komponente zu finden. Figma sucht nach Objekten in der aktuellen Datei sowie in allen Bibliotheken, auf die du Zugriff hast.
- Klicke in die linke Seitenleiste oder öffne die Suchleiste über die folgende Tastenkombination:
- Mac:Befehlstaste f
- Windows:Strg f
- Gib den Text oder Ebenennamen ein, nach dem du suchst. Die Suchergebnisse werden während der Eingabe automatisch ausgefüllt.
- Du kannst die Ergebnisse fĂĽr deine aktuelle Seite anzeigen lassen oder die Ergebnisse fĂĽr alle Seiten ansehen
- Klicke auf Settings (Einstellungen), um Suchfilter für den jeweiligen Ebenentyp hinzuzufügen – wie Text, Rahmen, Form usw.
- Mit und kannst du durch die Ergebnisse blättern
- Im Menü Settings (Einstellungen) kannst du über Other (Andere) nach anderen Dingen wie den Namen von Widgets oder Slices suchen.
- Klicke auf ein Ergebnis, um zur Ebene auf der Arbeitsfläche zu gehen.
- Durch Klicken auf oder Esc gelangst du zurĂĽck zum Navigationspanel.
- Klicke in die linke Seitenleiste oder öffne die Suchleiste über die folgende Tastenkombination:
-
B
Seiten
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.
-
C
Als entwicklungsfertig markierte Bereiche
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.
-
D
Ebenen
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.
Wenn du den Cursor über die Ebenen auf der Arbeitsfläche bewegst, werden weitere Informationen über ihr Layout wie Größe, Zwischenräume und Objektabstände angezeigt.
Wenn ein top-level frame (Rahmen der obersten Ebene) ausgewählt ist, kannst du mit den linken und rechten Pfeiltasten oder durch Klicken auf die Pfeile auf dem Bildschirm durch die einzelnen Rahmen auf der Seite blättern.