Dev Mode (Figma) – Handoff an Entwickler mit Maßen, CSS und Export

Dev Mode ist Figmas spezialisierter Arbeitsmodus für Entwickler, der Designspezifikationen, Maßangaben, CSS-Code, Variables-Werte und Export-Assets direkt aus einer Figma-Datei zugänglich macht – ohne Designkenntnisse oder Editierrechte.

Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Developer Handoff, Inspect Mode (Vorgänger), Design Redline, Figma Dev; Tastenkürzel Shift+D (Dev Mode ein-/ausschalten)

Was ist der Dev Mode?

Der Dev Mode wurde 2023 als eigenständiger Modus in Figma eingeführt und löste den vorherigen „Inspect"-Tab als primären Handoff-Kanal ab. Er ist für Entwickler und Entwicklerinnen konzipiert, die Designspezifikationen aus Figma extrahieren müssen, ohne selbst Designer zu sein oder die vollständige Figma-Oberfläche navigieren zu müssen.

Im Dev Mode sehen Entwickler Abmessungen, Abstände, Farben (inkl. Variable-Namen), Typografiedaten, Effekte und können Code-Snippets (CSS, iOS, Android) direkt kopieren. Außerdem können Assets (SVGs, PNGs, PDFs) exportiert werden.

In Figmas Preismodell (ab 2023) ist der Dev Mode für Entwickler in einer separaten „Dev"-Sitzung kostenlos zugänglich, wenn sie einen Einladungs-Link erhalten.

Erklärung

Dev Mode aktivieren

• Tastenkürzel: Shift+D
• Über das Menü: Figma-Logo → Dev Mode aktivieren
• Oder: Oben rechts im Interface auf das Code-Symbol klicken

Im Dev Mode ändert sich die Oberfläche: Die Canvas ist nicht mehr editierbar, das rechte Panel zeigt Entwickler-spezifische Informationen, und eine neue Toolbar erscheint.

Inspect-Panel

Das Inspect-Panel ist das Herzstück des Dev Mode. Wenn ein Element ausgewählt wird, zeigt es:

Für Frames und Shapes:

• Exakte Abmessungen (Width, Height)
• Position (X, Y)
• Corner Radius
• Füllfarben mit Hex-Werten, RGB-Werten und – wenn angewendet – dem Namen der Color Variable oder des Color Style
• Stroke-Eigenschaften
• Effekte (Schatten, Blur) mit allen Parametern
• Opacity

Für Text-Elemente:

• Schriftfamilie, Schriftgröße, Gewicht
• Zeilenhöhe, Buchstabenabstand
• Textausrichtung
• Text-Variable oder Text-Style-Name
• Der tatsächliche Textinhalt

Für Auto-Layout-Frames:

• Direction (horizontal/vertikal)
• Gap (Spacing zwischen Kindelementen)
• Padding (alle vier Seiten)
• Alignment

Abstände zwischen Elementen: Im Dev Mode kann man zwischen zwei Elementen hovern, während Alt/Option gedrückt wird – Figma zeigt dann die Abstände zwischen den Elementen in roten Pfeilen an (sogenannte Red Lines oder Annotations).

Code-Snippets

Im rechten Panel unter „Code" können Entwickler fertige Code-Snippets kopieren:

• CSS: Vollständige CSS-Eigenschaften für das ausgewählte Element (inkl. border-radius, box-shadow, font-family, etc.)
• iOS (Swift): SwiftUI oder UIKit-Code-Snippets für native iOS-Entwicklung.
• Android: Compose oder XML-Snippets für native Android-Entwicklung.

Die CSS-Snippets sind ein guter Startpunkt, aber nicht blindlings kopierbar – sie enthalten oft absolute Positionierungen (position: absolute) statt moderner Flexbox- oder Grid-CSS. Entwickler nutzen sie als Referenz für Werte, nicht als direkt deployable Code.

Variables und Styles im Dev Mode

Wenn Variables und Styles verwendet wurden, zeigt das Dev Mode deren Namen:

• Statt #3B82F6 erscheint color/primary/500 oder der Variable-Name.
• Statt 16px Spacing erscheint spacing/4 als Token-Name.

Das ermöglicht Entwicklern, direkt die Token-Namen aus dem Code-System zu verwenden, was den Handoff erheblich verbessert.

Component-Links

Wenn eine Component-Instanz ausgewählt ist, zeigt der Dev Mode:

• Den Namen der Main Component.
• Links zur Main Component.
• Component Properties und deren aktuelle Werte.

Über das Plugin-API können Component-Links mit Storybook oder anderen Component-Libraries verknüpft werden.

Asset-Export

Assets (Icons, Illustrationen, Fotos) können im Dev Mode direkt exportiert werden:

1. Element oder Frame auswählen.
2. Im rechten Panel den Export-Bereich finden.
3. Format (PNG, SVG, JPG, PDF, WebP) und Skalierung (1x, 2x, 3x) wählen.
4. Herunterladen.

SVG-Exporte sind besonders nützlich für Icons. Der „Copy as SVG"-Button kopiert den SVG-Code direkt in die Zwischenablage.

Annotations (Figma 2024)

Seit 2024 unterstützt Figma Designerannotationen im Dev Mode: Designer können Notizen direkt an Design-Elemente anheften, die im Dev Mode sichtbar sind. Diese Annotations ersetzen teilweise externe Kommentar-Tools für Handoff-Zwecke.

Dev Mode und Plugins

Dev Mode unterstützt Plugins, die speziell für Entwickler entwickelt wurden:

• Anima: Generiert React- oder HTML/CSS-Code aus Figma-Designs.
• Locofy: Generiert Next.js-, React- oder Angular-Code.
• Copilot by Zeplin: Alternative Handoff-Integration.
• EightShapes Specs: Generiert detaillierte Designspezifikations-Dokumentationen.

Ready for Dev (Figma 2024)

Entwickler können in Figma (ab Professional-Plan) Frames und Components als „Ready for Dev" markieren. Das signalisiert, welche Designs implementierungsbereit sind. Im Dev Mode erscheinen entsprechend markierte Elemente mit einem grünen Badge.

Beispiele

1. Button-Spezifikation: Entwickler wählt Button-Instanz → sieht: background: var(--color-primary-500), border-radius: 8px, padding: 12px 24px, font-size: 16px, font-weight: 600.
2. Spacing-Abstände: Entwickler hält Alt/Option und hovert zwischen Card-Komponente und dem nächsten Element → sieht: 24px Abstand = entspricht Variable spacing/6.
3. SVG-Icon-Export: Icon-Komponente auswählen → „Copy as SVG" → direkt in React-Komponente einfügen.
4. Dark-Mode-Farben: Element mit Color Variable auswählen → Dev Mode zeigt color/background/default: Light: #FFFFFF, Dark: #1A1A2E.
5. Component-Dokumentation: Main Component mit Annotation verknüpft zu Storybook-Story → Entwickler sieht direkten Link zur lebenden Komponente.

In der Praxis

Shortcuts:

• Dev Mode ein/ausschalten: Shift+D
• Abstand zu benachbarten Elementen messen: Alt/Option halten + auf Element hovern
• Element-Ausrichtung messen: Alt/Option + auf Kindelement hovern, wenn Parent-Frame ausgewählt ist

Best Practices (für Designer):

• Schichten sauber benennen – Entwickler sehen alle Layer-Namen im Dev Mode.
• Variables statt raw Werte verwenden – Token-Namen machen den Handoff eindeutiger.
• Export-Einstellungen für Assets definieren, bevor der Handoff beginnt.
• „Ready for Dev" konsequent nutzen, um Entwicklern klare Signale zu geben.

Best Practices (für Entwickler):

• CSS-Snippets als Referenz verwenden, nicht blind kopieren.
• Variable-Namen aus Figma 1:1 in den Code übernehmen für konsistente Token-Benennung.
• Annotationen lesen, bevor man mit der Implementierung beginnt.

Vergleich & Abgrenzung

Zeplin war lange das Standard-Handoff-Tool, bevor Figma einen eigenen Dev Mode einführte. Zeplin bietet mehr Projektmanagement-Features, aber Figmas nativer Dev Mode ist für die meisten Teams ausreichend. Avocode (eingestellt) war ein weiteres Handoff-Tool. Storybook ist das Pendant auf Entwickler-Seite – eine lebende Component-Library. Im Vergleich zu Adobe XDs Inspect-Panel ist Figmas Dev Mode vollständiger und besser in das Design-Workflow integriert.

Häufige Fragen (FAQ)

Müssen Entwickler einen Figma-Account haben? Für den Dev Mode benötigen Entwickler einen Figma-Account, können aber kostenlos als „Viewer" oder mit einem Dev-Seat auf die Datei zugreifen, wenn sie eingeladen wurden. Sie benötigen keinen bezahlten Editor-Seat.

Warum sehe ich im Dev Mode keine Variable-Namen, sondern nur Hex-Werte? Das passiert, wenn Elemente mit raw Farben (ohne Variable-Referenz) befüllt wurden. Nur Elemente, auf die tatsächlich eine Variable angewendet wurde, zeigen den Token-Namen. Designer müssen konsequent Variables verwenden.

Kann ich im Dev Mode Änderungen vornehmen? Nein, der Dev Mode ist ein reiner Read-only-Modus. Um Elemente zu bearbeiten, muss in den regulären Editor-Modus gewechselt werden (Shift+D oder über das Menü).

Verwandte Einträge

• Variables
• Styles
• Components
• Figma AI Features (2024)

Weiterführend

• Figma Help Center – help.figma.com/de
• Figma-Dokumentation: „Dev Mode overview" – help.figma.com/hc/en-us/articles/15023124644247
• Figma Config 2023: „Introducing Dev Mode" (Figma YouTube, 2023)