Dev Mode
Für Entwickler*innen gemacht – mit Dev Mode kannst du Designs einfach inspizieren und in Code übersetzen, ohne die Design-Datei zu verändern. Dev Mode ist bei der Full- und Dev-Lizenz in allen kostenpflichtigen Abos enthalten.
Im Einsatz bei den Teams von
Finde schneller die Infos, die du fürs Coden brauchst
Mit Funktionen zur Vereinfachung der Code-Inspektion und zur Hervorhebung der entwicklungsfertigen Elemente läuft dein Workflow so reibungslos wie nie.
Vergleiche Designänderungen
Sieh nach, wann ein Frame oder eine Komponente zuletzt bearbeitet wurde, oder öffne den Versionsverlauf, um Designänderungen direkt nebeneinander zu vergleichen.
Designspezifikationen im Detail
Untersuche Eigenschaften wie Farbwerte und Token, überprüfe Abstände oder kopiere Code direkt – für einen schnelleren Dev-Prozess.
Wechsle die Ansicht für mehr Klarheit
Wechsle in die Ansicht Ready for dev, um Designs zu sehen, die zur Umsetzung markiert wurden. Du kannst auch einzelne Komponenten anklicken und sie in der Fokusansicht isoliert betrachten.
Entwickle mit der VS Code-Erweiterung
Arbeite in deiner gewohnten Umgebung mit der VS Code Extension – weniger Hin-und-her, mehr Fokus auf Code.
Der Dev Mode von Figma ermöglicht eine optimierte Zusammenarbeit zwischen Entwickler*innen und Designer*innen – für reibungsloseres Arbeiten, wie wir es lieben.
Sandra Schaus
Lead UX Expert, Business Development Services, Volkswagen Group Services
Verbinde dein Designsystem und deine Codebase für konsistente Ergebnisse
Dev Mode ermöglicht dir, wiederverwendbare Komponenten zu erstellen und mit Code Connect nahtlos mit deinem Code zu verknüpfen.
Verbinde deine Codebase mit Code Connect
Mit Code Connect kannst du per Klick sofort einsatzbereite Code-Snippets generieren, indem du deine Codebase mit deinem bestehenden Designsystem in Figma verknüpfst.
Alle Komponentenoptionen auf einen Blick
Im Component Playground (Komponenten-Testumgebung) siehst du alle verfügbaren Varianten, ihr Verhalten und bekommst direkt den passenden Code dazu. Du musst nur noch die beste Option auswählen.
Zugriff auf systemweite Designvariablen
Bleibe markenkonform und spare Zeit, indem du bestehende Variablen oder Token-Werte mit passender Code-Syntax in Figma nutzt. So bleibt dein Design über alle Anwendungen hinweg stimmig.
An Code Connect schätzen wir besonders, dass es die Kontextwechsel reduziert, die Entwickler*innen zuvor bewältigen mussten.
Gilson Hoffmeister
Design Systems Strategist, HP
Bessere Abstimmung mit Designpartner*innen
Funktionen wie Statusaktualisierungen, Kommentare und Annotationen gewährleisten, dass du während des gesamten Entwicklungsprozesses mit den Designer*innen auf demselben Stand bist.
Weniger doppelte Arbeit dank besserer Kommunikation
Werde in Echtzeit über Design-Änderungen informiert, damit du nie mit einer veralteten Version weiterarbeitest. Die Ready for dev Ansicht bietet eine übersichtliche Zusammenfassung aller entwicklungsfertigen, geänderten und abgeschlossenen Projekte.
Code mit Kontext
Scrolle durch Kommentare und Annotationen von Designer*innen, um genau zu verstehen, was du umsetzen sollst.
Überprüfe deine Maße
Designer*innen können Maße direkt in der Datei hinzufügen. So siehst du Abstände und Größenverhältnisse auf einen Blick und nichts geht bei der Umsetzung verloren.
Weitere Ressourcen für Design & Entwicklung
Alles Wissenwerte zum Dev Mode
Wir haben Dev Mode entwickelt, um die Produktentwicklung vom Konzept bis zum Code effizienter zu gestalten. Erfahre mehr über unsere Produktphilosophie und die nächsten Schritte.
5 Dinge, die Designer*innen für eine reibungslose Übergabe beachten sollten
Die Übergabe ist ein Vorgang, kein einzelner Moment. Wie lässt sich die Übergabe also optimieren, wenn sie eine ganze Reihe von WIP-Designs sowie viel Kommunikation und Kollaboration umfasst? Designer Advocate Lauren Andres hat dazu einige Tipps.
Community-Plugins für Entwickler*innen entdecken
Finde Tausende von Plugins aus der Figma-Community, die deine Arbeit in Figma erweitern.