Auto Layout in Figma: Komponenten bauen, die mitwachsen

Stell dir ein Team vor, das „Feldfrisch“ gestaltet, eine App, über die Menschen bei Hofläden aus ihrer Region bestellen. Die Produktkarte sieht im Entwurf perfekt aus: Foto, Produktname, Hof, Preis, ein Button „In den Korb“. Dann kommen echte Inhalte. Aus „Kürbis“ wird „Bio-Hokkaido-Kürbis aus eigenem Anbau“, der Text läuft über den Rand. Der Button rutscht über den Preis. Für die englische Fassung muss jemand jede Karte von Hand nachziehen, weil „In den Korb“ zu „Add to basket“ wird und plötzlich nicht mehr passt. Und als das Team die Liste von zwei auf drei Spalten umstellen will, werden aus einer Stunde Arbeit drei.

Das Problem liegt nicht an den Inhalten, sondern daran, wie die Karte gebaut ist. Alle Elemente liegen an festen Positionen in einem Rahmen, und nichts davon weiß, dass es auf die anderen reagieren sollte. Genau dafür gibt es in Figma Auto Layout.

Dieser Artikel erklärt, wie Auto Layout funktioniert, welche Einstellungen es gibt und wie du damit einen Button, eine Karte und eine Liste baust, die mit ihren Inhalten mitwachsen. Er zeigt auch, wie sich das auf CSS Flexbox übertragen lässt und wo nicht. Feldfrisch dient dabei als durchgehendes Beispiel. Es ist erfunden, aber typisch. Die Beschreibungen folgen dem aktuellen Figma Help Center. Figma entwickelt die Funktion laufend weiter, einzelne Bezeichnungen können sich also ändern. Die Begriffe in Anführungszeichen stammen aus der englischen Oberfläche.

Was Auto Layout ist

Auto Layout ist eine Eigenschaft von Frames in Figma. Ein Frame mit Auto Layout ordnet seine Inhalte nach Regeln an: in welcher Richtung, mit welchem Abstand, mit welchem Innenabstand, mit welcher Ausrichtung und mit welchem Größenverhalten. Ändert sich ein Inhalt, rechnet Figma die Anordnung neu. Wird ein Text länger, wächst der Button. Kommt ein Listeneintrag dazu, wächst die Liste.

Figma nennt selbst typische Einsatzzwecke: Buttons, die sich ihrem Text anpassen, Listen, die reagieren, wenn Einträge hinzukommen, wegfallen oder ausgeblendet werden, Bento-Layouts und Dashboards sowie Seiten, die auf verschiedene Bildschirmgrößen passen. Auto Layout steht in allen Figma-Tarifen zur Verfügung. Warum sich viele Teams überhaupt für Figma entscheiden, beleuchtet der Vergleich Sketch vs. Figma in 2026.

Hinzufügen lässt es sich auf zwei Wegen: Du wählst eine oder mehrere Ebenen aus und drückst Shift + A, oder du klickst in der rechten Seitenleiste auf „Add auto layout“. Figma wählt dabei automatisch eine passende Richtung, die du jederzeit ändern kannst.

Die Grundeinstellungen

Richtung

Figma spricht von „Flows“. Es gibt drei: „Vertical“ ordnet die Inhalte untereinander an, „Horizontal“ nebeneinander, und „Grid“ in Zeilen und Spalten. Zu Grid weiter unten mehr. Umbruch, also „Wrap“, ist kein eigener Flow, sondern eine Option für horizontale und vertikale Anordnungen.

Abstand zwischen den Elementen

Der „Gap“ legt fest, wie viel Platz zwischen den Kindelementen liegt. Du kannst einen festen Wert eintragen oder „Auto“ wählen. Bei „Auto“ verteilt Figma den verfügbaren Platz gleichmäßig. Laut Help Center gibt es dafür drei Varianten, die den gleichnamigen CSS-Werten entsprechen: „Between“ ist der Standard und lässt an den Rändern keinen Platz, „Evenly“ verteilt den Platz gleichmäßig auf Lücken und Ränder, „Around“ macht die Lücken doppelt so groß wie die Ränder. Figma weist darauf hin, dass „Evenly“ und „Around“ schrittweise ausgerollt werden.

„Auto“ ist ideal für Zeilen, in denen etwas links und etwas rechts stehen soll, etwa der Preis links und der Button rechts.

Innenabstand

„Padding“ ist der Raum zwischen dem Rand des Frames und seinen Inhalten. Du kannst ihn für alle Seiten gleich, getrennt nach horizontal und vertikal oder für jede Seite einzeln setzen. Figma versteht dabei auch die CSS-Kurzschreibweise, also etwa 12, 20, 12, 20 für oben, rechts, unten, links. Ein Frame kann laut Help Center nicht kleiner werden als sein Padding.

Ausrichtung

Im Ausrichtungsfeld mit neun Positionen legst du fest, wo die Inhalte im Frame sitzen, etwa oben links oder mittig. Ein nützliches Detail ist die Grundlinien-Ausrichtung: Sie richtet Elemente an der Grundlinie ihres Textes aus, zum Beispiel zwei Texte in verschiedenen Größen oder ein Icon neben einem Text. Du findest sie in den Auto-Layout-Einstellungen oder schaltest sie mit B im Ausrichtungsfeld um.

Größenverhalten: Hug, Fill und Fixed

Das Größenverhalten ist der Teil von Auto Layout, an dem sich am meisten entscheidet. Breite und Höhe lassen sich getrennt einstellen, jeweils mit drei Optionen.

„Hug contents“ bedeutet: Der Frame ist so klein wie möglich, umschließt aber seine Inhalte samt Abständen. Das Help Center rechnet es an einem Beispiel vor: Ein Text von 40 Pixeln Breite mit je 10 Pixeln Padding links und rechts ergibt einen Frame von 60 Pixeln. Wird der Text 50 Pixel breit, wächst der Frame auf 70 Pixel. Hug funktioniert nur bei Frames mit Auto Layout.

„Fill container“ bedeutet: Das Element dehnt sich auf den gesamten verfügbaren Platz in seinem Elternframe aus. Wichtig: Setzt du ein Kind auf Fill, während der Elternframe auf Hug steht, kann der Elternframe nicht mehr umschließen. Er wechselt laut Figma auf dieser Achse zu Fixed.

„Fixed width“ und „Fixed height“ halten eine Größe konstant, egal was im Frame passiert. Sobald du eine Breite oder Höhe von Hand einträgst, steht die Achse auf Fixed.

Ergänzend kannst du Grenzen setzen: Über das Menü bei Breite oder Höhe fügst du „Min width“, „Max width“ und die Entsprechungen für die Höhe hinzu. Diese Grenzen lassen sich mit den übrigen Optionen kombinieren. Eine Karte, die auf Fill steht, aber nie schmaler als 240 Pixel wird, ist damit leicht gebaut.

Texte im Auto Layout

Textebenen haben eigene Größenoptionen: „Auto width“ wächst in die Breite und bricht nur bei manuellen Zeilenumbrüchen um, „Auto height“ behält die Breite und wächst nach unten, „Fixed size“ ändert die Größe gar nicht. Gerade Fixed size ist im Auto Layout tückisch, denn solche Texte passen sich ihrem Inhalt nicht an und können andere Elemente überlappen.

Für lange Texte gibt es „Truncate text“: Was nicht passt, wird abgeschnitten und mit Auslassungspunkten markiert. Mit „Max lines“ legst du fest, nach wie vielen Zeilen das passiert. Bei Texten in Auto-Layout-Frames funktioniert das, wenn die Höhe auf Hug contents steht.

Wrap und Grid

Mit „Wrap“ brechen Elemente in eine neue Zeile um, wenn der Platz nicht mehr reicht, etwa bei einer Reihe von Filter-Chips. Bei vertikaler Anordnung entsteht stattdessen eine neue Spalte, sobald die Höhe des Frames erreicht ist. Deshalb braucht ein vertikaler Wrap eine feste Höhe, sonst gibt es keinen Punkt, an dem umgebrochen wird. Mit Wrap kannst du zwei Abstände setzen: einen innerhalb einer Zeile und einen zwischen den Zeilen. Figma betont, dass Wrap kein Masonry-Layout erzeugt, also keine versetzt gestapelten Kacheln.

Seit der Konferenz Config im Mai 2025 gibt es außerdem „Grid“ als dritte Anordnung. Grid ordnet Inhalte zweidimensional in Zeilen und Spalten an und eignet sich laut Figma für Bento-Layouts, Dashboards, redaktionelle Layouts und Tabellen. Die wichtigsten Einstellungen nach aktuellem Stand:

• Spalten- und Zeilenzahl legst du fest. Die Zeilenzahl steht standardmäßig auf „Auto“, sodass Zeilen je nach Inhalt hinzukommen oder wegfallen.
• Spuren, also Zeilen und Spalten, können eine feste Größe haben, ihren Inhalt umschließen oder den verfügbaren Platz füllen. Füllende Spuren teilen sich den Platz in Bruchteilen, wie die Einheit fr in CSS Grid.
• Abstände setzt du getrennt zwischen Zeilen und zwischen Spalten.
• Ein Element kann sich über mehrere Zellen erstrecken. Dafür muss es auf Fill container stehen.
• Elemente werden der Reihe nach von links nach rechts und von oben nach unten platziert. Das lässt sich abschalten, wenn bewusst leere Zellen bleiben sollen.

Verwechsle Grid nicht mit den Layout-Rastern, die Figma schon länger hat. Diese sind eine Orientierungshilfe zum Ausrichten, keine Regel, nach der Inhalte angeordnet werden.

Elemente aus dem Fluss nehmen

Manchmal soll ein Element zwar im Frame liegen, aber nicht Teil der Anordnung sein, etwa ein „Neu“-Badge, das in der Ecke einer Produktkarte über dem Foto schwebt. Dafür gibt es „Ignore auto layout“. Figma nannte diese Funktion früher „Absolute position“. Du wählst das Kindelement aus und aktivierst die Option in der rechten Seitenleiste. Das Element verhält sich dann wie in einem normalen Frame: Du kannst es frei platzieren und mit Constraints an eine Ecke binden. Kindern im normalen Fluss lassen sich übrigens keine Constraints zuweisen.

Wenn Elemente sich überlappen, etwa bei negativen Abständen für einen Stapel aus Profilbildern, entscheidet „Canvas stacking“, welches oben liegt. Standardmäßig ist es das letzte Element, mit „First on top“ kehrst du das um. Die Reihenfolge im Ebenenbedienfeld bleibt davon unberührt.

Verschachteln: vom Button zur Liste

Die eigentliche Stärke von Auto Layout entsteht durch Verschachtelung. Jeder Frame mit Auto Layout kann wieder Frames mit Auto Layout enthalten, jeder mit eigener Richtung, eigenem Abstand und eigenem Padding. Figma zeigt das in seiner Dokumentation an einem Newsfeed mit vier Ebenen. Für Feldfrisch sieht es so aus.

1. Der Button

Der Button ist ein horizontaler Frame mit Icon und Text. Padding 12 Pixel oben und unten, 20 Pixel links und rechts, Gap 8 Pixel. Breite und Höhe stehen auf Hug contents.

• Vorher: Ein Rechteck mit einem Text darüber, beide mittig ausgerichtet. Wird aus „In den Korb“ „Add to basket“, ragt der Text über das Rechteck hinaus.
• Nachher: Der Button wächst mit dem Text. Wird das Icon ausgeblendet, rückt der Text nach, weil ausgeblendete Elemente im Auto Layout keinen Platz beanspruchen.

2. Die Karte

Die Karte ist ein vertikaler Frame mit drei Teilen: Foto, Textbereich und Fußzeile. Das Foto steht in der Breite auf Fill container, mit fixiertem Seitenverhältnis, damit es beim Skalieren nicht verzerrt. Der Textbereich ist ein vertikaler Frame mit Produktname und Hof, Breite Fill, Höhe Hug. Der Produktname wird mit „Truncate text“ und „Max lines“ auf zwei Zeilen begrenzt, damit sehr lange Namen die Karte nicht sprengen. Die Fußzeile ist ein horizontaler Frame mit Preis und Button, Gap auf Auto, damit der Preis links und der Button rechts steht. Das „Neu“-Badge liegt mit Ignore auto layout oben rechts über dem Foto.

Diese Kombination aus Fill in der Breite und Hug in der Höhe empfiehlt auch das Help Center: Kinder füllen die Breite des Elternframes und wachsen in der Höhe mit ihrem Inhalt.

3. Die Liste

Für eine einspaltige Liste reicht ein vertikaler Frame mit Gap 16, in dem die Karten auf Fill stehen. Für ein Produktraster gibt es zwei Wege: ein horizontaler Frame mit Wrap, in dem die Karten eine feste Breite oder eine Mindestbreite haben, oder Grid mit einer festen Spaltenzahl. Grid passt, wenn die Spaltenzahl bewusst gesetzt werden soll. Wrap passt, wenn so viele Karten nebeneinander stehen sollen, wie gerade Platz haben.

• Vorher: Zwölf Karten, von Hand in zwei Spalten ausgerichtet. Der Wechsel auf drei Spalten bedeutet, jede Karte neu zu positionieren.
• Nachher: Die Spaltenzahl im Grid ändern oder den Listenframe breiter ziehen, der Rest ordnet sich selbst.

Zwei Tipps aus dem Help Center helfen beim Bauen: Gib Frames vorübergehend eine Hintergrundfarbe, um zu sehen, wie sie sich verhalten. Und teste jede Komponente, indem du den äußeren Frame größer und kleiner ziehst. Wenn dabei etwas überläuft oder springt, stimmt irgendwo das Größenverhalten nicht.

Diese Aufteilung in kleine, zusammengesetzte Bausteine entspricht dem Denken von Atomic Design: Der Button ist ein Atom, die Karte ein Molekül, die Liste ein Organismus.

Auto Layout und CSS Flexbox

Wer mit Entwickelnden zusammenarbeitet, profitiert davon, dass Auto Layout dem Flexbox-Modell aus CSS ähnelt. Figma selbst stellt diesen Bezug an mehreren Stellen her. Die wichtigsten Entsprechungen:

• Horizontal und Vertical entsprechen flex-direction: row und column.
• Gap entspricht gap, Padding entspricht padding.
• „Auto“ mit Between, Evenly und Around entspricht justify-content: space-between, space-evenly und space-around.
• Wrap entspricht flex-wrap: wrap.
• Fill container entspricht in der Hauptrichtung grob flex: 1, quer dazu align-self: stretch.
• Min und max entsprechen min-width, max-width und den Varianten für die Höhe.
• Die Grundlinien-Ausrichtung entspricht align-items: baseline.
• Ignore auto layout ähnelt position: absolute innerhalb eines positionierten Elternelements.
• Grid entspricht in Grundzügen CSS Grid, einschließlich der Bruchteile mit fr.

Die Entsprechung ist aber nicht vollständig. Vier Unterschiede führen in der Übergabe immer wieder zu Rückfragen.

Standardverhalten. In CSS strecken sich Flex-Elemente quer zur Hauptrichtung standardmäßig, weil align-items den Anfangswert stretch hat. Außerdem schrumpfen sie standardmäßig, wenn der Platz nicht reicht. In Figma füllt ein Element nur, wenn du Fill container wählst, und ein Element mit fester Größe bleibt fest.

Negative Abstände. Figma erlaubt Stapel mit negativem Abstand. Die CSS-Eigenschaft gap akzeptiert dagegen keine negativen Werte. Im Code wird so etwas meist mit negativen Außenabständen gelöst.

Rahmenlinien. Innenliegende Konturen zählt Figma standardmäßig zur Größe eines Elements. Das Help Center merkt selbst an, dass das bei der Übergabe nicht immer der Darstellung von Rahmen in CSS entspricht. In den Auto-Layout-Einstellungen kannst du innenliegende Konturen deshalb aus der Berechnung herausnehmen.

Überlauf. Ein Auto-Layout-Frame passt sich seinem Inhalt an. Wer Inhalte abschneiden oder in einem Prototyp scrollen lassen will, braucht laut Figma einen normalen Frame als Hülle um das Auto Layout.

Für die Übergabe heißt das: Auto Layout macht die Absicht eines Layouts gut lesbar, ersetzt aber nicht das Gespräch darüber, wie sich eine Komponente bei extremen Inhalten verhalten soll.

Auto Layout, Varianten und Variablen

Komponenten sind in Figma ebenfalls Frames und können daher Auto Layout bekommen. Figma weist darauf hin, dass du es jeder Komponente einzeln hinzufügen musst. In Instanzen, also den Kopien einer Komponente, lassen sich Padding und Gap anpassen, Ebenen aber nicht neu anordnen oder hinzufügen. Löschen kannst du in Instanzen nur, indem du eine Ebene ausblendest.

Das passt gut zu Varianten und Komponenten-Eigenschaften. Eine Varianten-Eigenschaft „Size“ mit den Werten S, M und L kann für jede Größe eigenes Padding und eigene Abstände festlegen. Eine Boolean-Eigenschaft, also ein Ein-Aus-Schalter, blendet das Icon im Button ein oder aus. Weil ausgeblendete Elemente im Auto Layout keinen Platz beanspruchen, schließt sich die Lücke automatisch.

Abstände und Größen lassen sich außerdem mit Zahlenvariablen verknüpfen. Figma nennt dafür unter anderem Gap, Padding, Breite und Höhe sowie die Grenzen für minimale und maximale Größen. So nutzen alle Komponenten dieselben Abstandswerte, und eine Änderung wirkt überall. Gerade in einem Design System spart das viel Abstimmung. Ein Stolperstein steht ausdrücklich im Help Center: Wer Padding oder Gap über die Anfasser direkt auf der Arbeitsfläche ändert, löst die verknüpfte Variable. Wie Variablen und Abstände in ein größeres System passen, beschreibt der Artikel Design Systems für kleine Teams.

Häufige Fehler

Größen von Hand ziehen. Wer einen Frame an der Ecke größer zieht oder einen Wert einträgt, setzt die Achse auf Fixed. Bei Texten gilt dasselbe: Eine von Hand geänderte Textbox steht danach auf Fixed size. Wenn eine Komponente plötzlich nicht mehr mitwächst, ist das die häufigste Ursache.

Fill in einem Hug-Frame. Ein Kind auf Fill und ein Elternframe auf Hug widersprechen sich. Figma löst das, indem der Elternframe auf Fixed wechselt. Überleg dir für jede Ebene, wer die Größe bestimmt: der Inhalt von innen oder der Container von außen.

Abstände mit unsichtbaren Rechtecken bauen. Leere Rechtecke als Platzhalter für Abstände funktionieren, bis jemand sie verschiebt oder vergisst. Gap und Padding sind dafür da, und sie lassen sich mit Variablen verknüpfen.

Zu viele Hüllen. Jede Ebene, die nur existiert, um eine andere einzuwickeln, macht die Komponente schwerer zu verstehen. Eine gute Faustregel: Jeder Auto-Layout-Frame sollte eine eigene Aufgabe haben, etwa eine Richtung, eine Gruppe oder einen Hintergrund.

Constraints im Fluss erwarten. Kinder eines Auto-Layout-Frames lassen sich nicht mit Constraints an Ränder binden. Wer das braucht, nimmt das Element mit Ignore auto layout aus dem Fluss.

Vertikaler Wrap ohne feste Höhe. Ohne feste Höhe weiß der Frame nicht, wann er eine neue Spalte beginnen soll.

Nur mit Platzhaltertext testen. Eine Karte, die mit „Kürbis“ funktioniert, muss auch mit „Bio-Hokkaido-Kürbis aus eigenem Anbau“, mit englischen Texten und ohne Foto funktionieren. Teste Komponenten mit extremen Inhalten, bevor andere sie verwenden.

Fazit

Auto Layout verwandelt statische Entwürfe in Komponenten, die auf ihre Inhalte reagieren. Die Grundlagen sind überschaubar: Richtung, Abstand, Innenabstand, Ausrichtung und das Größenverhalten mit Hug, Fill und Fixed. Dazu kommen Wrap und Grid für mehrzeilige Anordnungen, Mindest- und Höchstgrößen und die Möglichkeit, einzelne Elemente aus dem Fluss zu nehmen.

Die eigentliche Arbeit liegt in der Struktur. Bei Feldfrisch besteht die Produktkarte jetzt aus wenigen, klar benannten Ebenen, die jeweils eine Aufgabe haben. Längere Produktnamen, eine englische Fassung oder eine dritte Spalte kosten keine Stunden mehr, sondern Sekunden. Und weil Auto Layout dem Flexbox-Modell nahekommt, versteht auch das Entwicklungsteam schneller, wie sich die Karte verhalten soll. Wer die Unterschiede kennt, vermeidet die typischen Missverständnisse in der Übergabe.

Checkliste

• Jede Komponente, die Inhalte enthält, nutzt Auto Layout statt fester Positionen.
• Für jede Ebene ist entschieden, ob der Inhalt (Hug) oder der Container (Fill) die Größe bestimmt.
• Feste Größen sind bewusst gesetzt, nicht durch Ziehen an der Ecke entstanden.
• Abstände entstehen über Gap und Padding, nicht über leere Rechtecke.
• Lange Texte haben eine Lösung: Umbruch, Max lines oder eine Mindest- und Höchstbreite.
• Schwebende Elemente wie Badges nutzen Ignore auto layout und Constraints.
• Raster nutzen Wrap oder Grid, je nachdem, ob die Spaltenzahl fest oder flexibel sein soll.
• Abstände und Größen sind, wo sinnvoll, mit Zahlenvariablen verknüpft.
• Jede Komponente ist mit extremen Inhalten und durch Größerziehen des äußeren Frames getestet.
• Abweichungen zu CSS, etwa bei Konturen oder negativen Abständen, sind mit dem Entwicklungsteam besprochen.

Quellen

• Figma Learn: Guide to auto layout in Figma
• Figma Learn: Use the horizontal and vertical flows in auto layout
• Figma Learn: Use the grid auto layout flow
• Figma Learn: Combine vertical, horizontal, and grid auto layout flows
• Figma Learn: Explore text properties
• Figma Learn: Adjust text dimensions and resizing
• Figma Learn: Explore component properties
• Figma Learn: Apply variables to designs
• Dylan Field, Figma Blog (2025): Config 2025 recap
• MDN Web Docs: Basic concepts of flexbox
• MDN Web Docs: gap