Figma: Dev Mode – Die Brücke zwischen Design und Entwicklung

Der Dev Mode in Figma ist ein dedizierter Ansichtsmodus für Entwickler, der CSS-Properties, Abstände, Assets, Token-Referenzen und Code-Snippets direkt aus dem Design bereitstellt – ohne Figma-Designkenntnisse.

Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Developer Mode, Inspect Mode (alt), Design Handoff

Was ist der Dev Mode?

Der Dev Mode (eingeführt 2023, kostenpflichtig ab 2024 für Professional-Teams) ist eine separate Figma-Ansicht, die für Entwickler optimiert ist. Sie zeigt alle designrelevanten Eigenschaften eines ausgewählten Elements als Code an: CSS-Properties, iOS Swift/SwiftUI, Android XML sowie Abstände, Farben, Typografie und exportierbare Assets – ohne dass Entwickler den Design-Canvas bearbeiten können.

Erklärung

Zugang und Berechtigungen

Der Dev Mode wird über einen Toggle oben in der Figma-Toolbar aktiviert (oder mit Shift+D). Im Dev Mode kann der Entwickler das Design inspizieren, aber nicht bearbeiten. Eine spezielle „Can view – Dev"-Berechtigung erlaubt Entwicklern Zugriff auf den Dev Mode ohne Editor-Rechte (seit 2024 als kostengünstigere Lizenz verfügbar).

Inspect-Panel

Das Inspect-Panel zeigt für jedes ausgewählte Element:

Geometrie & Layout:

• Breite, Höhe, X/Y-Position
• Corner Radius, Rotation
• Auto-Layout Properties (Gap, Padding, Direction, Alignment)
• Constraints

Farbe & Stil:

• Fill-Farben als Hex, RGB, HSL, HSB, CSS-Format
• Stroke-Farben und -stärken
• Opacity
• Verknüpfte Color Styles oder Variables (als Token-Name)

Typografie:

• Schriftfamilie, -schnitt, -größe
• Zeilenhöhe, Buchstabenabstand
• Text-Ausrichtung
• Verknüpfte Text Styles

Effekte:

• Shadow-Properties (Farbe, Blur, X/Y-Offset, Spread)
• Blur-Effekte

Code-Snippets

Im Dev Mode generiert Figma automatisch Code-Snippets für:

• CSS – vollständige CSS-Properties für das Element
• iOS (Swift/SwiftUI) – UIKit- und SwiftUI-Code
• Android (XML) – Android-Layout-XML

Seit 2024 können Plugins eigene Code-Snippet-Generatoren hinzufügen (z. B. für React, Vue, Flutter, Tailwind CSS). Das Plugin „Figma to Code" ist besonders beliebt.

Abstands-Visualisierung

Im Dev Mode kann der Entwickler die Abstände zwischen einem Element und seinem übergeordneten Container oder benachbarten Elementen messen. Dazu hält man Option (Mac) bzw. Alt (Win) gedrückt und bewegt die Maus über andere Elemente – pinke Abstands-Linien erscheinen.

Asset-Export

Exportierbare Assets (Bilder, Icons) sind im Dev Mode direkt downloadbar. Figma zeigt alle definierten Export-Einstellungen (Format, Skalierung) und bietet einen Download-Button. Mit der „Export from Dev Mode"-Funktion können Entwickler Assets ohne Editor-Zugang exportieren.

Token-Referenzen

Wenn ein Design Variables oder Styles verwendet, zeigt der Dev Mode die Token-Namen statt der Rohwerte an: color: var(--color-interactive-primary) statt #3B82F6. Das ist entscheidend für die korrekte Design-Token-Implementation im Code.

Annotations (seit 2024)

Designer können im Dev Mode Annotierungen hinzufügen – Erklärungen, Verhaltensbeschreibungen und Interaktions-Specs direkt am Element. Entwickler sehen diese Annotierungen ohne in den Design-Mode wechseln zu müssen. Annotierungen ersetzen teilweise externe Spezifikations-Tools wie Zeplin.

Figma Handoff Link

Bestimmte Sections oder Frames können als „Ready for Development" markiert werden. Im Dev Mode erscheinen diese mit einem grünen Haken-Badge, was kommuniziert, welche Designs bereits implementierbar sind.

Beispiele

1. Komponenten-System: Entwickler inspiziert einen Button im Dev Mode und sieht alle CSS-Properties, den Component-Namen und alle Token-Referenzen – ideal für die direkte React-Component-Implementation.
2. Responsive Design: Auto-Layout-Properties (Flexbox-Werte) erscheinen im Dev Mode als CSS display: flex; gap: 16px; padding: 12px 20px – direkt kopierbar.
3. Prototyping/Handoff: Animation-Properties aus Smart-Animate-Übergängen sind im Dev Mode als transition: all 300ms ease-in-out sichtbar.
4. Team-Workflow: Designer markiert abgeschlossene Screens als „Ready for Dev" → Entwickler filtert im Dev Mode nach diesem Status und sieht nur releante Designs.
5. Kombination mit Design Tokens: Token-Referenzen aus Variables erscheinen als CSS Custom Properties – Entwickler implementiert sie 1:1 ohne Nachfragen.

In der Praxis

Dev Mode aktivieren: Toolbar → Dev-Mode-Toggle (Pfeil-Icon) oder Shift+D Element inspizieren: Element im Canvas klicken → rechtes Panel zeigt alle Properties Abstand messen: Element auswählen → Option/Alt halten → über benachbarte Elemente hovern Code kopieren: Im Code-Snippet-Bereich → Sprache wählen → Code in Zwischenablage kopieren Asset exportieren: Asset auswählen → Export-Panel → Download-Button Bereit markieren: Design-Mode → Frame/Section rechtsklicken → „Mark as ready for development"

Vergleich & Abgrenzung

Der Dev Mode hat Zeplin und Avocode für viele Teams obsolet gemacht, weil er direkt in Figma integriert ist. Für Teams mit sehr komplexen Handoff-Anforderungen (z. B. Jira-Integration, detaillierte Komponentendokumentation) bleibt Zeplin eine Option.

Häufige Fragen (FAQ)

Muss ein Entwickler einen Figma-Account haben? Ja, für den Dev Mode ist ein Figma-Account erforderlich. Seit 2024 gibt es eine spezielle „Dev Seat"-Lizenz, die günstiger als ein Editor-Seat ist und ausschließlich View- und Dev-Mode-Zugriff gewährt.

Warum sehe ich keine Token-Namen, sondern nur Hex-Farben? Token-Namen erscheinen im Dev Mode nur, wenn das Design Variables oder Styles verwendet. Elemente mit direkt gesetzten Farben (kein Style, keine Variable verknüpft) zeigen Rohwerte. Die Lösung: Design konsequent auf Variables umstellen.

Verwandte Einträge

• Figma: Handoff
• Figma: Design Tokens
• Figma: Components
• Figma: Styles

Weiterführend

• Figma Help Center – help.figma.com/hc/en-us/categories/14548333344151
• Figma (2024): Dev Mode overview. Figma Docs.
• Online: Figma Blog – „Dev Mode: The complete guide for developers"