Leitfaden zum Auto-Layout

Bevor du anfängst

Wer kann diese Funktion verwenden?

Verfügbar in allen Abos

Verfügbar in Figma Design und Figma Sites. Der Zugriff auf das Auto-Layout ist auch im Design-Modus von Figma Slides und Figma Buzz möglich.

Jede Person mit Schreibzugriff auf eine Datei kann Auto-Layout verwenden

Auto-Layout kann auf Frames angewendet werden, sodass Designs dynamisch auf Inhaltsänderungen reagieren, damit du Zeit sparst und deine Designs reaktionsfähig und anpassungsfähig sind.

Elemente in einem Auto-Layout-Rahmen werden automatisch auf der Basis von Richtung, Abstand, Innenabstand, Ausrichtung und anderen Auto-Layout-Eigenschaften angeordnet. Wenn sich der Inhalt ändert oder Elemente hinzugefügt, entfernt oder in der Größe angepasst werden, passt sich das Layout automatisch an, ohne dass eine manuelle Neupositionierung erforderlich ist.

Verwende Auto-Layout, um responsive Designs zu erstellen. Beispielsweise:

• Schaltflächen, deren Größe sich automatisch anpasst, wenn du Beschriftungen hinzufügst
• Listen, die sich anpassen, wenn Elemente hinzugefügt, entfernt oder ausgeblendet werden
• Bento-Boxen und Dashboards
• Eine Webseite, die sich an unterschiedliche Bildschirmgrößen anpasst

Auto-Layout hinzufügen

Um mit der Verwendung von Auto-Layout in Designs zu beginnen, wähle eine oder mehrere Ebenen aus und drücke ⇧ Umschalttaste A oder klicke in der rechten Seitenleiste auf Auto-Layout hinzufügen. Figma ermittelt dann, welchen Auto-Layout-Fluss– vertikal, horizontal oder Raster – du verwenden möchtest. Du kannst jederzeit zu einem anderen Fluss wechseln.

Erfahre mehr über das Umschalten von Auto-Layout in Designs.

Einen Auto-Layout-Fluss auswählen

Sobald Auto-Layout auf einen Frame angewandt wird, kannst du aus drei Optionen wählen, um den Fluss und die Anordnung der Objekte im Frame zu bestimmen:

• Vertical (Vertikal)
• Horizontal
• Raster

Horizontal und vertikal

Die Option „Vertikal“ platziert Objekte in deinem Frame entlang der Y-Achse. Alle Objekte, die du hinzufügst, entfernst oder neu anordnest, werden der Y-Achse folgen. Beispiel: Mehrere Listenelemente in einer Aufgabenliste oder Beiträge in einem Newsfeed oder einer Timeline.

Die Option „Horizontal“ platziert Objekte in deinem Frame entlang der X-Achse. Alle Objekte, die du hinzufügst, entfernst oder neu anordnest, werden der X-Achse folgen. Beispiel: Eine Reihe von Schaltflächen oder Symbole in einem mobilen Navigationsmenü.

Wenn du die horizontale Option ausgewählt hast, stehen Zeilenumbrüche zur Verfügung. Zeilenumbrüche verschieben alle überlaufenden Objekte in die nächste Zeile in deinem Frame.

Die horizontalen und vertikalen Auto-Layout-Optionen besitzen noch weitere Eigenschaften wie Größenänderung, Abstände, Ausrichtung und mehr.

Mehr zu den horizontalen und vertikalen Auto-Layout-Flüssen

Raster Offene Beta-Version

Die Raster-Option platziert Objekte in Spalten und Zeilen, sodass du Galerien, Bento-Boxen und Dashboard-Layouts erstellen kannst, die auf unterschiedliche Frame-Größen reagieren und sich anpassen.

Im Gegensatz zur Umbrucheinstellung für horizontale und vertikale Flüsse werden Objekte in einem Raster nicht in die nächste Zeile umgebrochen. Stattdessen werden sie in einem „Raster“ angeordnet und können sich über mehrere Zeilen oder Spalten erstrecken.

Raster-Auto-Layout-Rahmen verfügen über zusätzliche Eigenschaften wie die Größenanpassung von Spalten und Zeilen, Erweiterung und vieles mehr.

Mehr zur Verwendung von Auto-Layout-Flüssen im Raster

Abstandseigenschaften anpassen

Die Eigenschaften, die in deinem Auto-Layout-Rahmen verfügbar sind, richten sich danach, welcher Auto-Layout-Fluss verwendet wird. Alle Flüsse haben jedoch einige wichtige Abstandseigenschaften gemeinsam:

Der Innenabstand ist der leere oder weiße Raum zwischen dem Rand eines übergeordneten Auto-Layout-Rahmens und seinen Objekten. Du kannst den Innenabstand gleichmäßig vertikal und horizontal festlegen oder unterschiedliche Werte für den Innenabstand oben, rechts, unten und links wählen.

Die Lücke ist der Abstand zwischen Objekten in einem Auto-Layout-Rahmen. Verwende einen Zahlenwert, um genau festzulegen, wie weit die Objekte voneinander entfernt sein sollen. Bei vertikalen und horizontalen Auto-Layout-Rahmen hast du auch die Möglichkeit, den Abstand zwischen den Elementen auf Auto (automatisch) zu setzen, wodurch die Objekte den größtmöglichen Abstand zueinander erhalten.

Reaktionsfähigkeit durch Größenänderung anpassen

Eine der leistungsfähigsten Funktionen des Auto-Layouts ist die Fähigkeit, Objekte mithilfe der Größenänderungseigenschaft so anzupassen, dass sie ihre Abmessungen an die umgebenden Einstellungen und Objekte anpassen. Du kannst das Größenänderungsverhalten eines übergeordneten Auto-Layout-Rahmens festlegen, um zu bestimmen, wie er sich basierend auf Änderungen an seinem Inhalt anpasst und umgekehrt.

Einstellungen zur Größenänderung können sowohl auf der X- als auch auf der Y-Achse über die Dropdown-Menüs für Breite und Höhe im rechten Panel 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.

Eigenschaft zur Größenänderung	Anwendbar auf ...	Verhalten von Dimensionen
Inhalt umschließen	Auto-Layout-Rahmen	Das Objekt passt seine Größe auf der Basis der untergeordneten Objekte an
Container füllen	Untergeordnete Objekte von Auto-Layout-Rahmen	Das Objekt füllt den gesamten verfügbaren Bereich aus
Fixierte Breite/Höhe	Beide	Objekt bleibt fixiert
Minimale Breite/Höhe	Beide	Das Objekt ist gleich oder größer als das Minimum
Maximale Breite/Höhe	Beide	Das Objekt ist gleich oder kleiner als das Maximum

Inhalt umschließen

Verwende Inhalt umschließen für jeden Auto-Layout-Rahmen, damit er die kleinstmöglichen Abmessungen um seine untergeordneten Objekte beibehält und dabei alle Abstandswerte respektiert.

Nehmen wir zum Beispiel an, du hast innerhalb eines Rahmens, der Auto-Layout verwendet, eine Textebene, die 40 Pixel breit ist. Der Innenabstand des Rahmens ist links und rechts auf 10 Pixel festgelegt. Da die Größenanpassung auf „Inhalt umschließen“ eingestellt ist, beträgt die Breite des Frames 60 Pixel. Wenn die Textebene aktualisiert wird und jetzt 50 Pixel breit ist, wird die Breite des Rahmens auf 70 Pixel geändert.

„Inhalte umschließen“ kann nur auf Auto-Layout-Rahmen angewendet werden.

Container füllen

Ebenen, die auf „Container füllen“ eingestellt sind, dehnen sich aus, um den gesamten verfügbaren Platz in ihrem übergeordneten Rahmen einzunehmen, wobei alle Abstandswerte berücksichtigt werden.

„Container füllen“ kann nur auf untergeordnete Objekte von Auto-Layout-Rahmen angewendet werden und ist für Frames der obersten Ebene nicht verfügbar.

Untergeordnete Objekte eines Auto-Layout-Rahmens werden ebenfalls auf Container füllen eingestellt, wenn ihre Größe manuell an den gesamten verfügbaren Platz des übergeordneten Rahmens angepasst wird.

Feste Breite oder Höhe

Lege eine feste Breite oder Höhe für eine Ebene fest, um sicherzustellen, dass ihre Abmessungen unabhängig von Änderungen an den umgebenden Abstandswerten oder unter-, über- oder gleichgeordneten Objekten fest und unverändert bleiben.

„Fixiert“ kann auf jeden Auto-Layout-Rahmen und dessen untergeordnete Elemente angewendet werden.

Wenn du die Größe einer Ebene manuell änderst oder einen Wert für das Feld „Breite“ oder „Höhe“ angibst, wird die Eigenschaft für die Größenänderung auf der jeweiligen Achse auf „Fest“ gesetzt.

Nehmen wir zum Beispiel an, du hast eine Schaltflächenkomponente, die Auto-Layout verwendet und deren Breite auf „Inhalt umschließen“ eingestellt ist. Wenn du einen Wert wie 125 in das Feld „Breite“ eingibst, wird die Eigenschaft zum Ändern der Größe auf Fixierte Breite geändert.

Minimale und maximale Abmessungen

Lege die minimale oder maximale Breite und Höhe für jeden Auto-Layout-Rahmen und seine untergeordneten Elemente fest.

• Öffne das Dropdown-Menü „Breite“ mit den Optionen „Minimale Breite hinzufügen“ und „Maximale Breite hinzufügen“
• Ö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.

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.

Auto-Layout ignorieren

Ein Objekt, bei dem 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 Frame 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 Bedienfeld
• Ziehe ein Objekt in einen Auto-Layout-Rahmen, während du die Taste  ⌃ Steuerung drückst.

Auto-Layout-Rahmen einbetten

Die wahre Stärke der Reaktionsfähigkeit des Auto-Layouts zeigt sich, wenn Größenänderungsverhalten über verschachtelte Auto-Layout-Rahmen hinweg kombiniert werden.

Verschachtelung meint das Einfügen einer Ebene in eine andere Ebene, z. B. das Platzieren einer Schaltfläche in einer Komponente oder einer Form in einem Frame.

Durch die Einbettung eines Auto-Layout-Rahmens in einen anderen Auto-Layout-Rahmen kannst du horizontale, vertikale und Raster-Auto-Layout-Optionen kombinieren, um komplexe Benutzeroberflächen zu gestalten. Die eingebetteten Frames besitzen sowohl übergeordnete als auch untergeordnete Eigenschaften, wobei jeder Frame seine eigenen separaten Werte für Innenabstand und Zwischenabstand hat, was mehrdimensionale Layouts mit Elementen ermöglicht, die in verschiedene Richtungen und Anordnungen fließen.

Erfahre, wie du mehrdimensionale Auto-Layout-Flüsse erstellst.

Überlegungen zu anderen Funktionen

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.

Als Beispiel: Nehmen wir an, wir haben eine App zur Protokollierung von Gewohnheiten, bei der jede Gewohnheit einen Analysebildschirm mit einem Kalenderverlauf der abgeschlossenen Gewohnheiten und ein Feld am unteren Rand für Notizen zu einem bestimmten Tag enthält. Dieser Bildschirm verwendet Auto-Layout, aber das Notizen-Bedienfeld ignoriert den Auto-Layout-Fluss. Wir können die festgelegten Einschränkungen Unten und Links und Rechts verwenden, um sicherzustellen, dass das Notizen-Bedienfeld korrekt reagiert, wenn der übergeordnete Frame in der Größe verändert wird.

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

Komponenten und Instanzen

Da Komponenten Rahmen sind, kannst du Auto-Layout darauf anwenden. Dabei muss Auto-Layout auf jede Komponente einzeln angewendet werden. Derzeit ist es nicht möglich, es gleichzeitig für mehrere Komponenten zu aktivieren.

Aktion	Hauptkomponente	Instanz
Vertikaler und horizontaler Innenabstand anpassen	✓	✓
Abstand dazwischen anpassen	✓	✓
Ebenen neu anordnen	✓	✕
Neue Ebenen hinzufügen	✓	✕
Löschen oder Entfernen von Ebenen	✓	(Blendet nur Ebenen aus)

Prototypen mit Auto-Layout

Beim Erstellen von Prototypen mit Auto-Layout sind ein paar Dinge zu beachten.

Smart-Animation-Übergänge berücksichtigen nicht den Hintergrund eines Frames. Wenn du als Übergang Einschieben oder Hereinbewegen mit Smart-Animation verwenden möchtest, musst du einen Hintergrund hinzufügen. Du kannst ein Rechteck in einem regulären Frame erstellen und den Auto-Layout-Rahmen darin platzieren. Hier erfährst du mehr über Einschieben und Hereinbewegen

Wenn du einen Überhang auf einen Rahmen anwenden möchtest, muss der Inhalt über die Rahmenbegrenzung hinausgehen.

Da die Abmessungen eines übergeordneten Auto-Layout-Rahmens inhaltsgesteuert sind, wird die Größe an die Objekte angepasst. Um beim Scrollen ein Overflow-Verhalten zu replizieren, wende das Auto-Layout in einem regulären Rahmen an.

Textebenen, maximale Höhe und maximale Zeilen

Textebenen können nicht sowohl eine maximale Höhe als auch eine festgelegte Anzahl von maximalen Zeilen haben. 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.

Mehr über maximale Zeilen erfahren.

Textgröße ändern

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.

Mehr zur Größenänderung von Text

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

Ressourcen

Artikel

• Artikel: Auto-Layout in einem Design wechseln
  Bist du bereit, Auto-Layout zu verwenden? Erfahre, wie du Auto-Layout für Frames und Ebenen verwendest, damit du deine Designs responsiv gestalten kannst.
• Artikel: Die horizontalen oder vertikalen Flüsse im Auto-Layout verwenden
  Erfahre mehr über die Eigenschaften, die für die horizontalen und vertikalen Flüsse im Auto-Layout verfügbar sind.
• Artikel: Das Raster im Auto-Layout-Fluss verwenden
  Erfahre, wie du mit Spalten, Zeilen und Zellen im Raster-Layout-Fluss arbeitest.
• Artikel: Mehrdimensionale Auto-Layout-Flüsse erstellen
  Kombiniere mehrere Auto-Layout-Flüsse, um vollständig responsive Komponenten und Bildschirme zu erstellen.

Projekte und praxisorientiertes Lernen

• Tutorial-Playlist von Figma: Erfahre, wie du flexible Designs und Komponenten erstellst
  Diese Playlist enthält Video-Tutorials, die die Grundlagen des Auto-Layouts, die Anwendung des Auto-Layouts auf Designs sowie praktische Tutorials für weitere Übungen behandeln.
• Community-Datei: Auto-Layout-Testumgebung
  Hol dir eine Kopie der Auto-Layout-Testumgebungsdatei, um zu üben.
• Community-Datei: Raster-Testumgebung
  Hol dir eine Kopie der Raster-Auto-Layout-Testumgebungsdatei, um zu üben.
• Projekt: Erstelle ein responsives Kartendesign mit Auto-Layout und Einschränkungen
  In diesem Projekt lernst du, wie du ein responsives Kartendesign für eine Podcast-App mithilfe von Auto-Layout, Einschränkungen, Komponenten und Formwerkzeugen erstellst.