Figma Dev Mode: Layout Informationen auslesen – von Auto Layout zu Flexbox und Grid
Von: Jonas Der Figma Dev Mode kann Layout-Informationen detailliert ausgeben – vorausgesetzt, das Design wurde entsprechend aufgebaut. Wer einige Grundlagen im Design beachtet, bekommt im Dev Mode keine Pixelwerte, sondern saubere CSS-Eigenschaften, Token-Namen und variable Einheiten, die sich direkt in Code übertragen lassen.
Video
Was der Dev Mode an Layout-Informationen ausgibt
Wer im Dev Mode ein Element anklickt, das sauber mit Auto Layout aufgebaut wurde, erhält auf einen Blick alle relevanten CSS-Eigenschaften: Padding-Werte, Gap zwischen den Kind-Elementen sowie das grundlegende Layout-Verhalten – also ob es sich um eine Flexbox oder ein Grid handelt.
Ein Beispiel: Ein Header-Element mit Logo links und Button rechts zeigt im Dev Mode justify-content: space-between und align-items: center – genau das, was der Abstand »Auto« im Design-Mode bedeutet. Padding-Werte erscheinen farblich hervorgehoben (blau für Padding, rot schraffiert für Gap), was die Übersicht weiter erleichtert.
Diese Ausgabe funktioniert aber nur, wenn das Element im Design-Mode tatsächlich mit Auto Layout gebaut wurde. Ohne diese Vorbereitung liefert Dev Mode keine Layout-Eigenschaften – nur feste Breiten- und Höhenangaben.
Auto Layout: Die Abstraktion von Flexbox und Grid
Auto Layout ist Figmas abstrahierte Umsetzung von CSS-Layoutmechanismen wie Flexbox und Grid. Es erlaubt Designerinnen und Designern, Elemente so zu strukturieren, dass sie ähnlich wie im Browser reagieren – responsiv, abstandsbasiert, hierarchisch verschachtelt.
Der Unterschied zu einem klassischen Design-Tool wie Illustrator: Dort werden Elemente einfach positioniert – ein Rechteck hier, ein Text daneben. In Figma mit Auto Layout dagegen definiert man Innenabstände (Padding) und Abstände zwischen Elementen (Gap) explizit, und die Breite eines Elements ergibt sich automatisch aus Inhalt plus Padding. Das entspricht dem intrinsischen Verhalten im Web.
Sobald mehrere Elemente gemeinsam reagieren sollen – etwa zwei Buttons nebeneinander – werden sie in ein Eltern-Element verpackt, das ebenfalls Auto Layout erhält. So entsteht eine verschachtelte Hierarchie, die der DOM-Struktur im Browser sehr ähnelt.
Ohne Auto Layout fehlt etwas
Wird ein Element ohne Auto Layout gebaut – also nur als gezeichnetes Rechteck mit Text darüber –, sieht man im Dev Mode kein Padding, keinen Gap, keine Flexbox-Eigenschaften. Entwicklerinnen und Entwickler müssen sich die Abstände dann manuell ablesen oder schätzen.
Das ist nicht nur ineffizient, es führt auch zu Fehlern und Missverständnissen im Handoff. Eine Datei, die so aufgebaut ist, hat klaren Nachbesserungsbedarf. Die Mindestanforderung sollte sein: einheitliche Abstände, eine Spacing-Hierarchie, und konsequente Nutzung von Auto Layout für alle strukturierten Elemente.
Layout-Variablen für konsistente Abstands-Tokens
Noch aussagekräftiger wird der Dev Mode, wenn Layout-Informationen nicht als fester Wert, sondern als Variablen vergeben werden. Dazu legt man in Figma eine eigene Variable-Collection für Layout an – etwa mit Zahlenwerten wie »size-1 = 8px« und »size-2 = 12px«.
Diese Variablen werden dann bei Padding- und Gap-Werten der Elemente eingesetzt. Im Dev Mode erscheinen anschließend nicht mehr nur Pixelwerte, sondern die zugehörigen Token-Namen – also zum Beispiel »space-4« statt »24px«. Das ermöglicht es, Design-Tokens direkt im Code mit Komponentenwerten zu verknüpfen, was den Handoff erheblich beschleunigt.
In gut organisierten Design-Systemen gibt es dafür eine eigene Spacing- oder Responsive-Collection, in der alle Abstandswerte zentral definiert und von dort aus im gesamten Design referenziert werden.
Flexbox mit Wrap und Grid in Figma
Auto Layout unterstützt nicht nur einfache horizontale oder vertikale Flexbox-Layouts. Wird die Option »Wrap« aktiviert, erhält das Layout sowohl einen horizontalen als auch einen vertikalen Gap – und der Dev Mode gibt entsprechend flex-wrap: wrap aus.
Für Grid-Layouts gibt es in Figma (aktuell noch in der Beta) eine eigene Grid-Option in Auto Layout. Dort lässt sich die Spalten- und Zeilenstruktur definieren, Elemente können frei im Raster positioniert werden, und einzelne Spalten können feste oder dynamische Breiten erhalten – etwa »1fr« oder »200px«.
Im Dev Mode erscheint dann kein Flexbox-Code, sondern ein CSS Grid mit grid-template-columns und den entsprechenden Zeilendefinitionen.
Min- und Max-Breiten für responsives Verhalten
Responsives Design bedeutet mehr als nur flexible Breiten. Oft benötigt man Mindest- und Höchstbreiten, damit ein Element nicht zu klein oder zu groß wird. In Figma lassen sich bei der Breitendefinition eines Elements zusätzlich min-width und max-width festlegen – zum Beispiel »minimal 320px« (Smartphone-Breite) und »maximal 500px«.
Wurden diese Werte im Design-Mode hinterlegt, erscheinen sie auch im Dev Mode – umgerechnet in rem-Werte (sofern so konfiguriert) und direkt als min-width und max-width ausgewiesen. Das macht die Umsetzung im CSS deutlich eindeutiger und reduziert Rückfragen zwischen Design und Entwicklung.
