Bevor du anfängst

Wer kann diese Funktion verwenden

Nutzer*innen in jedem Team oder Abo. 

Nutzer*innen mit Schreibzugriff auf eine Datei können Auto-Layout auf Rahmen (Frames) und Objekte anwenden.

Informationen zu Auto-Layout

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.

Auto-Layout ist ein extrem nützliches Feature mit vielen unterschiedlichen Funktionen und Einsatzgebieten. In diesem Artikel zeigen wir dir, wie du einem Rahmen ein automatisches Layout hinzufügst und wie die einzelnen Eigenschaften funktionieren.

Auto-Layout hinzufügen

Du kannst Auto-Layout einem Rahmen oder einer Auswahl von Objekten hinzufügen. Möglich ist dies bei:

• Neuen oder leeren Rahmen
• Rahmen mit Inhalt
• Komponenten und Komponentengruppen
• Gruppen oder anderen Auswahlen von Ebenen und/oder Objekten

Du hast mehrere Möglichkeiten, um das Auto-Layout auf einen ausgewählten Rahmen, eine Komponente oder eine Komponentengruppe anzuwenden:

• Verwende die Tastenkombination Umschalt A.
• Wähle einen Rahmen aus und klicke in der rechten Seitenleiste neben Auto Layout auf .
• Klicke mit der rechten Maustaste auf den Rahmen oder das Objekt und wähle „Add Auto Layout“ (Auto-Layout hinzufügen) aus.

Eigenschaften von Auto-Layout

Rahmen mit Auto-Layout haben andere Eigenschaften als reguläre Rahmen. Wenn du Auto-Layout anwendest, ändert sich das Menü in der rechten Seitenleiste.

Du kannst bei Auto-Layout-Rahmen:

• kein Layout-Raster hinzufügen
• 🚫 keine Einschränkungen auf Objekte in einem Auto-Layout-Rahmen anwenden
• 🚫 keine smarte Auswahl auf Objekte im Rahmen anwenden

Richtung

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

• In vertikaler Richtung kannst du Objekte entlang der y-Achse hinzufügen, entfernen und verschieben. Beispiel: Objekte in einer Liste oder Beiträge innerhalb eines Newsfeeds oder Zeitplans
• In horizontaler Richtung kannst du Objekte entlang der x-Achse hinzufügen, entfernen und verschieben. Beispiel: eine Reihe von Schaltflächen oder Symbolen in einem Navigationsmenü für Mobilgeräte

Derzeit kann jeweils nur eine Richtung, d. h. horizontal oder vertikal, ausgewählt werden. Um Designs zu erstellen, die beide Richtungen verwenden, musst du Auto-Layout-Rahmen kombinieren oder einbetten.

Im Beispiel unten wurde ein horizontaler Auto-Layout-Rahmen in einen vertikalen Auto-Layout-Rahmen eingebettet, um eine Karte mit einem Titel, einer Beschreibung und Uhrzeiten zu erstellen.

Abstand zwischen Elementen

Du kannst den Abstand zwischen Elementen in einem Auto-Layout-Rahmen steuern.

Im Gegensatz zur smarten Auswahl gibt es keine Möglichkeit, den Abstand in der Arbeitsfläche anzupassen. Verwende stattdessen die Abstandsfelder im Abschnitt Auto Layout in der rechten Seitenleiste:

• für horizontalen Abstand
• für vertikalen Abstand

Gib eine Zahl in das Feld ein, ändere die Werte mit den Pfeiltasten oder passe das Feld mit dem Cursor an.

Objektabstand

Mit dem Objektabstand steuerst du den leeren oder weißen Bereich zwischen den untergeordneten Objekten und der Begrenzung eines Auto-Layout-Rahmens. Du kannst für alle Seiten denselben Objektabstand festlegen oder für jede Seite einen anderen Wert wählen.

• Gib in das Feld einen einzelnen Wert ein, um auf allen Seiten den gleichen Abstand festzulegen, oder weise jeder Seite mit CSS-Code einen eigenen Wert zu. Wenn du beispielsweise 1,2,3,4 eingibst, werden die Werte wie folgt festgelegt: oben: 1, rechts: 2, unten: 3 und links: 4. Oder du gibst 1,2 ein, um für oben/unten: 1 und für links/rechts: 2 festzulegen.
• Um manuell für jede Seite einen eigenen Objektabstand festzulegen, klicke auf , um die Einstellungen für die Ausrichtung und Verteilung zu öffnen und jeden Wert einzeln anzupassen.

Ausrichtung

Lege fest, wie untergeordnete Objekte innerhalb eines Auto-Layout-Rahmens ausgerichtet werden sollen. Sowohl die Richtung des Auto-Layout-Rahmens als auch die Verteilung 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 interaktive Raster, um eine von neun Layoutoptionen für die untergeordneten Objekte in einem Rahmen auszuwählen.

Wenn du für die Verteilung Space between (Abstand zwischen) festgelegt hast, kannst du für jede Richtung aus drei Optionen wählen:

• vertikales Auto-Layout: Links, Mitte, Rechts
• horizontales Auto-Layout: Oben, Mitte, Unten

Wenn du für die Verteilung Packed (Dicht) festgelegt hast, kannst du für jede Richtung aus denselben neun Optionen wählen:

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

Verteilung

Nachdem du den untergeordneten Objekten in einem Rahmen Ausrichtungsregeln zugewiesen hast, kannst du festlegen, wie die Objekte im Rahmen verteilt werden sollen.

Klicke im Ausrichtungs-Bedienfeld auf das Pfeilsymbol , um zwischen folgenden Optionen auszuwählen:

• Packed (Dicht): Objekte in einem Rahmen werden gruppiert. Verwende diese Option, um Objekte in einem Rahmen dicht nebeneinander zu platzieren und gemeinsam auszurichten.
• Space between (Abstand zwischen): Der Abstand zwischen den Objekten in einem Rahmen ist gleichmäßig entlang der für den Rahmen festgelegten Richtung und Ausrichtung verteilt. Verwende diese Option, um Objekte innerhalb eines Rahmens zu verteilen.

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 fest, wie sich die Größe des übergeordneten Auto-Layout-Rahmens bei Änderungen an den untergeordneten Objekten anpassen soll. Einstellungen zur Größenänderung von Objekten kannst du über die Dropdown-Menüs und das Größenänderungs-Bedienfeld individuell auf der x- und y-Achse anwenden.

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.

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.

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.

Einschränkungen und Größenänderung

Auf untergeordnete Objekte innerhalb eines Auto-Layout-Rahmens können keine Einschränkungen angewendet werden. Stattdessen hast du die Möglichkeit, festzulegen, wie sich Objekte verhalten, wenn sich die Größe des Rahmens oder der darin enthaltenen Objekte ändert.

Du kannst weiterhin Einschränkungen auf einen Auto-Layout-Rahmen anwenden, wenn dieser in einen regulären Rahmen eingebettet ist. Im Abschnitt Constraints and Resizing (Einschränkungen und Größenänderung) hast du die Möglichkeit, die Einschränkungen für den Auto-Layout-Rahmen und das Verhalten der darin enthaltenen Objekte bei Größenänderungen festzulegen.

Wenn du beispielsweise eine Navigationsleiste mit Auto-Layout erstellt hast, kannst du diese an verschiedene Bildschirmgrößen anpassen. Durch das Festlegen von Einschränkungen stellst du sicher, dass die Navigationsleiste entsprechend reagiert, wenn sich die Größe des übergeordneten Rahmens ändert. Mit der Größenänderung steuerst du, wie die Objekte in der Navigationsleiste auf die Änderungen reagieren.

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

Objekte hinzufügen, bearbeiten und entfernen

Objekte zu einem Auto-Layout-Rahmen hinzufügen

Du kannst Auto-Layout-Rahmen beliebige Ebenen und Objekte hinzufügen.

1. Klicke auf ein Objekt und ziehe es über einen Auto-Layout-Rahmen.
2. Lege mithilfe des blauen Indikators fest, wo das Objekt platziert werden soll.

Auto-Layout-Rahmen einbetten

Du kannst einen Auto-Layout-Rahmen in einen anderen Auto-Layout-Rahmens einbetten. Dies ermöglicht es dir, horizontale und vertikale Layouts zu komplexen Benutzeroberflächen zu kombinieren.

Wenn du einen Auto-Layout-Rahmen einbettest, hat der eingebettete Rahmen über- und untergeordnete Eigenschaften.

Im folgenden Beispiel gibt es vier Auto-Layout-Ebenen:

1. Button (Schaltfläche): Jede Schaltfläche ist ein horizontales Auto-Layout. Dadurch wird die Größe automatisch angepasst, wenn wir die Beschriftung ändern.
2. Button Row (Schaltflächenreihe): Anschließend fügen wir einem anderen horizontalen Auto-Layout zwei Schaltflächen hinzu. Dadurch können Objekte reagieren, wenn wir Änderungen am Inhalt eines gleichgeordneten Objekts vornehmen.
3. Post (Beitrag): Nun fügen wir die Schaltflächen einem vertikalen Auto-Layout mit den anderen Objekten des Beitrags hinzu. Diese beinhalten eine Beschreibung, ein Bild und das Benutzerprofil.
4. Timeline (Zeitachse): Zum Erstellen der Zeitachse wurden einem vertikalen Auto-Layout drei Rahmen hinzugefügt. Der Auto-Layout-Rahmen ist der Rahmen der obersten Ebene, der sich auf der Arbeitsfläche befindet.

Du kannst Auto-Layout-Rahmen auf verschiedene Arten einbetten:

• Ziehe einen Auto-Layout-Rahmen in einen vorhandenen Auto-Layout-Rahmen.
• Erstelle einen neuen Auto-Layout-Rahmen um eine Auswahl von Auto-Layout-Rahmen (und anderen Objekten) herum.

1. Wähle den Auto-Layout-Rahmen und die anderen Ebenen aus, die du einbeziehen möchtest.
2. Wende Auto-Layout mit der Tastenkombination Umschalt + A an.
3. Daraufhin wird um die Auswahl herum ein Rahmen erstellt und Auto-Layout angewendet.

Objekte duplizieren

Du kannst vorhandene Objekte duplizieren, um sie dem Auto-Layout hinzuzufügen. Das Duplikat wird rechts (horizontal) oder unterhalb (vertikal) vom ursprünglichen Objekt eingefügt.

1. Wähle ein untergeordnetes Objekt in einem Auto-Layout-Rahmen aus.
2. Dupliziere es mithilfe des Tastaturbefehls:
   • Mac: ⌘ Command – D
   • Windows: Strg + D

Objekte (neu) anordnen

Du kannst die Reihenfolge ändern, in der Objekte in einem Auto-Layout-Rahmen angezeigt werden. Dies ist nur bei Hauptkomponenten oder in Auto-Layout-Rahmen außerhalb einer Komponente möglich.

1. Wähle das untergeordnete Objekt aus. Wenn die Ebene eingebettet ist, musst du für die Auswahl die Zusatztaste verwenden:
   • Mac: ⌘ Command
   • Windows: Strg
2. Es gibt mehrere Möglichkeiten, Objekte neu anzuordnen:
   • Verwende die Pfeiltasten auf der Tastatur, um das Objekt an eine neue Position zu verschieben.
   • Klicke auf das Objekt und ziehe es an eine neue Position.

Objekte entfernen

So entfernst du ein Objekt aus einer Hauptkomponente oder einem Auto-Layout-Rahmen:

• Ziehe das Objekt aus dem Auto-Layout-Rahmen.
• Klicke auf , um die Sichtbarkeit der Ebene zu ändern.
• Wähle das Objekt aus und drücke Del oder Backspace

Es ist nicht möglich, Ebenen oder Objekte in einer Instanz zu löschen. Wenn du dies versuchst, ändert sich lediglich die Sichtbarkeit der Ebene.

Auto-Layout entfernen

Sobald du das Auto-Layout entfernst, hast du wieder Zugriff auf die regulären Eigenschaften des Rahmens.

Es gibt mehrere Möglichkeiten, um das Auto-Layout zu entfernen:

• Klicke mit der rechten Maustaste auf den Rahmen und wähle Remove auto layout (Auto-Layout entfernen).
• Klicke in der rechten Seitenleiste auf das Symbol  neben Auto layout (Auto-Layout).

Prototypen mit Auto-Layout

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

Übergänge mit Smart-Animation berücksichtigen nicht den Hintergrund eines Rahmens. Wenn du als Übergang Slide in (Hineinschieben) oder Move in (Hineinbewegen) mit Smart-Animation verwenden möchtest, musst du einen Hintergrund hinzufügen. Du kannst ein Rechteck in einem regulären Rahmen erstellen und den Auto-Layout-Rahmen darin platzieren.

Hier erfährst du mehr über Hineinschieben und Hineinbewegen →

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.

Auto-Layout auf Komponenten anwenden

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.

Hauptkomponenten

✅ Vertikale und horizontale Objektabstände
anpassen✅ Abstand zwischen Objekten anpassen
✅ Objekte innerhalb einer Komponente neu anordnen
✅ Neue Objekte hinzufügen

Komponenteninstanzen

✅ Vertikale und horizontale Objektabstände
anpassen✅ Abstand zwischen Objekten anpassen
🚫 Objekte innerhalb einer Komponente neu anordnen
🚫 Neue Objekte hinzufügen

Aktualisierungen der Auto-Layout-Funktion

Aktualisierung der Ausrichtung bei älteren Auto-Layout-Rahmen

In früheren Auto-Layout-Versionen wurde die Ausrichtung auf der Ebene der untergeordneten Objekte gesteuert. Dadurch konnten in einem Auto-Layout-Rahmen verschiedene untergeordnete Objekte unterschiedliche Ausrichtungen haben.

Da die Option wenig genutzt wurde, haben wir die Steuerung der Ausrichtung im November 2020 in den übergeordneten Rahmen verlegt, um die Funktionsweise von Auto-Layout zu vereinfachen. Seit der letzten Aktualisierung müssen alle untergeordneten Objekte einheitlich ausgerichtet sein.

Wenn du Auto-Layout-Rahmen mit untergeordneten Objekten hast, die vor November 2020 erstellt wurden und unterschiedlich ausgerichtet sind, siehst du möglicherweise Folgendes:

Um die Auto-Layout-Werte anzupassen, aktualisiere zunächst den Rahmen, um alle untergeordneten Objekte einheitlich auszurichten. Hier ein Vorher-Nachher-Vergleich:

• Figma versucht, das ursprüngliche Design optisch zu erhalten. Häufig werden zu diesem Zweck Zwischenrahmen hinzugefügt, um unterschiedliche Ausrichtungen zu ermöglichen. Diese Rahmen werden als Auto-added (Automatisch hinzugefügt) benannt.
• Du kannst diese Änderung sofort rückgängig machen. Wenn du jedoch außerhalb des Fensters klickst oder die Seite aktualisierst, kannst du die Aktualisierung später nicht mehr rückgängig machen.
• Überprüfe nach dem Aktualisieren einer Hauptkomponente, ob deine Instanzen ordnungsgemäß aktualisiert wurden.

So erstellst du ein Design mit unterschiedlich ausgerichteten untergeordneten Objekten:

1. Wähle das Objekt aus, dessen Ausrichtung du ändern möchtest.
2. Wende Auto-Layout mit der Tastenkombination Umschalt A auf das Objekt an.
3. Lege für den neu erstellten Rahmen für die Achse, auf der er ausgerichtet werden soll, die Option Fill container (Container auffüllen) fest.
4. Lege die Ausrichtung nach Wunsch fest.