CSS Flexbox zu Figma Auto Layout: Eigenschaft für Eigenschaft

Wenn Flexbox und Auto Layout dieselbe Sprache sprechen

Figmas Auto Layout ist keine eigenständige Designidee neben CSS Flexbox. Es ist Figmas eigene Umsetzung desselben Modells aus Hauptachse und Kreuzachse: Ein Container ordnet seine Kinder entlang einer Richtung an, verteilt den übrigen Platz entlang dieser Achse und richtet sie auf der anderen Achse aus. Wer justify-content und align-items bereits kennt, für den ist der größte Teil des Auto-Layout-Eigenschaftenpanels eine Umbenennungsübung, keine neue Fähigkeit. Diese Referenz geht die Zuordnung Eigenschaft für Eigenschaft durch: Richtung und Zeilenumbruch, Ausrichtung auf beiden Achsen, Gap und Abstand, Größenverhalten mit Fill und Hug, und die wenigen Stellen, an denen Auto Layout bewusst hinter vollständigem Flexbox zurückbleibt.

Richtung und Umbruch: flex-direction zu Figmas Flow

CSS legt die Hauptachse mit flex-direction: row oder flex-direction: column fest. Figma zeigt dieselbe Wahl als Flow-Einstellung am Auto-Layout-Frame: Horizontal für row, Vertical für column. Es gibt außerdem eine dritte Option, Grid, die Kinder in Spalten und Zeilen anordnet und kein einzelnes Flexbox-Gegenstück hat. Sie orientiert sich stärker an CSS Grid.

Beim Umbruch trennen sich die beiden im Umfang. CSS flex-wrap: wrap lässt Elemente in neue Flex-Zeilen umbrechen, wobei jede Zeile ihre eigene kleine Hauptachse wird, und align-content steuert, wie sich diese Zeilen selbst auf der Kreuzachse verteilen. Figmas Wrap-Schalter, verfügbar an einem horizontalen Auto-Layout-Frame, liefert das visuelle Ergebnis, Elemente brechen in eine neue Zeile um, wenn der Platz ausgeht, ohne das vollständige Modell der Zeilenverteilung dahinter offenzulegen. Für die meisten Komponenten- und Karten-Grid-Arbeiten reicht das aus. Bei einem Layout, das stark auf flex-wrap zusammen mit align-content: space-between setzt, lohnt sich nach einem Import eine manuelle Kontrolle.

Ausrichtung auf beiden Achsen: justify-content und align-items

justify-content verteilt den übrigen Platz auf der Hauptachse: flex-start, center, flex-end, oder einen der verteilten Werte, space-between, space-around, space-evenly. Die Ausrichtungssteuerung auf Frame-Ebene in Figma bietet dieselben Optionen für Start, Mitte und Ende, wobei die verteilten Modi im Gap-Setting stecken statt in einer eigenen Eigenschaft. Mehr dazu weiter unten. Ein Detail überträgt sich exakt: justify-content hat keine sichtbare Wirkung mehr, sobald ein Kind ein flex-grow größer als 0 hat, weil dieses Kind den gesamten übrigen Platz beansprucht, bevor die Ausrichtung überhaupt greift. Stellt man ein Auto-Layout-Kind in Figma auf Fill container, zeigt sich dasselbe: Die Ausrichtungseinstellung des Frames auf dieser Achse verliert ihre sichtbare Wirkung, aus demselben Grund.

align-items legt die Ausrichtung auf der Kreuzachse für alle Kinder als Gruppe fest: flex-start, center, flex-end, oder stretch. Das Ausrichtungsraster im Figma-Eigenschaftenpanel entspricht dem direkt. Wo sich beide trennen, ist bei align-self, der CSS-Eigenschaft, die align-items für ein einzelnes Kind überschreibt. Auto Layout hat Stand 2026 keine Kreuzachsen-Überschreibung pro Kind. Braucht ein Element eine Fixierung am oberen Rand einer Zeile, während seine Geschwister zentriert bleiben? Das ist entweder eine manuelle Position außerhalb des Auto-Layout-Flusses, oder ein verschachtelter Frame, kein einzelner Eigenschaftsschalter.

Gap und Abstand: gap, column-gap, row-gap

CSS gap (mit column-gap und row-gap als Langform) legt einen festen Abstand zwischen benachbarten Flex-Elementen fest. row-gap wirkt sich erst sichtbar aus, sobald flex-wrap: wrap gesetzt ist und Elemente über mehr als eine Zeile verteilt sind; eine einzeilige Flex-Reihe nutzt nur column-gap. Figmas Gap-Wert funktioniert genauso im Verhältnis zu seinem eigenen Wrap-Schalter: An einem nicht umbrechenden Frame gibt es einen Gap-Wert entlang der Hauptachse, und das Aktivieren von Wrap führt einen zweiten Wert für die Kreuzachse ein.

Figma faltet außerdem die verteilten justify-content-Werte von CSS über einen Auto-Spacing-Modus in Gap ein: Between, Around und Evenly entsprechen space-between, space-around und space-evenly. Ein Update 2026 an Auto Layout brachte die Randfälle näher an das Flexbox-Verhalten heran, genau hier. Auto Gap fällt jetzt nie unter 0, passend dazu, wie ein echter Flex-Container überlaufende space-between-Elemente an den Zeilenanfang kollabieren lässt, statt sie überlappen zu lassen. Ein einzelnes Kind in einem Between-Auto-Gap-Stack richtet sich jetzt an der Startkante aus statt zu zentrieren, wieder passend zu Flexbox. Dasselbe Update korrigierte das Padding bei Fill-container-Kindern nach dem CSS-Border-Box-Modell, sodass Padding immer vollständig respektiert wird, statt bei knappem Platz zusammengedrückt zu werden.

Größenverhalten: flex-grow, flex-shrink, flex-basis zu Fill container und Hug contents

flex-grow sagt einem Element, wie viel vom übrigen Platz der Hauptachse es beanspruchen soll, proportional zu seinem Wachstumsfaktor. Der CSS-Standardwert 0 bedeutet, dass es nicht über seine flex-basis hinaus wächst. Figmas Fill-container-Option beim Größenverhalten ist das Gegenstück im Designwerkzeug: Ein auf Fill container gesetztes Kind streckt sich, um den verbleibenden Platz im übergeordneten Auto-Layout-Frame einzunehmen, und respektiert dabei weiterhin Padding und Gap des Frames, dieselbe Rolle, die flex-grow in einem Flex-Container spielt.

flex-shrink löst das umgekehrte Problem: Platz entfernen, damit Elemente einen Container, der zu klein für ihre kombinierte Größe ist, nicht überlaufen. Figma stellt keinen proportionalen Shrink-Faktor bereit. Stattdessen behält ein auf Fixed size gesetzter Frame oder ein Objekt seine Größe unabhängig vom verfügbaren Platz, und Hug contents passt ein Objekt exakt an seine Kinder an. Das entspricht flex-basis: auto bei einem Element mit flex-grow: 0, dem inhaltsbasierten Standardgrößenverhalten, von dem jedes Flex-Element ausgeht, bevor Wachsen oder Schrumpfen angewendet wird.

Eine Einschränkung überträgt sich direkt aus der Logik von Flexbox selbst: Ein Figma-Frame kann auf derselben Achse nicht gleichzeitig auf Stretch und Hug gesetzt werden, genauso wie ein Flex-Element nicht gleichzeitig wachsen, um Platz zu füllen, und schrumpfen, um sich an seinen Inhalt anzupassen, kann, auf dieser Achse. Ein Größenverhalten pro Achse wählen, in CSS oder in Figma.

Was Auto Layout bewusst aus Flexbox weglässt

Figmas eigenes Team hat Auto Layout als durchdachte Teilmenge von Flexbox beschrieben, keine vollständige Neuimplementierung. Es deckt Richtung, Gap, Padding, Ausrichtung und Fill- oder Hug-Größenverhalten ab, die Eigenschaften, die den größten Teil der Last im alltäglichen Interface-Layout tragen. Was fehlt, sind vor allem die Teile von Flexbox, die für mehrzeiligen Umbruch und Überschreibungen pro Element existieren: kein align-self, und Wrap ist ein einfacherer Schalter auf Frame-Ebene statt des vollständigen Flex-Zeilenverteilungsmodells hinter flex-wrap zusammen mit align-content.

Nichts davon macht Auto Layout ungeeignet für die Aufgabe. Es macht es zu einem bewusst kleineren Vokabular, ausgerichtet auf das, was ein Designer tatsächlich täglich anfasst. Die fehlenden Teile sind die, zu denen ein Entwickler nur in Randfällen greifen würde.

Was von einem Import Eigenschaft für Eigenschaft bleibt

Richtung, Ausrichtung, Gap und Fill- oder Hug-Größenverhalten decken den Großteil eines typischen Flexbox-Layouts ab, und sie ordnen sich Auto Layout sauber genug zu, dass die Übersetzung meist eine Umbenennung ist. Die Stellen, die nach jedem CSS-zu-Figma-Import manuell zu prüfen sind, benennt diese Referenz direkt: eine align-self-Überschreibung pro Kind, und ein flex-wrap-Layout, das davon abhängt, dass align-content mehrere Zeilen auf eine bestimmte Weise verteilt. Alles andere, Richtung, justify-content, align-items, gap, flex-grow und flex-shrink, hat einen klaren, direkten Platz im Auto-Layout-Panel.

UnHTML liest das eigene Flexbox-CSS einer Seite und setzt beim Import automatisch die passenden Auto-Layout-Eigenschaften, und greift nur dort auf absolute Positionierung zurück, wo ein Layout tatsächlich kein Auto-Layout-Gegenstück hat, wie im oben genannten align-self-Fall. Der Importbericht listet jeden dieser Rückfälle auf, sodass nichts still angenähert wird.