Figma Auto Layout für flexibles, responsives Design

Figma Auto Layout ist der schnellste Weg, um statische Rahmen hinter sich zu lassen und Komponenten zu bauen, die sich wie echte Interfaces verhalten. Willst du Buttons, Kartenlisten und Formulare, die mit ihrem Inhalt wachsen und schrumpfen, musst du die inhaltsabhängigen Regeln von Auto Layout lernen, statt jedes Element von Hand neu auszurichten. In diesem Leitfaden erklären wir die Logik mit einer CSS-Flexbox-Analogie und arbeiten Schritt für Schritt ein echtes Button- und Karten-Beispiel durch.

Was macht Auto Layout eigentlich?

Wendest du Auto Layout auf ein Frame an, verwaltet Figma dieses Frame wie einen Flex-Container. Die untergeordneten Elemente sind keine frei verschiebbaren Rahmen mehr; es sind Elemente, die entlang einer Achse angeordnet sind, mit festem Abstand dazwischen, und die das Padding des Containers respektieren. Löschst du ein Element, rücken die übrigen automatisch nach; verlängerst du den Text, wächst der Container mit. In der Praxis bekommst du:

Richtung: horizontale oder vertikale Stapelung — das Pendant zu CSS flex-direction.
Gap: ein fester Abstand zwischen Elementen — dasselbe wie gap.
Padding: der Innenabstand des Containers, pro Seite einstellbar.
Ausrichtung: ein 3x3-Raster, das Elemente auf der Haupt- und Querachse positioniert.

Wähle ein Frame aus und drücke Shift + A, um Auto Layout sofort hinzuzufügen; dieselbe Tastenkombination erneut entfernt es wieder.

Richtung, Gap und Padding einstellen

Das Hinzufügen von Auto Layout öffnet einen neuen Bereich im rechten Panel. Die erste Einstellung ist die Richtung: horizontal (→) oder vertikal (↓). Stehen Icon und Beschriftung eines Buttons nebeneinander, wähle horizontal; stapeln sich Titel und Beschreibung einer Karte, wähle vertikal.

Die zweite Einstellung ist der Gap, der Abstand zwischen den Elementen. Du kannst einen festen Pixelwert eingeben oder "Auto" wählen, um Elemente an beide Enden des Containers zu schieben (die Idee von CSS justify-content: space-between). Beim Padding kannst du einen einzigen Wert für alle Seiten, getrennte horizontale/vertikale Werte oder jede der vier Seiten einzeln festlegen.

Schließlich gibt es die Ausrichtungssteuerung: Klicke auf einen Punkt im 3x3-Raster, um Elemente links/mittig/rechts und oben/mittig/unten auszurichten. Eine vertikale Karte will meist "oben-links", ein Button bevorzugt "Mitte".

Resizing: die Einstellung, die eine Komponente wirklich flexibel macht

Der mächtigste, aber am häufigsten missverstandene Teil von Auto Layout ist das Resizing-Verhalten. Sowohl das Container-Frame als auch jedes untergeordnete Element hat drei Optionen pro Achse, horizontal und vertikal:

Fixed (fest): die Größe wird manuell festgelegt und ändert sich nicht.
Hug contents (Inhalt umschließen): der Container schrumpft genau auf seinen Inhalt — wie ein Button, der sich auf seine Beschriftung zusammenzieht.
Fill container (Container füllen): das Element nimmt den verfügbaren Platz im übergeordneten Element ein — ähnlich wie CSS flex-grow: 1.

Die richtige Kombination verändert alles. Setzt du etwa einen Button-Container horizontal auf Hug, wächst er, wenn die Beschriftung länger wird; setzt du das Textelement darin auf Fill und den Container auf Fixed, behält der Button eine feste Breite und der Text wird zentriert. "Fill" lässt sich nur für Elemente innerhalb eines Auto-Layout-Frames wählen; am äußersten Frame erscheint diese Option nicht.

Schritt für Schritt: ein flexibler Button

Bauen wir einen wirklich responsiven Button:

Erstelle eine Textebene und tippe "Senden".
Mit ausgewähltem Text drücke Shift + A — Figma hüllt den Text in ein Auto-Layout-Frame.
Lass die Richtung horizontal, setze das Padding auf 16 horizontal und 10 vertikal.
Stelle das Resizing des Frames auf beiden Achsen auf Hug contents.
Füge einen Eckenradius und eine Füllfarbe hinzu.

Änderst du nun die Beschriftung von "Senden" zu "Formular senden", wird der Button von allein breiter und das Padding bleibt konstant. Wandle ihn in eine Komponente um (Strg/Cmd + Alt + K), und jede Instanz behält dieses flexible Verhalten. Das entspricht sauber folgendem CSS:

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
}

Kartenlisten und verschachteltes Auto Layout

In echten Projekten kommt die Stärke aus verschachteltem Auto Layout. Eine typische Karte baust du so:

Äußeres vertikales Auto Layout: der Kartenkörper (Padding 24, Gap 12).
Darin ein Titeltext und ein Beschreibungstext — beide horizontal auf Fill container.
Unten ein horizontales Auto Layout für Buttons, Gap 8.

Platzierst du diese Karte in einem äußeren vertikalen Auto Layout mit Gap, erzeugt das Duplizieren der Karte automatisch eine Liste. Löschst du eine Karte, schließt die Liste die Lücke, ohne ein Loch zu hinterlassen. Für ein mehrspaltiges Raster aktivierst du die Option Wrap: ein horizontales Auto Layout schiebt nicht passende Elemente in die nächste Zeile — wie CSS flex-wrap: wrap.

Häufige Fehler und Tipps

Falsches Resizing: wächst ein Element unerwartet, steht es wahrscheinlich auf "Fixed", wo es "Fill" sein sollte, oder umgekehrt. Prüfe das zuerst.
Text bricht nicht um: läuft langer Text in einer Zeile über, setze die Textebene horizontal auf Fill und vertikal auf Auto/Hug; stelle sicher, dass der Text im Modus "Auto height" statt "Auto width" ist.
Negativer Abstand: Figma unterstützt einen negativen Gap, praktisch für überlappende Avatar-Stapel.
Absolute Position: willst du ein Element aus dem Auto-Layout-Fluss nehmen (etwa ein Badge in der Ecke), wähle es aus und aktiviere die absolute Position.

Häufige Fragen

Ist Auto Layout dasselbe wie CSS Flexbox?

Nicht identisch, aber die Logik ist fast gleich. Richtung, Gap, Padding und Ausrichtung entsprechen direkt den Flexbox-Konzepten; "Fill container" ist grob flex-grow und "Hug contents" das Schrumpfen auf den Inhalt. Deshalb wird die Übergabe ans Frontend deutlich sauberer.

Wie entferne ich Auto Layout?

Wähle das Frame aus und drücke erneut Shift + A, oder nutze die Entfernen-Option neben dem Auto-Layout-Bereich im rechten Panel. Die Elemente bleiben frei an ihrer letzten Position.

Wie viele verschachtelte Ebenen kann ich nutzen?

Es gibt praktisch keine harte Grenze; 3 bis 4 Ebenen verschachteltes Auto Layout sind in komplexen Komponenten normal. Benenne deine Ebenen dennoch sinnvoll und vermeide unnötige Wrapper, sonst wird die Wartung schwieriger.

Möchtest du ein Designsystem von Grund auf aufbauen oder deine bestehende Figma-Datei in responsive Komponenten umwandeln? Ich gestalte Auto-Layout-basierte Interfaces, die sich leicht an Entwickler übergeben lassen. Lass uns über dein Projekt sprechen: nimm Kontakt auf.