CSS to Figma Auto Layout: Flexbox und Grid richtig abbilden

Wenn du Frontend-Code schreibst, fühlt sich Figmas Auto Layout vertraut an: eine Richtung, ein Abstand, Padding, Ausrichtung, Kindelemente, die sich anpassen (Hug) oder auffüllen (Fill). Man ist versucht anzunehmen, CSS to Figma Auto Layout sei eine Eins-zu-eins-Übersetzung. Ist es nicht. Flexbox und Grid sind mächtiger, der Browser löst Margins, Prozentwerte und intrinsische Größen auf, die Auto Layout nicht abbildet, und dasselbe visuelle Ergebnis kann aus sehr unterschiedlichem CSS entstehen.

Dieser Leitfaden erklärt, wie HTML to Frames CSS-Layouts auf Auto Layout abbildet, warum jedes Ergebnis gegen den Browser verifiziert wird, wo die Grenzen liegen und wie du CSS schreibst, das sich sauber importieren lässt.

Der Ansatz: erst Geometrie, dann Ableitung

Ein naiver Konverter liest display: flex und überträgt Eigenschaften. Das bricht schnell: ein Flex-Container mit gap: 0 und Margins an den Kindelementen, ein Block-Element, das nur wie ein vertikaler Stapel aussieht, oder ein Grid, das als zwei saubere Zeilen gerendert wird.

HTML to Frames arbeitet mit dem, was der Browser tatsächlich gerendert hat:

1. Pixelgenau aufbauen. Die Seite wird zuerst in Figma mit absoluten Positionen aus der vom Browser gemessenen Geometrie aufgebaut.
2. Von innen nach außen durchlaufen. Beginnend bei den tiefsten Frames leitet das Plugin aus Positionen und Größen vertikale Stapel, horizontale Stapel, umbrechende Zeilen, Abstände, Padding und Ausrichtung ab.
3. Responsive Bedeutung ergänzen. Zentrierter Inhalt wird zu Center, Boxen mit max-width bleiben zentriert, gleiche Karten und flex-grow werden zu Fill, und in einer Leiste „Logo … Menü … Icons“ wird das Abstandselement zu Fill.
4. Verifizieren. Auto Layout wird angewendet, dann wird die Position jedes Kindelements mit einer Toleranz von 2 px gegen das Original geprüft.
5. Sicher zurückfallen. Hält es nicht, wird ein einfacherer Plan probiert. Scheitert auch der, behält der Frame absolute Positionen mit sinnvollen Constraints (Stretch, Scale, Center, Min, Max).

Da die Ableitung bei der gerenderten Geometrie ansetzt, wird ein Stapel von Block-Elementen genauso zu einem vertikalen Auto Layout wie eine Flex-Spalte. Der CSS-Mechanismus zählt weniger als das Ergebnis. Einen breiteren Überblick bietet Auto Layout erklärt.

Die Zuordnungstabelle

So werden gängige CSS-Muster typischerweise abgebildet. Betrachte das als erwartetes Ergebnis, nicht als Versprechen; das letzte Wort hat die Verifizierung.

Flexbox im Detail

Richtung und Reihenfolge

flex-direction bestimmt, ob ein Container zu einem horizontalen oder vertikalen Stapel wird. Da die Ableitung gerenderte Positionen nutzt, ergeben umgekehrte Richtungen und order einfach Ebenen in visueller Reihenfolge. Was du im Browser siehst, bekommst du im Ebenen-Panel.

Gap und Padding

gap ist der sauberste Input: ein einziger, konsistenter Abstand zwischen Kindelementen, der direkt auf den Elementabstand von Auto Layout abgebildet wird. Margins zwischen Geschwistern funktionieren, wenn sie konsistent sind. Sind sie es nicht – etwa 16, 24, 16 –, kann das Plugin das nicht als einen Abstand darstellen, und die Verifizierung wählt entweder einen anderen Plan oder lässt die Positionen absolut.

Padding wird daran gemessen, wo die Kindelemente tatsächlich im Container sitzen – padding, border-Breiten und innere Margins fließen also alle ins Ergebnis ein.

Justify und Align

justify-content wird auf die Ausrichtung der Hauptachse abgebildet, align-items auf die der Querachse. Der interessante Fall ist space-between. In einem Header wie „Logo … Menü … Icons“ macht das Plugin das Abstandselement zu Fill: Beim Skalieren bleibt das Logo links, die Icons bleiben rechts, und die Mitte dehnt sich. Das ist die responsive Bedeutung, die du erwarten würdest – statt eines festen Abstandswerts, der nur bei einer Breite funktioniert.

flex-grow und Fill

Kindelemente mit flex-grow oder flex: 1 werden zu Fill container. Reihen gleicher Karten werden zu gleichen Fill-Elementen – skalierst du den Eltern-Frame, ändern die Karten gemeinsam ihre Größe, genau wie im Browser.

Umbruch

flex-wrap: wrap wird auf den Wrap-Modus von Auto Layout abgebildet und erzeugt umbrechende Zeilen. Das passt natürlich zu Tag-Listen, Logo-Wänden und mit Flexbox gebauten Karten-Grids.

CSS Grid im Detail

Figmas Auto Layout ist ein Stapelmodell, kein zweidimensionales Grid. Grid-Layouts werden daher auf die nächstliegende Struktur abgebildet, die sich verifizieren lässt:

• Gleichmäßige Grids (gleiche Spalten, gleiche Abstände) werden meist zu umbrechenden Zeilen.
• Asymmetrische Grids (Sidebar und Hauptspalte, eine 2:1-Aufteilung) werden meist zu verschachtelten Stapeln: ein horizontaler Stapel aus vertikalen Stapeln oder umgekehrt.
• Zellen mit Spans und Überlappungen, die sich nicht in Stapel zerlegen lassen, behalten absolute Positionen mit Constraints.

In jedem Fall entspricht das visuelle Ergebnis innerhalb der Toleranz dem Browser. Was sich ändert, ist, wie viel des Frames du in Figma fließend skalieren kannst.

Absolute Positionierung, Zentrierung und Auto-Margins

position: absolute

Ein absolut positioniertes Badge, ein dekorativer Blob oder ein Overlay gehören nicht in einen Stapel, weil sie ihre Geschwister überlappen. Diese Elemente behalten absolute Positionen, und das Plugin vergibt Constraints, damit sie sich beim Skalieren des Eltern-Frames trotzdem sinnvoll verhalten: Ein oben rechts fixiertes Badge bleibt oben rechts, ein vollflächiges Overlay dehnt sich.

max-width und margin: auto

Der klassische Inhaltscontainer, max-width: 1200px; margin: 0 auto, wird zu einer zentrierten Box in einem Frame voller Breite. Hier kommt auch die Site width ins Spiel: Das Plugin misst beim Import die echte Designbreite der Seite. Full-Bleed-Designs kommen in 1920 mit zentrierter Inhaltsbox an, echt geboxte Websites in ihrer Containerbreite und fluide Websites in 1440. Der gemessene Wert hält deine Container-Logik intakt.

Auto-Margins in Flex

margin-left: auto an einem Flex-Kindelement schiebt es ans Ende – ein häufiges Muster bei Navigationsleisten. Wie space-between wird das aus der Geometrie abgeleitet, typischerweise als Fill-Abstandselement, das das verschobene Element am äußeren Rand hält.

Warum Verifizierung wichtig ist

Ohne Verifizierung haben Konverter zwei schlechte Optionen: Auto Layout überall anwenden und hinnehmen, dass sich manche Frames verschieben, überlappen oder zusammenfallen – oder auf Auto Layout verzichten und dir eingefrorene absolute Ebenen liefern.

HTML to Frames wendet Auto Layout an und prüft dann die Position jedes Kindelements auf 2 px genau. Scheitert ein Frame, wird ein einfacherer Plan probiert; scheitert auch der, bleibt der Frame absolut. Das Design bricht nie. Du kannst darauf vertrauen, dass das, was du in Figma siehst, dem Browser entspricht, und das Auto Layout, das du bekommst, ist Auto Layout, das tatsächlich hält.

Der Ergebnisbildschirm zeigt den Gesamtanteil an Auto Layout und listet für absolut gebliebene Frames auf, warum (Diagnose). So wird aus „Warum ist das kein Auto Layout?“ etwas, das du in deinem CSS angehen kannst.

In unseren Tests an echten Websites wurde Auto Layout auf etwa 86 bis 97 Prozent der Frames abgeleitet, zum Beispiel 93 Prozent bei einer Produkt-Website und 88 Prozent bei Linear und Stripe. Deine Werte hängen davon ab, wie das CSS geschrieben ist.

Grenzen, die du kennen solltest

• Zweidimensionale Grid-Semantik gibt es in Auto Layout nicht; Grids werden zu umbrechenden Zeilen oder verschachtelten Stapeln, und komplexe Spans bleiben unter Umständen absolut.
• Inkonsistente Abstände zwischen Geschwistern lassen sich nicht als ein einziger Abstand ausdrücken.
• Überlappung (negative Margins, absolute Kindelemente) hält diese Elemente absolut.
• Skew- und 3D-Transformationen, path()-Clip-Paths, mehrschichtige Masken und Display-P3-Farben werden noch nicht umgewandelt.
• Eingebettete Inhalte wie iframes, WebGL-Canvases und Videos ohne Poster kommen als Screenshot-Bild ihres Bereichs an.
• Eine Breite nach der anderen. Jeder Screen wird in seiner eigenen Breite gelayoutet. Nutze das Responsive set (Desktop, Tablet, Mobile), um jeden Breakpoint als separaten Frame zu erfassen.

Tipps: CSS schreiben, das sich sauber importieren lässt

Diese Gewohnheiten sorgen dafür, dass sich deine Layouts häufiger auf Auto Layout abbilden lassen – und sie sind ohnehin gute CSS-Praxis.

1. Nutze gap statt Margins zwischen Geschwistern. Ein konsistenter Wert wird direkt zum Elementabstand.
2. Halte Abstände innerhalb eines Containers konsistent. Gemischte Abstände erzwingen Fallbacks.
3. Bevorzuge Flexbox für eindimensionale Layouts. Navigationen, Toolbars, Button-Gruppen und Kartenreihen werden direkt abgebildet.
4. Nutze Grid mit gleichen Spuren für Karten-Grids. Gleichmäßige Spalten werden zu sauberen umbrechenden Zeilen.
5. Pack asymmetrische Layouts in explizite Container. Sidebar und Inhaltsbereich in einer eigenen Flex-Zeile ergeben klare verschachtelte Stapel.
6. Nutze flex: 1 für Elemente, die sich dehnen sollen. Das signalisiert Fill.
7. Zentriere Inhalte mit max-width und margin: 0 auto. Daraus wird eine zentrierte Box, die zentriert bleibt.
8. Reserviere position: absolute für echte Overlays. Nutze es nicht für gewöhnliches Layout.
9. Vermeide negative Margins fürs Layout. Sie erzeugen Überlappungen, die sich nicht stapeln lassen.
10. Benenne Farben mit Custom Properties. Mit Styles & variables (Pro) wird aus --brand-primary eine Variable brand/primary.
11. Nutze echten Text. Text in Bildern kann nicht zu bearbeitbaren Textebenen werden.

Deine eigene Zuordnung sehen

Am schnellsten lernst du, wie dein CSS abgebildet wird, indem du es importierst. Füge Code ein oder lade einen Ordner über den HTML-to-Figma-Ablauf hoch, erfasse einen lokalen Build mit der Chrome-Erweiterung oder lass ein KI-Tool ihn per MCP senden. Öffne dann den Ergebnisbildschirm, prüfe den Auto-Layout-Anteil und lies die Diagnose für absolut gebliebene Frames.

Aktiviere Reference screenshot (Pro), um eine versteckte, gesperrte Ebene der Originalseite hinzuzufügen, damit du zwischen Import und Browser-Rendering umschalten kannst. Aktiviere Detailed layers (Pro), wenn du eine detailliertere Ebenenstruktur willst.

Mehr dazu, wie aus Seiten Frames werden, liest du unter HTML to Frame; auf der Funktionsseite siehst du alles, was der Import unterstützt. Die Doku erklärt jede Importoption im Detail.