Auto Layout (Figma) – CSS Flexbox-ähnliches Layout-System

Auto Layout ist Figmas dynamisches Layout-System, das – ähnlich wie CSS Flexbox – Kindelemente automatisch in horizontaler oder vertikaler Richtung anordnet, dabei Abstände, Padding und Wrapping kontrolliert und Layouts automatisch an Inhaltsänderungen anpasst.

Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Auto Layout Frame; Tastenkürzel Shift+A; in anderen Tools: Flexbox (CSS), Stack (SwiftUI), LinearLayout (Android)

Was ist Auto Layout?

Auto Layout wurde 2019 eingeführt und ist seither eines der meistgenutzten Features in Figma. Es verwandelt jeden Frame in einen intelligenten Container, der seine Kindelemente automatisch ausrichtet und Abstände kontrolliert. Wird ein Text länger, wächst der Button automatisch mit. Wird ein Listeneintrag hinzugefügt, rücken die anderen nach. Auto Layout macht Designs sowohl flexibel als auch konsistent – ohne manuelle Positionierungsarbeit.

Auto Layout ist die Voraussetzung für moderne, wartbare Komponentensysteme in Figma. Nahezu jede professionell erstellte Component-Library nutzt Auto Layout, um Instanzen dynamisch auf Inhaltsänderungen reagieren zu lassen.

Erklärung

Auto Layout aktivieren

Ein bestehender Frame wird per Shift+A in ein Auto-Layout-Frame umgewandelt. Alternativ: Rechtsklick auf Frame → „Add Auto Layout". Mehrere Elemente ohne Frame markieren und Shift+A drücken erstellt automatisch einen neuen Auto-Layout-Frame um die Auswahl.

Richtung (Direction)

• Horizontal: Kindelemente werden nebeneinander angeordnet (entspricht flex-direction: row in CSS).
• Vertical: Kindelemente werden untereinander angeordnet (entspricht flex-direction: column in CSS).
• Wrap: Elemente umbrechen in die nächste Zeile/Spalte, wenn der Container zu schmal wird (entspricht flex-wrap: wrap in CSS). Verfügbar seit Auto Layout 4.0 (2022).

Abstände (Gap und Padding)

• Gap (Abstand zwischen Elementen): Der Abstand zwischen den Kindelementen. Kann als fester Wert oder als „Auto" gesetzt werden – „Auto" verteilt den verfügbaren Platz gleichmäßig zwischen den Elementen (entspricht justify-content: space-between).
• Padding: Innenabstand des Containers. Kann für alle vier Seiten einheitlich oder individuell gesetzt werden (Top, Right, Bottom, Left). Über das kleine Paddng-Icon im Panel lassen sich alle vier Seiten separat steuern.

Frame-Größe (Sizing)

Für die Breite und Höhe des Auto-Layout-Frames gibt es drei Optionen:

• Fixed: Feste Größe. Das Frame wächst nicht mit dem Inhalt.
• Hug Contents: Das Frame passt sich exakt dem Inhalt an – es wächst und schrumpft mit (entspricht width: fit-content).
• Fill Container: Das Frame füllt den verfügbaren Platz im übergeordneten Container aus (entspricht flex-grow: 1 oder width: 100%).

Diese drei Optionen können für Breite und Höhe unabhängig voneinander gesetzt werden, was sehr flexible Layouts ermöglicht.

Ausrichtung (Alignment)

Die Ausrichtung der Kindelemente innerhalb des Containers wird durch eine 3×3-Matrix (oder 2×3, je nach Richtung) im Panel gesteuert. Sie entspricht den CSS-Eigenschaften align-items und justify-content.

Kindelement-Einstellungen

Innerhalb eines Auto-Layout-Frames hat jedes Kindelement eigene Einstellungen:

• Fixed / Fill Container: Ob das Element eine feste Größe hat oder den verfügbaren Platz ausfüllt.
• Absolute Position: Ein Kindelement kann aus dem Auto-Layout-Fluss herausgenommen werden und absolut positioniert werden – wie position: absolute in CSS. Dies ist nützlich für Badges, Tooltips oder überlagernde Elemente.

Verschachtelung

Auto-Layout-Frames können beliebig tief verschachtelt werden. Eine Karte kann ein vertikales Auto-Layout haben (Bild, Titel, Beschreibung übereinander), während die Liste dieser Karten ein horizontales Auto-Layout mit Wrap ist. Diese Verschachtelung entspricht der verschachtelten Flexbox-Verwendung in CSS.

Stroke Inclusion

Im Panel findet sich die Option, ob Strokes (Rahmen) in die Abstandsberechnung einbezogen werden oder außerhalb des Elements liegen. Dies entspricht box-sizing: border-box vs. box-sizing: content-box in CSS.

Beispiele

1. Dynamischer Button: Ein Button-Frame mit Hug Contents Breite/Höhe, horizontalem Auto Layout und definierten Padding-Werten wächst automatisch, wenn der Button-Text geändert wird.
2. Karten-Liste: Eine horizontale Reihe von Produktkarten mit Wrap, fester Gap-Einstellung und Fill Container Breite umbrechen automatisch auf die nächste Zeile, wenn der Container schmaler wird.
3. Navigation Bar: Eine horizontale Nav mit Space Between (Auto Gap) verteilt die Nav-Punkte gleichmäßig über die volle Breite.
4. Form-Felder: Ein Formular-Container mit vertikalem Auto Layout und einheitlichem Gap hält alle Felder automatisch im definierten Abstand – auch wenn Felder hinzugefügt oder entfernt werden.
5. Tag/Badge-Komponente: Tags in einem Eingabefeld-Design wachsen mit dem Text-Inhalt (Hug Contents) und reihen sich automatisch horizontal nebeneinander.

In der Praxis

Shortcuts:

• Auto Layout hinzufügen: Shift+A
• Auto Layout entfernen: Im Panel oben rechts auf das X klicken
• Padding schnell anpassen: Element auswählen, Alt/Option halten und Abstand zu einem anderen Element messen

Best Practices:

• Immer Hug Contents für Buttons verwenden, nie feste Breiten – dann funktionieren Instanzen mit verschiedenen Labels automatisch korrekt.
• Verschachtelte Auto Layouts aufbauen wie CSS-Flexbox-Layouts – von innen nach außen denken.
• Fill Container verwenden, damit Kindelemente den verfügbaren Platz ausfüllen – das ist der Schlüssel zu fluid-responsive Komponenten.
• Absolute Position sparsam einsetzen – zu viele absolute Positionierungen untergraben den Vorteil von Auto Layout.

Häufige Fehler:

• Frame vergessen in Auto Layout umzuwandeln – Constraints statt Auto Layout zu verwenden, wenn dynamisches Layout benötigt wird.
• Padding und Gap verwechseln: Padding = Abstand Rand zu Inhalt, Gap = Abstand zwischen Kindelementen.

Vergleich & Abgrenzung

Auto Layout in Figma ist konzeptuell CSS Flexbox sehr ähnlich. Sketch hat eine vergleichbare Funktion namens „Smart Layout" für Symbols, die aber weniger mächtig ist. Adobe XD bietet „Repeat Grid" für Listen, aber kein echtes Flexbox-System. Framer (ein Figma-Konkurrent) nutzt direkt CSS-basierte Layouts. Figma Auto Layout ist der stärkste visuelle Flexbox-Implementierung unter den großen Design-Tools und ermöglicht eine sehr genaue Übersetzung in tatsächlichen CSS-Code.

Häufige Fragen (FAQ)

Kann ich Auto Layout in einer Component verwenden? Ja, und das ist sogar empfohlen. Components mit Auto Layout sind deutlich flexibler – Instanzen können Text ändern und der Button passt sich automatisch an. Das ist der Standard in professionellen Design-Systemen.

Warum funktioniert Wrap bei mir nicht? Wrap erfordert eine feste oder maximale Breite des Containers. Wenn der Container auf Hug Contents gesetzt ist, kann er nicht umbrechen, da er immer so breit wie der Inhalt ist. Den Container auf eine feste Breite oder Fill Container setzen.

Wie entsprechen Auto Layout-Einstellungen dem echten CSS? Horizontal = flex-direction: row, Vertical = flex-direction: column, Gap = gap, Padding = padding, Hug = fit-content, Fill = flex: 1 1 0%, Fixed = feste width/height, Space Between = justify-content: space-between.

Verwandte Einträge

• Frames vs. Groups
• Constraints
• Components
• Responsive Design in Figma

Weiterführend

• Figma Help Center – help.figma.com/de
• Figma-Dokumentation: „Auto layout" – help.figma.com/hc/en-us/articles/5731482952599
• Mizko: „Figma Auto Layout 4.0 – Complete Guide" (YouTube, 2023)