Der ultimative Leitfaden für automatisches Layout in Figma
Ein praktischer Leitfaden zu Figmas Auto Layout: Erstellen einer Produktkarte, eines Einreichungsformulars und einer ganzen Seite damit
27. November 2025
19 min
Inhalt:
Was ist Auto-Layout in Figma?
Auto Layout ist das Tool von Figma, mit dem Elemente innerhalb einer Gruppe anhand von von Ihnen festgelegten Regeln automatisch angeordnet und mit Abstand versehen werden. Wenn Sie etwas ändern – beispielsweise die Textlänge oder die Bildgröße –, wird alles andere automatisch angepasst, sodass Sie nichts manuell nachbearbeiten müssen.
Anstatt genaue Werte für verschiedene Einstellungen anzugeben, definieren Sie Regeln:
- Fluss ( früher „Richtung“ genannt): Horizontal, vertikal oder Zeilenumbruch.
- Abstand: Abstand zwischen Elementen und Innenabstand innerhalb des übergeordneten Rahmens.
- Ausrichtung und Verteilung von untergeordneten Elementen.
- Verhalten bei Größenänderung (Hug, Fixed, Fill): Um Komponenten mit dem Inhalt wachsen oder schrumpfen zu lassen.
So fügen Sie ein automatisches Layout in Figma hinzu und richten es ein
Auto-Layout-Tastenkombinationen:
- Umschalt + A – Auto-Layout anwenden.
- Umschalt + Alt/Option + A – Auto-Layout entfernen.
- Strg/Befehlstaste + Umschalttaste + G – Gruppierung von Elementen aufheben.
- Strg/Befehlstaste + D – einen Auto-Layout-Rahmen duplizieren (klonen).
Sie können Auto Layout auf einen einzelnen Rahmen anwenden, der mehrere Elemente wie Text, Formen und Bilder enthalten kann, oder auf eine Auswahl von Elementen. Figma fasst diese dann automatisch in einem neuen Auto Layout-Rahmen zusammen. Beispiele für die Anwendung von Auto Layout:
Sehen wir uns Auto Layout in Aktion mit Frames an. Erstellen Sie zwei Frames, wählen Sie diese aus und klicken Sie auf die Schaltfläche „Auto Layout verwenden“ oder drücken Sie Umschalt + A.
- Rahmen (einzeln)
- Rahmen + Rahmen
- Element + Element (Figma wird sie in einen neuen Rahmen einfügen)
Sehen wir uns Auto Layout in Aktion mit Frames an. Erstellen Sie zwei Frames, wählen Sie diese aus und klicken Sie auf die Schaltfläche „Auto Layout verwenden“ oder drücken Sie Umschalt + A.
Die Einstellung für das automatische Layout finden Sie in der rechten Seitenleiste des Inspektors, wenn ein Rahmen oder eine Auswahl aktiv ist.
Um zu überprüfen, ob das automatische Layout angewendet wurde, öffnen Sie das Ebenenbedienfeld. Neben dem Namen des Frames wird ein Symbol für das automatische Layout angezeigt, und die ausgewählten Frames werden in einen einzigen Frame mit automatischem Layout zusammengefasst.
Das Ebenenbedienfeld befindet sich auf der linken Seite. Sie können es auch mit der Tastenkombination Opt/Strg + 1 öffnen.
Wenn Sie bereits einen Rahmen mit Elementen darin haben, können Sie dennoch das automatische Layout anwenden. Danach müssen Sie die Rahmengröße nicht mehr manuell anpassen – legen Sie einfach die Abstände und Abstände fest, und der Rahmen wird automatisch an den Inhalt angepasst.
Auto Layout in Aktion: Wenn Sie die Größe des grünen Rechtecks ändern, passt sich der Rahmen automatisch an die neue Größe an.
Wichtige Eigenschaften des automatischen Layouts
Sehen wir uns die wichtigsten Einstellungen für das automatische Layout und deren Verhalten in responsiven Layouts an. Diese Steuerelemente finden Sie im rechten Bereich, wenn ein Element mit aktiviertem automatischen Layout ausgewählt ist.
Fluss
Der Fluss bestimmt, wie sich Elemente verhalten, wenn innerhalb eines Auto-Layout-Rahmens nicht genügend Platz vorhanden ist. Mit dieser Einstellung können Sie festlegen, ob Objekte in einer einzigen Zeile/Spalte bleiben oder automatisch in die nächste Zeile umgebrochen werden, wenn der Rahmen nicht mehr genügend Platz bietet.
1
Freiform: Sie können Elemente innerhalb des Rahmens beliebig verschieben. Obwohl diese Option unter „Automatisches Layout“ angezeigt wird, deaktiviert sie das automatische Layout für diese Elemente.
Freiform – Elemente frei platzieren (deaktiviert das automatische Layout).
2
Vertikal: Elemente werden untereinander angeordnet.
Objekte werden automatisch in einer Spalte gestapelt.
3
Horizontal: Objekte werden horizontal ausgerichtet. In diesem Modus erscheint eine zusätzliche Einstellung – Zeilenumbruch. Diese legt fest, ob Elemente über den Rahmen hinausragen (und abgeschnitten werden) oder in die nächste Zeile umgebrochen werden, wenn der Platz nicht ausreicht.
Horizontales Layout mit deaktivierter Zeilenumbruchfunktion.
Horizontales Layout mit aktivierter Zeilenumbruchfunktion.
4
Raster: Ein neuer Modus, der Elemente automatisch auf einem Raster platziert. Es erscheint ein Rasterfenster, in dem Sie das Raster anpassen können. Die Elemente werden automatisch aktualisiert, wenn Sie Änderungen vornehmen.
Wenn Sie das Raster ändern, passen sich die Elemente automatisch daran an.
Größenänderung
Dieser Abschnitt enthält die Steuerelemente W (Breite) und H (Höhe). Sie legen die Breite und Höhe des gesamten Rahmens fest, auf den das automatische Layout angewendet wird.
Sie können zwischen zwei Modi wählen:
- Behoben: Die Breite und Höhe des Rahmens bleiben unverändert, unabhängig von anderen Einstellungen oder den Größen der darin enthaltenen Elemente.
- Anpassen (an Inhalt anpassen): Die Breite und Höhe des Rahmens werden basierend auf der konfigurierten Polsterung und den Größen der darin enthaltenen Elemente angepasst.
Wenn Hug aktiviert ist, wird der Rahmen durch Ändern des Abstands zwischen den Quadraten vergrößert oder verkleinert.
Lücke
Diese Einstellung steuert den Abstand zwischen Elementen innerhalb eines automatischen Layouts. Sie können horizontale und vertikale Abstände unabhängig voneinander festlegen.
Beispiel: Der vertikale und horizontale Abstand zwischen den Quadraten innerhalb des Auto-Layouts beträgt 40 px.
Ausrichtung
Diese Einstellung steuert, wie Elemente innerhalb eines automatischen Layouts ausgerichtet werden – links, rechts, mittig, oben oder unten. Sie ist verfügbar, wenn der Fluss des Layouts auf „Horizontal“ oder „Vertikal“ eingestellt ist.
Wenn „Wrap“ aktiviert ist, bestimmt „Alignment“ auch, wie ungleichmäßige Zeilen/Spalten positioniert werden. Beispielsweise kann das violette Quadrat standardmäßig in der Mitte platziert sein, Sie können es jedoch auch links oder rechts fixieren.
Polsterung
Diese Einstellung steuert den Abstand zwischen den Rändern des Rahmens und seinem Inhalt. Der Abstand kann für jede Seite individuell festgelegt werden. Alle neuen Elemente, die Sie hinzufügen, werden an dieser Stelle eingefügt und berücksichtigen diese Abstandseinstellungen.
Zusätzliche Einstellungen
Für das automatische Layout stehen mehrere zusätzliche Einstellungen zur Verfügung. Sehen wir uns jede einzelne davon an.
Um auf andere Einstellungen zuzugreifen, klicken Sie unter „Automatisches Layout“ auf „Einstellungen für automatisches Layout“.
1
Striche: Die Umrandung um einen Rahmen oder ein Element. Sie können wählen, ob die Umrandung innerhalb oder außerhalb der Kanten des Elements platziert werden soll.
So sieht der Rahmen aus, wenn der Strich aktiviert und deaktiviert ist.
2
Canvas-Stapelung: Legt fest, wie Elemente sich überlappen, wenn ein negativer Abstand vorhanden ist. Wählen Sie aus, ob das erste oder das letzte Element vorne platziert werden soll.
Diese Einstellung ist nicht verfügbar, wenn das Layout auf „Raster“ eingestellt ist.
3
Textgrundlinie ausrichten: Richtet Textelemente entlang derselben Grundlinie aus.
Diese Einstellung ist nicht verfügbar, wenn das Layout auf „Raster“ eingestellt ist.
Wenn diese Option aktiviert ist, werden die Textelemente sauber an der Grundlinie ausgerichtet.
Anwendungsbeispiele
Seien wir ehrlich – all diese Begriffe können überwältigend wirken. Ohne praktische Übung bleiben sie nicht hängen und machen wenig Sinn. Anstatt also Theorie auswendig zu lernen, schauen wir uns Auto Layout in der Praxis an. Wir erstellen drei gängige Interface-Elemente: eine Schaltfläche, eine Produktkarte und ein Anmeldeformular.
Wenn Sie neu bei No-Code-Lösungen sind, verwenden Sie diesen exklusiven Promo-Code, um einen Monat lang den Tilda Personal Plan anstelle der üblichen 2-wöchigen Testversion zu erhalten.
Siehe Anweisungen für die Aktivierung
Schaltfläche
Erstellen wir einen Button mit einem Rahmen und einer Textebene. Normalerweise würden Sie die Rahmenbreite manuell an die Länge des Textes anpassen. Was passiert jedoch, wenn der Text länger wird? Sie müssten die Größe des Rahmens erneut anpassen. Und wenn Ihre Benutzeroberfläche oder Website viele Buttons enthält, wird dies schnell sehr zeitaufwendig.
Wie Sie sehen können, müssen Sie die zweite Schaltfläche manuell anpassen, wenn die Textlänge den Rahmen überschreitet.
Aktivieren wir das automatische Layout, um manuelle Anpassungen zu reduzieren.
- Wende das automatische Layout auf den Rahmen an (Umschalt + A).
- Stellen Sie Hug so ein, dass sich die Breite der Schaltfläche an die Textlänge anpasst.
- Passen Sie den Abstand so an, dass der Text nicht an den Rändern des Rahmens klebt.
Wenn die automatische Layoutanpassung aktiviert ist, passt sich die Schaltfläche automatisch an die Länge der Beschriftung an.
Produktkarte
Produktkarten werden am häufigsten in Online-Shops verwendet. Es kann Hunderte oder sogar Tausende davon geben. Jede Karte enthält Titel und Beschreibungen unterschiedlicher Länge sowie Bilder unterschiedlicher Größe.
Mit Auto Layout können Sie ganz einfach Text und Bilder austauschen – alles andere passt sich automatisch an.
Eine Karte ohne automatisches Layout: Bei einer geringen Textmenge sieht alles gut aus.
Wenn der Text jedoch länger wird, ragt ein Teil des Inhalts über die Karte hinaus.
Innerhalb der Karte erfordern verschiedene Elemente unterschiedliche Abstände:
• Der Abstand zwischen Titel und Beschreibung ist ein Wert.
• Der Abstand zwischen Text und Bild ist ein anderer.
Damit die Karte automatisch in der Größe angepasst wird, erstellen wir sie mit mehreren Auto-Layout-Ebenen.
• Der Abstand zwischen Titel und Beschreibung ist ein Wert.
• Der Abstand zwischen Text und Bild ist ein anderer.
Damit die Karte automatisch in der Größe angepasst wird, erstellen wir sie mit mehreren Auto-Layout-Ebenen.
1
Beginnen Sie damit, das automatische Layout auf die Titel- und Beschreibungsebene anzuwenden. Legen Sie einen vertikalen Fluss und einen Abstand von 12 Pixeln fest, damit sich die Höhe automatisch an unterschiedliche Textlängen anpasst.
2
Wenden Sie anschließend das automatische Layout auf die Bild- und Textelemente zusammen an. Dadurch passt sich die Karte an Bilder unterschiedlicher Größe an. Fügen Sie um die Karte herum einen Abstand hinzu und legen Sie die Hintergrundfarbe auf Weiß fest.
Jetzt können Sie das Bild ersetzen oder längeren Text hinzufügen – Figma passt die Höhe der Karte automatisch an.
Wenn wir eine weitere Textzeile hinzufügen, passt sich die Karte neu an und nichts geht kaputt.
Kontakt-/Einreichungsformular
Ein Formular auf einer Website enthält in der Regel mehrere Eingabefelder und eine Schaltfläche. Wenn Sie jedoch die Größe des Rahmens ändern, werden die Felder nicht automatisch angepasst, und der Abstand zwischen ihnen kann verloren gehen.
Ein Formular ohne automatisches Layout: Die Felder werden nicht gestreckt und nichts wird automatisch angepasst.
Wenden wir nun alles Gelernte an und erstellen wir ein Formular mit drei Standard-Eingabefeldern.
1
Fügen Sie eine Feldbeschriftung und einen Rahmen hinzu, der als Eingabefeld dient.
Bezeichnung des zukünftigen Eingabefelds und das Element, das als Eingabe dienen wird.
2
Wenden Sie das automatische Layout an und stellen Sie dann „Flow“ auf „Horizontal“ ein. Geben Sie dem Label eine feste Breite, damit alle Feldnamen sauber ausgerichtet sind. Stellen Sie die Breite des Eingabefelds auf „Füllen“ ein – auf diese Weise passt sich das Eingabefeld automatisch an die Breite des Containers an, wenn Sie dessen Größe ändern.
3
Duplizieren Sie das Feld noch zweimal (z. B. Nachname und E-Mail).
4
Wählen Sie alle drei Felder aus, gruppieren Sie sie und wenden Sie erneut das automatische Layout an. Stellen Sie die Gruppenbreite auf „Füllen” ein. Wenn Sie nun die Größe des Formularcontainers ändern, werden die Felder darin automatisch angepasst.
Das Formular ist fertig. Fügen Sie so viele Felder hinzu, wie Sie benötigen, und platzieren Sie die Schaltfläche „Senden“ darunter – genau wie die, die wir zuvor erstellt haben.
Erstellen eines „flüssigen“ Layouts mit Auto Layout
Mit Auto Layout können Sie ganze Webseiten mit automatisch angepassten Abständen erstellen. Zunächst legen Sie den Abstand zwischen Titel und Beschreibung fest und fügen dann Abstände unterhalb des Bildes, der Schaltfläche und dem Rest des Rahmens hinzu. Schritt für Schritt erhalten Sie so ein vollständig automatisiertes Layout in Figma.
Bei der Erstellung eines Layouts ist es sehr praktisch, wenn sich der Inhalt automatisch an verschiedene Bildschirmgrößen anpasst. Dies wird oft als responsives Design bezeichnet. Um dies zu erreichen, müssen wir ein flüssiges Layout erstellen.
Nehmen wir für dieses Beispiel unsere Produktkarte, duplizieren sie zweimal und richten alle drei Karten an einem Raster aus. Dadurch passen sie sich an die Breite des Rahmens an.
1
Erstellen Sie zunächst einen Rahmen und fügen Sie dann ein 12-Spalten-Raster hinzu.
2
Fügen Sie drei Produktkarten hinzu und platzieren Sie sie so, dass jede vier Spalten umfasst.
3
Stellen Sie für jeden Kartencontainer die Breite auf „Füllen“ ein, damit sich die Karten ausdehnen, wenn Sie die Größe des Hauptcontainers ändern.
4
Legen Sie für den Container, der alle drei Karten enthält, eine feste Breite fest. Wählen Sie unter den Einschränkungseinstellungen die Option „L + R“, damit sich das Layout an die Breite des Rahmens anpasst.
Jetzt können Sie schnell Elemente ersetzen oder hinzufügen und sogar die Größe des Hauptrahmens ändern. Alle Elemente passen sich automatisch an dessen Breite an.
Beachten Sie, dass in Figma die Breite und die Beschränkungen eines Elements miteinander verbunden sind und einige Kombinationen nicht zusammen funktionieren.
Wenn Sie die Breite eines Auto-Layout-Rahmens auf „Inhalt umschließen“ einstellen, wird er entsprechend dem Inhalt innerhalb des Rahmens in der Größe angepasst. Wenn jedoch eine Ebene innerhalb dieses Rahmens die Beschränkungen „Links + Rechts“ verwendet, wird sie von einer Seite des übergeordneten Containers zur anderen gestreckt. Diese beiden Einstellungen widersprechen sich: Im ersten Fall bestimmt der Inhalt die Größe, im zweiten Fall der Container. In diesem Fall priorisiert Figma automatisch eine der Einstellungen.
Wenn Sie möchten, dass sich ein Element zusammen mit seinem übergeordneten Rahmen ausdehnt (wie im vorherigen Beispiel mit Produktkarten), geben Sie dem Element zunächst eine feste Breite. Anschließend können Sie die Einschränkungen „Links + Rechts“ aktivieren, sodass es sich zusammen mit dem übergeordneten Element korrekt in der Größe anpasst.
Wenn Sie die Breite eines Auto-Layout-Rahmens auf „Inhalt umschließen“ einstellen, wird er entsprechend dem Inhalt innerhalb des Rahmens in der Größe angepasst. Wenn jedoch eine Ebene innerhalb dieses Rahmens die Beschränkungen „Links + Rechts“ verwendet, wird sie von einer Seite des übergeordneten Containers zur anderen gestreckt. Diese beiden Einstellungen widersprechen sich: Im ersten Fall bestimmt der Inhalt die Größe, im zweiten Fall der Container. In diesem Fall priorisiert Figma automatisch eine der Einstellungen.
Wenn Sie möchten, dass sich ein Element zusammen mit seinem übergeordneten Rahmen ausdehnt (wie im vorherigen Beispiel mit Produktkarten), geben Sie dem Element zunächst eine feste Breite. Anschließend können Sie die Einschränkungen „Links + Rechts“ aktivieren, sodass es sich zusammen mit dem übergeordneten Element korrekt in der Größe anpasst.
So ignorieren Sie die Eigenschaften des automatischen Layouts (absolute Positionierung)
Was ist, wenn Sie ein kleines Element wie ein Rabatt-Label oder eine Schaltfläche „Zu Favoriten hinzufügen“ innerhalb einer Produktkarte hinzufügen müssen, die Auto Layout verwendet?
In diesem Fall ist die Einstellung „Absolute Positionierung“ die Lösung. Damit können Sie ein Element frei innerhalb eines Auto-Layout-Rahmens platzieren und dabei die für die anderen Elemente geltenden Layoutregeln ignorieren. Diese Option wird verfügbar, sobald Sie „Auto-Layout ignorieren“ aktivieren.
Schauen wir uns ein Beispiel genauer an, bei dem wir ein kleines Rabatt-Etikett zu einer Produktkarte hinzufügen müssen.
1
Erstellen Sie zunächst das Rabatt-Etikett.
2
Fügen Sie es zur Produktkarte hinzu. Wenn Sie es einfach in den Auto-Layout-Rahmen ziehen, wird es entsprechend den bestehenden Layoutregeln angepasst und erscheint irgendwo zwischen den anderen Elementen.
3
Aktivieren Sie „Automatisches Layout ignorieren“. Jetzt können Sie das Etikett an einer beliebigen Stelle positionieren.
Die Einstellung „Absolute Positionierung“ überschreibt das automatische Layout, sodass Sie Elemente an beliebiger Stelle platzieren können – beispielsweise direkt über dem Produktbild.
FAQ: Auto Layout Hauptverwendung Nuancen
So entfernen Sie das automatische Layout in Figma
Sie können das automatische Layout mit derselben Symbolleisten-Schaltfläche entfernen, mit der Sie es angewendet haben. Sie können auch die Tastenkombination Umschalt + Option + A auf Mac oder Umschalt + Alt + A auf Windows verwenden. Dadurch wird der Rahmen für das automatische Layout wieder in einen normalen Rahmen umgewandelt.
Wenn Sie dann einzelne Elemente, die gruppiert sind, wieder trennen möchten, können Sie den Tastenkombination Cmd/Strg + Umschalt + G verwenden.
Wann sollte Auto Layout verwendet werden?
- Sie benötigen Elemente, um einen einheitlichen Abstand zu gewährleisten. Beispiel: Eine Schaltfläche mit Symbolen und Text.
- Sie müssen den Inhalt regelmäßig aktualisieren. Beispiel: Eine Liste von Dienstleistungen mit einer sich ändernden Anzahl von Elementen.
- Ihr Layout muss für verschiedene Bildschirmgrößen vollständig responsiv sein. Beispiel: Entwerfen einer Seite mit Desktop- und Mobilversionen.
- Sie ändern häufig die Struktur. Beispiel: Menüpunkte, die Sie häufig hinzufügen oder entfernen.
- Sie verwenden viele sich wiederholende Designelemente. Beispiel: Kopf- und Fußzeilen, die auf mehreren Seiten erscheinen.
Warum ist die Option „Container füllen“ für einige Elemente verfügbar, für andere jedoch nicht?
Die Option „Containergröße anpassen“ wird nur für Elemente angezeigt, die innerhalb eines Auto-Layout-Rahmens platziert sind. Der Grund dafür ist, dass „Containergröße anpassen“ das untergeordnete Element anweist, entsprechend der Logik des übergeordneten Auto-Layouts zu vergrößern oder zu verkleinern.
Sie können „Container füllen“ nicht für einen Frame der obersten Ebene oder für ein Element festlegen, das sich nicht innerhalb eines Auto-Layout-Frames befindet, da es keinen übergeordneten Auto-Layout-Frame gibt, dessen Platz das Element „füllen“ könnte.
Wann sollte Auto Layout nicht verwendet werden?
Auto Layout ist nicht immer notwendig. Wenn Sie beispielsweise etwas Einfaches erstellen, wie ein einmaliges Banner, das Sie nicht wiederverwenden möchten, müssen Sie keine automatischen Abstands- oder Layoutregeln festlegen. Sie müssen lediglich die Überschrift und das Bild einmal in festen Abständen innerhalb des Rahmens platzieren. Das Einrichten von Auto Layout für ein Layout, das Sie nie ändern oder wiederholen werden, bietet keinen wirklichen Vorteil.
Ein einfaches Banner wie dieses benötigt eigentlich kein Auto Layout.
Wenn Ihnen der Artikel gefallen hat, teilen Sie ihn mit Ihren Freunden. Vielen Dank dafür!
Lesen Sie auch:
Kostenloses Kursbuch über das Entwerfen, Einrichten und Betreiben von
Landing Pages mit hoher Konversionsrate
Landing Pages mit hoher Konversionsrate
Kostenloser praktischer Leitfaden für Webanimation mit Beispielen und Techniken,
und Tipps zu ihrer Verwendung
