Auto-Layout in Figma ist ein Frame-basiertes Layoutsystem, das Kindelemente automatisch ausrichtet, beabstandet und bei Größenänderungen dynamisch neu ordnet – funktional analog zu CSS Flexbox.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Flexbox-Layout, dynamisches Layout, Responsive Frame
Was ist Auto-Layout?
Auto-Layout verwandelt einen gewöhnlichen Figma-Frame in einen intelligenten Container, der seine Kindelemente nach Regeln ausrichtet: horizontal, vertikal oder als Grid (seit Figma 2023). Ändert man den Inhalt – z. B. mehr Text, ein zusätzliches Icon – passt der Frame seine Größe automatisch an. Das spart endloses manuelles Verschieben.
Erklärung
Aktivierung und Grundprinzip
Auto-Layout aktiviert man mit Shift+A auf einem selektierten Frame oder über den Button „Auto-Layout hinzufügen" im rechten Design-Panel. Sobald aktiviert, erscheinen im Panel folgende Optionen:
Ausrichtungsrichtung:
- Horizontal: Kindelemente werden nebeneinander angeordnet (Reihe).
- Vertikal: Kindelemente werden übereinander gestapelt (Spalte).
- Grid / Wrap: Seit Figma 2023 gibt es den Wrap-Modus, der überlaufende Elemente in neue Zeilen umbricht.
Abstände:
- Gap: Abstand zwischen den Kindelementen.
- Padding: Innenabstand des Frames (oben, rechts, unten, links – oder verknüpft als Gesamtpadding).
Größenverhalten der Kindelemente:
- Fixed: Element behält seine Größe.
- Hug: Element passt sich dem Inhalt an.
- Fill: Element füllt den verfügbaren Platz (entspricht
flex: 1in CSS).
Größenverhalten des Frames selbst:
- Fixed: Der Frame hat eine explizite Breite/Höhe.
- Hug Contents: Der Frame passt sich den Kindelementen an.
- Fill Container: Der Frame füllt seinen übergeordneten Frame aus.
Verschachtelung (Nested Auto-Layout)
Auto-Layout-Frames lassen sich beliebig verschachteln. Ein vertikaler Haupt-Frame kann horizontale Kind-Frames enthalten, die wiederum Auto-Layout haben. So entstehen komplexe, vollständig responsive Layouts, die sich beim Skalieren des Root-Frames proportional anpassen.
Absolute Positionierung
Seit 2022 unterstützt Figma „Absolute Position" innerhalb von Auto-Layout-Frames: Ein Kindelement kann aus dem Fluss herausgenommen und frei positioniert werden, ohne dass es die Abstände der anderen Elemente beeinflusst. Das ist ideal für schwebende Badges, Overlays oder Tooltips.
Spacing Mode
Der Spacing Mode „Auto" verteilt die Elemente gleichmäßig über die gesamte Frame-Breite/-Höhe (vergleichbar mit justify-content: space-between). Der Modus „Packed" hält alle Elemente mit dem definierten Gap zusammen.
Alignment
Die Ausrichtung der Kindelemente im Container (Querachse) entspricht dem CSS align-items: Anfang (Start), Mitte (Center) oder Ende (End).
Beispiele
- Komponenten-System: Ein Button-Frame mit Auto-Layout passt seine Breite automatisch an den Textinhalt an – egal ob „OK" oder „Datei hochladen". Padding bleibt immer konsistent.
- Responsive Design: Eine Navigation mit Auto-Layout (horizontal, Fill) dehnt sich auf Desktop-Breite aus und hält die Links gleichmäßig verteilt.
- Prototyping/Handoff: Der Dev-Mode zeigt die Auto-Layout-Properties direkt als CSS Flexbox-Properties an – Entwickler sehen
display: flex,gap,padding1:1. - Team-Workflow: Design-System-Bibliotheken setzen Auto-Layout in allen Basis-Komponenten ein; so können Teams Abstände über Variable Tokens steuern, ohne jede Instanz manuell anzupassen.
- Wrap-Modus für Tag-Clouds: Ein Frame mit
Wrapund definiertem Gap bricht Tags automatisch in neue Zeilen um – kein manuelles Umbrechen nötig.
In der Praxis
Auto-Layout aktivieren: Element auswählen → Shift+A Richtung wechseln: Im Panel auf das Richtungs-Icon klicken (H/V/Wrap) Gap ändern: Im Panel das Gap-Feld bearbeiten oder auf der Leinwand die pinken Gap-Handles ziehen Padding anpassen: Auf den Padding-Wert klicken – einzelne Seiten oder alle verknüpft Fill Container setzen: Kindelement auswählen → im Panel Breite auf „Fill" wechseln Absolute Position: Kindelement im Frame auswählen → im Panel „Absolute Position" aktivieren
Vergleich & Abgrenzung
| Auto-Layout (Figma) | CSS Flexbox | CSS Grid | |
|---|---|---|---|
| Einachsig | Ja | Ja | Nein |
| Wrap | Ja (seit 2023) | Ja | Ja |
| Gap | Ja | Ja | Ja |
| Subgrid | Nein | Nein | Ja |
Im Vergleich zu Sketch hat Auto-Layout keine direkte Entsprechung (Sketch nutzt Stacks, die ähnlich funktionieren). Adobe XD bot Stacks und Padding, aber weniger granular. Figmas Implementierung ist die ausgereifteste im Markt und nähert sich CSS-Verhalten am stärksten an.
Häufige Fragen (FAQ)
Warum springt mein Layout, wenn ich ein Kindelement lösche? Auto-Layout berechnet den Frame nach dem Entfernen neu. Falls das nicht gewünscht ist, kann man das Kindelement auf „Absolute Position" setzen, bevor man es löscht, oder den Frame temporär auf „Fixed" stellen.
Kann ich Auto-Layout nachträglich deaktivieren? Ja – im Panel erscheint neben „Auto-Layout" ein Minus-Button. Das Deaktivieren entfernt das Layout, behält aber alle Positionen. Die Elemente liegen dann so, wie sie zuletzt vom Auto-Layout platziert wurden.
Lassen sich verschachtelte Auto-Layout-Frames mit Variablen steuern? Ja. Gap und Padding können direkt mit Figma-Variablen (Number-Typ) verknüpft werden. Ändert man den Variablenwert, aktualisieren sich alle verknüpften Frames automatisch.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360040451373
- Figma (2024): Auto layout properties. Figma Docs.
- Online: DesignSystems.com – Auto-Layout Best Practices
