Entdecke die Eigenschaften von Auto-Layout – Figma Learn - Hilfe-Center

Dieser Artikel ist für die bisherige und die neue Figma Benutzeroberfläche verfügbar. Über den Schiebeschalter unten links auf der Seite kannst du auf die gewünschte Benutzeroberfläche umschalten. Lerne UI3 kennen: Figma, neu gestaltet →

Vor dem Start

Wer kann diese Funktion verwenden?

Verfügbar bei allen Abos

Benutzer*innen mit Schreibzugriff auf eine Datei können Auto-Layout auf Rahmen und Objekte anwenden.

Schon mit den Auto-Layout-Eigenschaften vertraut? Erfahre, wie du das Auto-Layout verwendest →

Auto-Layout ist eine Eigenschaft, die auf Rahmen und Komponenten angewendet werden kann. Du kannst damit Designs erstellen, deren Größe sich automatisch an den jeweiligen Anzeigebereich und den Inhalt anpasst – ideal, wenn du neue Ebenen oder längere Texte hinzufügen oder die Ausrichtung beibehalten möchtest, während du das Design bearbeitest.

Es gibt viele Anwendungsmöglichkeiten für Auto-Layout:

Erstelle Schaltflächen, deren Größe sich automatisch anpasst, wenn du Beschriftungen hinzufügst.
Erstelle Listen, die sich anpassen, wenn Elemente hinzugefügt, entfernt oder ausgeblendet werden.
Kombiniere Auto-Layout-Rahmen, um komplette Benutzeroberflächen zu erstellen.

Das Auto-Layout ist eine leistungsstarke Funktion mit vielen beweglichen Teilen und Verwendungsmöglichkeiten. In diesem Artikel erklären wir die Funktionsweise verschiedener Aspekte von Auto-Layout.

Lerne Auto-Layout in der Figma Community spielerisch kennen →

Auto-Layout-Rahmen haben andere Eigenschaften als normale Rahmen. Wenn du das Auto-Layout anwendest, wirst du einige Änderungen im rechten Panel sehen.

Du kannst bei Auto-Layout-Rahmen:

🚫 Layout-Raster zu diesem Rahmen hinzufügen
🚫 Einschränkungen auf alle Objekte innerhalb eines Auto-Layout-Rahmens anwenden, sofern das Objekt nicht die Funktion „Auto-Layout ignorieren“ aktiviert hat
🚫 Smarte Auswahl auf Objekte innerhalb des Rahmens anwenden

Layout-Fluss

Richtung

Die Richtung gibt an, wohin der Auto-Layout-Rahmen fließt.

Vertikal: Objekte entlang der Y-Achse hinzufügen, entfernen und neu anordnen. Beispiel: Objekte in einer Liste oder Beiträge in einem Newsfeed oder einer Timeline.
Horizontal: Objekte entlang der X-Achse hinzufügen, entfernen und neu anordnen. Beispiel: eine Reihe von Schaltflächen oder Symbole in einem mobilen Navigationsmenü.
Umbruch: Objekte in mehreren Zeilen und Spalten in einem Rahmen anordnen. Die Objekte fließen horizontal und gehen in die nächste Zeile über. Beispiel: Fotogalerien oder eine Reihe von Tags.

Stack-Reihenfolge der Arbeitsfläche

Wenn mehrere Ebenen einen negativen Abstand haben und einen Stack bilden, liegt das letzte Objekt (entweder das ganz rechte oder das ganz untere) im Stack standardmäßig oben.

Du kannst die visuelle Reihenfolge des Stacks so ändern, wie sie auf der Arbeitsfläche zu sehen ist.

Wenn der Auto-Layout-Rahmen ausgewählt ist, klicke im rechten Panel, um die Auto-Layout-Einstellungen zu öffnen. Wähle neben Arbeitsflächen-Stacking Folgendes aus:

Erste Ebene oben: Die erste Ebene im Stack befindet sich oben
Letzte Ebene oben: Die letzte Ebene im Stack befindet sich oben.

Nebeneinander-Vergleich von „Letzter oben“ und „Erster oben“

Hinweis: Beachte, dass bei einer Änderung der Stackreihenfolge die Reihenfolge der Ebenen im Ebenen-Tab gleich bleibt. Das Arbeitsflächen-Stacking ist ausschließlich eine visuelle Änderung, die auf der Arbeitsfläche stattfindet.

Auto-Layout ignorieren

Hinweis: „Auto-Layout ignorieren“ wurde früher „absolute Position“ genannt. Die Funktion hat einen neuen Namen, funktioniert aber immer noch gleich.

Ein Objekt, bei dem die Option Auto-Layout ignorieren aktiviert ist, wird von einem Auto-Layout-Fluss ausgeschlossen, bleibt aber im Auto-Layout-Rahmen. Das Objekt und seine gleichgestellten Objekte ignorieren einander, auch wenn sie ihre Größe ändern und sich bewegen.

Ähnlich wie bei der absoluten Position in CSS kann ein Objekt, das das Auto-Layout ignoriert, relativ zu seinem übergeordneten Container genau an der gewünschten Stelle platziert werden.

Objekte, bei denen das Auto-Layout ignoriert wird, werden wie Objekte in einem normalen Rahmen behandelt. Das bedeutet, dass du Einschränkungen anwenden kannst, um zu bestimmen, wie sie reagieren, wenn die Größe des übergeordneten Auto-Layout-Rahmens geändert wird. Andere Auto-Layout-Einstellungen, z. B. Größenänderungs- und Layoutoptionen, sind für diese Objekte nicht verfügbar.

Du kannst ein Objekt veranlassen, den Auto-Layout-Fluss zu ignorieren, indem du einen der folgenden Schritte ausführst:

Wähle ein untergeordnetes Objekt eines Auto-Layout-Rahmens aus und klicke in das rechte Panel
Ziehe ein Objekt in einen Auto-Layout-Rahmen, während du die Taste ⌃ Steuerung drückst.

In einer Figma Design-Datei zieht ein Cursor bei gedrückter Strg-Taste ein X-Symbol in einen Auto-Layout-Rahmen. Der Cursor gibt das X-Symbol in der oberen rechten Ecke des Rahmen frei.

Abstand

Abstand zwischen Elementen

Verwende den Abstand zwischen Elementen, um den Abstand oder die Verteilung zwischen Objekten in einem Auto-Layout-Rahmen festzulegen.

Der Abstand zwischen den Elementen hat zwei verschiedene Einstellungen:

Auto: Stelle den Abstand zwischen den Objekten auf den größtmöglichen Abstand ein. Gib Auto in das Feld ein oder wähle es aus dem Dropdown-Menü aus.
Ein bestimmter Abstand: Gib an, wie weit die Objekte voneinander entfernt sein sollen. Gib einen Wert in das Feld ein, ändere die Werte mit den Pfeiltasten oder passe das Feld mit dem Cursor an.

Um schnell zwischen diesen beiden Einstellungen zu wechseln, klicke auf das Ausrichtungsfeld und drücke X.

Wenn die Richtung des Auto-Layout-Rahmens auf vertikal oder horizontal eingestellt ist, kannst du den Abstand zwischen den Elementen vertikal bzw. horizontal festlegen. Wenn du die Rahmen-Richtung auf Umbruch eingestellt hast, kannst du sowohl den horizontalen als auch den vertikalen Abstand zwischen den Elementen festlegen.

Tipp! Halte die ⇧ Umschalttaste gedrückt, während du die Punkte ziehst, um die Werte zu erhöhen und zu verringern, indem du die großen Nudge-Werte verwendest.

Objektabstand

Innenabstand steuert den leeren oder weißen Raum zwischen der Begrenzung eines Auto-Layout-Rahmens und den untergeordneten Objekten des Rahmen. Du kannst den Innenabstand gleichmäßig vertikal und horizontal festlegen oder unterschiedliche Werte für den Innenabstand oben, rechts, unten und links wählen.

Passe den Innenabstand mit den Arbeitsflächen-Steuerelementen oder den Abstandsfeldern im rechten Panel an.

Um auf die Arbeitsflächen-Steuerelemente zuzugreifen, wähle einen Auto-Layout-Rahmen aus und bewege den Mauszeiger über ihn. Es werden rosafarbene Ziehpunkte angezeigt, ähnlich wie bei der smarten Auswahl.

Klicke auf Ziehpunkte, um Eingabefelder zu öffnen und einen numerischen Wert einzugeben
Oder klicke und ziehe den Ziehpunkt, um den Abstand zu ändern

Tipp: Sieh dir unsere Anleitung für Tastenkürzel ↓ an, um den Innenabstand auf gegenüberliegenden Seiten, auf allen Seiten und mehr einzustellen!

Ein hellgrünes Blog-Karten-Asset mit einem Titel, einer Beschreibung und einer „Mehr erfahren“-Schaltfläche. Das Auto-Layout wird auf dieses Asset angewendet. Die Tastenkürzel zum Ändern des Innenabstands auf allen Seiten wird darunter angezeigt. Ein Cursor verwendet dieses Tastenkürzel, während er auf den oberen rosafarbenen Ziehpunkt des Auto-Layout-Rahmens klickt und diesen zieht.

Die Innenabstand-Steuerelemente im rechten Panel sind standardmäßig in vertikale (oben und unten) und horizontale (links und rechts) Innenabstände unterteilt.

Um einen individuellen Innenabstand festzulegen, klicke auf , um die Felder oben, rechts, unten und links zu verwenden.
Um einen einheitlichen Innenabstand festzulegen oder den CSS-Code zu verwenden, halte die ⌘ Befehlstaste oder Strg gedrückt und klicke in ein beliebiges Innenabstandsfeld. Du kannst auch einen CSS-Code eingeben. Wenn du zum Beispiel 1,2,3,4 eingibst, werden die Werte für oben, rechts, unten und links auf 1, 2, 3 bzw. 4 gesetzt. Die Eingabe von 1,2 setzt die Werte auf oben/unten: 1 und links/rechts: 2.

Tipp! Drücke Tab, um zwischen den Eingabefeldern zu wechseln.

Kontur im Layout

Standardmäßig werden Konturen bei der Berechnung der Größe von Objekten nicht berücksichtigt und wirken sich daher nicht auf den übergeordneten Rahmen oder die umgebenden Objekte aus.

Dies ist bei der Entwicklerübergabe möglicherweise nicht ideal, da es nicht genau darstellt, wie CSS Ränder rendert.

Wähle aus, ob Konturen Platz in einem Auto-Layout-Rahmen einnehmen sollen, indem du zu den Auto-Layout-Einstellungen gehst und im Dropdown-Menü neben Kontur In Layout einschließen oder Vom Layout ausschließen auswählst.

Ausrichtung

Ausrichtung für untergeordnete Objekte festlegen

Lege fest, wie untergeordnete Objekte innerhalb eines Auto-Layout-Rahmens ausgerichtet werden sollen. Sowohl die Richtung des Auto-Layout-Rahmens als auch die Verteilung oder der Abstand zwischen den Elementen bestimmen, welche Ausrichtungsoptionen dir zur Verfügung stehen.

Im Gegensatz zu Objekten in einem regulären Rahmen kannst du die Ausrichtung der Objekte nicht einzeln steuern. Aus diesem Grund legst du die Ausrichtung der untergeordneten Objekte im übergeordneten Auto-Layout-Rahmen fest.

Verwende das Ausrichtungsfeld im rechten Panel, um eine von neun Layoutoptionen für die untergeordneten Objekte in einem Rahmen auszuwählen.

Wähle das Feld aus und verwende die Pfeiltasten, um zwischen den verschiedenen Ausrichtungseinstellungen zu wechseln.
Wähle das Kästchen aus und drücke W/A/S/D, um die Ausrichtung auf den Rand des Rahmen einzustellen.

Ein grüner Auto-Layout-Rahmen mit 3 gelben Quadraten. Ein Cursor klickt sich durch die verschiedenen Optionen des Ausrichtungsfeldes im rechten Panel.

Wenn der Abstand zwischen den Elementen auf Auto eingestellt ist, hast du drei Optionen für jede Richtung:

Vertikales Auto-Layout: Links, Mitte, Rechts
Horizontales Auto-Layout: Oben, Mitte, Unten

Ein grüner Auto-Layout-Rahmen mit 3 gelben Quadraten. Ein Cursor klickt durch die verschiedenen Optionen im Ausrichtungsfeld, wenn „Auto“ auf den Abstand dazwischen angewendet wird.

Wenn der Abstand zwischen den Elementen auf eine bestimmte Zahl eingestellt ist, hast du für jede Richtung die gleichen neun Optionen:

Oben Links
Oben Mitte
Oben Rechts
Links
Mitte
Rechts
Unten Links
Unten Mitte
Unten Rechts

Hinweis: Wenn eine oder mehrere Größeneigenschaften auf „Hug content“ (Inhalt dicht umschließen) eingestellt sind, führen bestimmte Auswahlen in der Arbeitsfläche nicht zu visuell unterschiedlichen Layouts. Der Grund dafür ist, dass dadurch jeglicher Abstand um die untergeordneten Objekte entfernt wird.

Ausrichtung der Textgrundlinie

Eine Grundlinie ist die unsichtbare Linie, in der sich ein Text oder eine Ebene befindet. In der Typografie erstrecken sich Unterlinien unter dieser Linie.

In einigen Fällen kann durch die Ausrichtung der Grundlinien von Ebenen für mehr Ausgewogenheit gesorgt werden – etwa bei der Ausrichtung der Grundlinien von Textebenen mit unterschiedlichen Schriftgrößen oder bei der Ausrichtung eines Symbols an einer Textebene.

Nebeneinander-Vergleich von Symbol und Text mit und ohne Textgrundausrichtung

Um Ebenen anhand ihrer Grundlinien auszurichten, wähle die Ebenen aus, die du ausrichten möchtest, und klicke im rechten Panel auf , um die Einstellungen für das Auto-Layout zu öffnen. Klicke neben der Grundlinienausrichtung des Textes auf , um die Basislinienausrichtung zu aktivieren.

Tipp! Klicke auf das Ausrichtungsfeld im rechten Panel und drücke B, um die Textgrundlinienausrichtung zu aktivieren bzw. deaktivieren.

Größe ändern

Eine der leistungsstärksten Funktionen von Auto-Layout ist die Möglichkeit, die Abmessungen der Objekte in einem Auto-Layout-Rahmen zu steuern.

Lege das Größenänderungsverhalten für übergeordnete Auto-Layout-Rahmen fest, um alle an den untergeordneten Objekten vorgenommenen Änderungen anzupassen. Mithilfe der Dropdown-Menüs im rechten Panel können Größenänderungseinstellungen für Objekte sowohl auf der X- als auch auf der Y-Achse einzeln angewendet werden.

Wenn du den Mauszeiger über eine Größenänderungsoption aus der Dropdown-Liste bewegst, werden auf der Arbeitsfläche Linien angezeigt, die angeben, wie sich der Begrenzungsrahmen des Designs ändert.

Eine Ebene innerhalb eines beweglichen Rahmens ist ausgewählt. Der Abschnitt zur Größenänderung im rechten Panel ist durch ein Feld hervorgehoben.

Hinweis: Textebenen haben auch eigene Eigenschaften zur Größenänderung. Dies kann in Auto-Layout-Rahmen praktisch sein.

Wenn du möchtest, dass deine Auto-Layout-Rahmen völlig fließend sind, raten wir von der Verwendung von Textfeldern fester Größe ab. Textebenen mit fester Größe werden nicht an den Text angepasst, was zu Überlappungen zwischen den Ebenen in einem Auto-Layout-Rahmen führen kann.

Hier erfährst du mehr über die Größenänderung von Text →

Feste Breite oder Höhe

Wenn die Breite oder Höhe eines Auto-Layout-Rahmens auf Fixed (Fest) eingestellt ist, bleiben die Werte der Rahmenabmessungen unabhängig vom Inhalt des Rahmens unverändert. Die Größe des Rahmens wird bei Änderungen in den Objekten (z. B. der Textlänge) nicht angepasst.

Minimale und maximale Abmessungen

Du kannst für jeden Auto-Layout-Rahmen und seine untergeordneten Objekte eine minimale oder maximale Breite und Höhe festlegen.

Öffne das Dropdown-Menü Breite, um Minimale Breite hinzufügen und Minimale Breite hinzufügen zu finden
Öffne das Dropdown-Menü Höhe, um Minimale Höhe hinzufügen und Maximale Höhe hinzufügen zu finden

Wähle eine Option aus dem Dropdown-Menü „Breite“ oder „Höhe“. Gib in dem neuen Feld, das angezeigt wird, einen Wert ein oder verwende die Dropdown-Liste, um eine Zahlenvariable anzuwenden.

Eine Themen-Tag-Komponente mit der Bezeichnung „Thema“ mit schwarzem Rand und weißem Hintergrund, die ein horizontales Auto-Layout verwendet. Ein Cursor fügt der Komponente eine Mindestbreite von 80 Pixeln hinzu und ändert dann die Bezeichnung in „Innendesign“. Die Komponente wird horizontal erweitert, um den Text aufzunehmen.

Wenn ein Objekt eine Minimal- oder Maximaleinstellung enthält, erhält das entsprechende Breiten- oder Höhensymbol zwei Linien, eine auf jeder Seite. Du kannst mit dem Mauszeiger über diese Symbole fahren, um eine Vorschau der Abmessungsgrenzen auf der Arbeitsfläche anzuzeigen.

Wenn du die Auswahl eines Objekts aufhebst oder erneut auswählst, werden die Felder für die minimale und maximale Abmessung im rechten Panel ausgeblendet. Um sie wieder aufzurufen, klicke auf das Breiten- oder Höhensymbol.

Um eine Minimal- oder Maximaleinstellung zu entfernen, öffnest du das Dropdown-Menü Breite oder Höhe und wählst Minimal und Maximal entfernen aus.

Hinweis: Ebenen können nicht sowohl eine maximale Höhe als auch eine festgelegte Anzahl von Linien aufweisen. Wenn du eine maximale Höhe hinzufügst, werden die maximalen Linien auf Auto gesetzt. Wenn du die maximale Höhe der Linien auf eine Zahl setzt, wird die Einstellung für die maximale Höhe der Ebene aufgehoben. Hier erfährst du mehr über maximal Zeilen →

Inhalt dicht umschließen

Mit der Option Hug content (Inhalt dicht umschließen) passt sich ein Auto-Layout-Rahmen an den Inhalt der untergeordneten Objekte an. Der Rahmen erhält die kleinstmöglichen Abmessungen, um die darin befindlichen Objekte zu umschließen. Der festgelegte Objektabstand bleibt erhalten.

Tipp! Doppelklicke auf den vertikalen oder horizontalen Rand des Begrenzungsrahmens eines Auto-Layout-Objekts, um ihn auf Inhalt umschließen festzulegen.

Hinweis: Wenn untergeordnete Objekte innerhalb eines Auto-Layout-Rahmens auf Fill container (Container füllen) eingestellt sind, umschließt der übergeordnete Rahmen die Inhalte nicht mehr dicht, sondern erhält für diese Achse eine feste Abmessung.

Container füllen

Objekte in einem Auto-Layout-Rahmen, der auf Fill container (Container füllen) eingestellt ist, werden an die Breite und/oder Höhe des übergeordneten Rahmens angepasst.

Untergeordnete Objekte eines Auto-Layout-Rahmens werden auch dann auf Container füllen gesetzt, wenn sie manuell auf die volle Breite des übergeordneten Rahmens skaliert werden.

Tipp! Halte ⌥ Option oder Alt gedrückt und doppelklicke auf den vertikalen oder horizontalen Rand des Begrenzungsrahmens eines Auto-Layout-Objekts, um ihn auf Container füllen einzustellen.

Ein Hinweis zu Einschränkungen

Du kannst keine Einschränkungen auf untergeordnete Objekte in einem Auto-Layout-Rahmen anwenden, es sei denn, das Objekt ignoriert den Auto-Layout-Fluss. Stattdessen kannst du mithilfe der Größenänderungs-Eigenschaft definieren, wie Objekte reagieren, wenn sich die Größe des Rahmen oder der Objekte im Rahmen ändert.

Du kannst weiterhin Einschränkungen auf den Auto-Layout-Rahmen selbst anwenden, wenn dieser in einem regulären Rahmen eingebettet ist. Es werden der Bereich Einschränkungen und die Größenänderungsoptionen angezeigt, mit denen du sowohl die Einschränkungen für den Auto-Layout-Rahmen als auch das Größenänderungsverhalten für alle darin enthaltenen Objekte festlegen kannst.

Beispiel: Wenn du einen Satz von Tags mit Auto-Layout erstellt hast, möchtest du ihn möglicherweise an unterschiedliche Bildschirmgrößen anpassen. Mithilfe von Einschränkungen kannst du sicherstellen, dass die Navigationsleiste richtig reagiert, wenn die Größe des übergeordneten Rahmen geändert wird. Durch die Größenänderung kannst du außerdem steuern, wie die Objekte in der Navigationsleiste auf diese Änderungen reagieren.

Ein mobiler Rahmen mit einem Popup-Panel am unteren Rand des Bildschirms. Ein Cursor wählt das Panel aus, klickt auf die Schaltfläche „Einschränkungen“ und ändert die horizontalen Einschränkungen von „links“ in „links und rechts“. Wenn du die Größe des mobilen Rahmens horizontal änderst, wird das Panel erweitert.

Hier erfährst du mehr über Einschränkungen →

Anleitung für Tastenkombinationen

Grundlegende Tastenkombinationen

Aktion	Mac	Windows
Auto-Layout hinzufügen	`⇧ Umschalttaste A`	`⇧ Umschalttaste A`
Auto-Layout vorschlagen	`Strg` `⇧ Umschalttaste A`	`Strg` `Alt` `⇧ Umschalttaste` `A`
Auto-Layout entfernen	`⌥ Wahltaste` `⇧ Umschalttaste A`	`Alt` `⇧ Umschalttaste A`
Bearbeite den Innenabstand auf allen Seiten (vom rechten Panel aus)	`⌘ Befehlstaste` + Klicke auf das Eingabefeld für den Innenabstand	`Strg` + Klicke auf das Eingabefeld für den Innenabstand

Aus dem Ausrichtungsfeld

Klicke auf das Ausrichtungsfeld im rechten Panel und drücke die folgenden Tasten für Folgendes:

Aktion	Mac und Windows
Ausrichtung einstellen	`↓` / `→` / `←` / `↑`
Ausrichtung auf den Rand einstellen	`W` / `A` / `S` / `D`
Grundlinienausrichtung umschalten	`B`
Zu Abstand zwischen Elementen wechseln	`X`

Von der Arbeitsfläche:

Verwende diese Tastaturkürzel beim Ziehen von Ziehpunkten auf der Arbeitsfläche für Folgendes:

Aktion	Mac	Windows
Innenabstand auf gegenüberliegenden Seiten einstellen	`⌥ Option`	`Alt`
Innenabstand auf allen Seiten einstellen	`⌥ Option⇧ Umschalttaste`	`Alt⇧ Umschalttaste`
Stelle den Innenabstand oder den Abstand mit einem großen Nudge ein	`⇧ Umschalttaste`	`⇧ Umschalttaste`

Verwende diese Tastenkürzel und klicke auf bestimmte Bereiche in einem Auto-Layout-Rahmen für Folgendes:

Aktion	Mac	Windows
Innenabstandswert auf gegenüberliegenden Seiten eingeben	`⌥ Option` + Klicke auf den Innenabstandsbereich	`Alt` + Klicke auf den Innenabstandsbereich
Gib die Werte des Innenabstands auf allen Seiten ein	`⌥ Option⇧ Umschalttaste` + Klicke auf den Innenabstandsbereich	`Alt⇧ Umschalttaste` + Klicke auf den Innenabstandsbereich
Inhalt umschließen einstellen	Doppelklicke auf den vertikalen oder horizontalen Rand	Doppelklicke auf den vertikalen oder horizontalen Rand
„Container füllen“ einstellen	`⌥ Option` + Doppelklicke auf den vertikalen oder horizontalen Rand	`Alt` + Doppelklicke auf den vertikalen oder horizontalen Rand