Auto-Layout zu einem Entwurf hinzufügen
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 in allen Abos
Nutzer*innen mit Schreibzugriff auf eine Datei können Auto-Layout auf Rahmen und Objekte anwenden.
Verwende Auto-Layout, um responsive Designs zu erstellen, die Füllungen einfügen, schrumpfen und Inhalte neu anpassen. Zum Beispiel:
- 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.
Hinweis: Dieser Artikel behandelt, wie man Auto-Layout zu Designs hinzufügt und wie man untergeordnete Objekte in einem Auto-Layout-Fluss neu anordnet. Um mehr über Größenänderung, Abstände, Ausrichtung und andere Eigenschaften von Auto-Layout zu erfahren, besuche Eigenschaften von Auto-Layout erkunden →
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 die absolute Position des Objekts nicht aktiviert ist
- 🚫 Smarte Auswahl auf Objekte innerhalb des Rahmens anwenden
Auto-Layout hinzufügen
Du kannst Auto-Layout einem Rahmen oder einer Auswahl von Objekten hinzufügen. Dazu gehören:
- Neuen oder leeren Rahmen
- Rahmen mit Inhalt
- Komponenten und Komponentengruppen
- Gruppen oder anderen Auswahlen von Ebenen und/oder Objekten
Es gibt mehrere Möglichkeiten, einer Auswahl ein Auto-Layout hinzuzufügen:
- Verwende die Tastenkombination ⇧ Umschalttaste A.
- Klicke im rechten Bereich auf neben Auto-Layout.
- Klicke mit der rechten Maustaste auf einen Rahmen oder ein Objekt und wähle Auto-Layout hinzufügenaus.
Sobald du das Auto-Layout verwendest, werden eingebettete Objekte auf automatischen Abstand zwischen, Container füllen und zentriert ausgerichtet eingestellt. Erfahre mehr über die verschiedenen Eigenschaften des Auto-Layouts →
Hinweis: Auto-Layout wird nur für Rahmen unterstützt. Wenn du Objekte auswählst, die keinen Rahmen haben, fügt Figma ihnen automatisch einen Auto-Layout-Rahmen hinzu.
Auto-Layout vorschlagen
Mit der Funktion „Auto-Layout vorschlagen“ kannst du ein Design mit nur einem Mausklick responsiv gestalten.
Wenn du Auto-Layout vorschlagen verwendest, versucht Figma zu bestimmen, welche Objekte in einem Rahmen oder einer Komponente in einem Auto-Layout-Rahmen platziert werden sollen, und fügt dann so viele Auto-Layout-Rahmen wie nötig hinzu, um das gesamte Design responsiv zu gestalten. Diese Auto-Layout-Rahmen werden alle auf einmal erstellt und versuchen gleichzeitig, die Platzierung deines Designs beizubehalten.
So sparst du Zeit, sodass du den Auto-Layout-Rahmen nicht mühsam Rahmen für Rahmen hinzuzufügen musst.
Hinweis: „Auto-Layout vorschlagen“ kann mäßig komplexe Designs, wie Karten, Navigationsleisten oder mobile Bildschirme, verarbeiten. Wenn du mit einem großen oder komplexen Design, z. B. einer Website, arbeitest, verwende die Funktion „Auto-Layout vorschlagen“ gesammelt.
Du kannst von mehreren Stellen aus auf diese Option zugreifen:
- Verwende die Tastenkombination:
- Mac: ⌃ Strg ⇧ Umschalttaste A
- Windows ⌃ Strg Alt ⇧ Umschalttaste A
- Klicke mit der rechten Maustaste auf den Rahmen oder das Objekt und gehe zu Weitere Layoutoptionen > Auto-Layout vorschlagen
- Wähle Automatisches Layout vorschlagen aus dem Menü Aktionen
Nachdem du diese Aktion ausgeführt hast, werden alle eingebetteten Auto-Layout-Rahmen, die erstellt wurden, mit einem blauen Punkt im Ebenen-Abschnitt im linken Tab angezeigt.
Hinweis: Gelegentlich kann es vorkommen, dass sich ein Objekt in einem anderen Auto-Layout-Rahmen befindet, als du beabsichtigt hast, oder dass es horizontal ausgerichtet ist, obwohl du es vertikal haben wolltest. Die Funktion „Auto-Layout vorschlagen“ wird vielleicht nicht immer richtig sein, aber sie dient der Beschleunigung deines Workflows.
Für Elemente, die etwas komplizierter sind, empfehlen wir, die eingebetteten Elemente einzurahmen, zu gruppieren oder mit Auto-Layout zu versehen, bevor du Auto-Layout vorschlagen auf den übergeordneten Rahmen anwendest.
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.
- Klicke auf ein Objekt und ziehe es über einen Auto-Layout-Rahmen.
- Lege mithilfe des blauen Indikators fest, wo das Objekt platziert werden soll.
Hinweis: Die Größe des Objekts bestimmt, ob es dem Auto-Layout-Rahmen hinzugefügt werden kann. Wenn ein Objekt aufgrund einer seiner Abmessungen größer als der übergeordnete Rahmen ist, wird die Option zum Hinzufügen des Objekts zum Auto-Layout nicht angezeigt.
Verwende die Zusatztaste, um das Standardverhalten von Figma zu umgehen und einem Auto-Layout größere Objekte hinzuzufügen. Oder, um Objekte zu einem eingebetteten Auto-Layout hinzuzufügen:
- Mac: ⌘ Command
- Windows: Strg
Mehr über übergeordnete, untergeordnete und gleichgestellte Beziehungen erfahren →
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:
- Button (Schaltfläche): Jede Schaltfläche ist ein horizontales Auto-Layout. Dadurch wird die Größe automatisch angepasst, wenn wir die Beschriftung ändern.
- 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.
- 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.
- 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.
- Wähle den Auto-Layout-Rahmen und die anderen Ebenen aus, die du einbeziehen möchtest.
- Füge Auto-Layout mit der Tastenkombination ⇧ Umschalttaste A hinzu.
- Daraufhin wird um die Auswahl herum ein Rahmen erstellt und Auto-Layout angewendet.
Tipp! Du kannst die standardmäßige angewendete Einbettung umgehen. Halte dafür die Zusatztaste gedrückt, um ein Objekt im aktuellen Rahmen zu behalten oder zu verhindern, dass es eingebettet wird.
- Mac: ⌘ Command
- Windows: Strg
Mehr über übergeordnete, untergeordnete und gleichgestellte Beziehungen erfahren →
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.
- Wähle ein untergeordnetes Objekt in einem Auto-Layout-Rahmen aus.
- Dupliziere es mithilfe des Tastaturbefehls:
- Mac: ⌘ Befehlstaste D
- Windows: Strg D
Objekte (neu) anordnen
Hinweis: Du kannst Objekte in einer Instanz nicht neu anordnen. Du musst die Reihenfolge des Objekts in der Hauptkomponente ändern oder die Instanz lösen, um Objekte neu anzuordnen. Auto-Layout in Komponenten ↓
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.
- Wähle das untergeordnete Objekt aus. Wenn die Ebene eingebettet ist, musst du für die Auswahl die Zusatztaste verwenden:
- Mac: ⌘ Command
- Windows: Strg
- 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 in der rechten Seitenleiste neben Darstellung oder in der linken Seitenleiste neben Ebene, um die Sichtbarkeit der Ebene umzuschalten
- 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.
Tipp! Wenn du die Sichtbarkeit einer Ebene oder eines Objekts änderst, wird diese(s) im Auto-Layout-Rahmen ausgeblendet. Wenn du an der Stelle, an der das Objekt sein sollte, einen leeren Bereich haben möchtest, kannst du stattdessen die Deckkraft des Objekts ändern. Setze diese in der rechten Seitenleiste unter Ebene auf 0 %.
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.
- Verwende die folgenden Tastaturbefehle:
- Mac: ⌥ Wahltaste⇧ UmschalttasteA
- Windows: Alt⇧ UmschalttasteA
Tipp: Du kannst das Auto-Layout von Deinem aktuell ausgewählten Frame der obersten Ebene und all seinen eingebetteten Objekten entfernen, indem Du Gesamtes Auto-Layout entfernen unter Aktionen verwendest.
Andere Überlegungen
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 Slide in (Einschieben) 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. Übergänge 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.
Hinweis: Die Präsentationsansicht unterstützt standardmäßig das Scrollen langer Rahmen. Der Workaround ist nur erforderlich, wenn du Inhalte abschneiden möchtest.
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) |
Du möchtest Instanzen Icons hinzufügen? Wir empfehlen, der Hauptkomponente ein Platzhaltersymbol mit einer Deckkraft von 0 % hinzuzufügen. Anschließend kannst du das Symbol gegen eine andere Komponente in deiner Bibliothek austauschen.
Vor dem Start
Wer kann diese Funktion verwenden?
Verfügbar bei allen Abos
Nutzer*innen mit Schreibzugriff auf eine Datei können Auto-Layout auf Rahmen und Objekte anwenden.
Verwende Auto-Layout, um responsive Designs zu erstellen, die Füllungen einfügen, schrumpfen oder Inhalte neu anpassen. Zum Beispiel:
- 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.
Hinweis: Dieser Artikel behandelt, wie man Auto-Layout zu Designs hinzufügt und wie man untergeordnete Objekte in einem Auto-Layout-Fluss neu anordnet. Um mehr über Größenänderung, Abstände, Ausrichtung und andere Eigenschaften von Auto-Layout zu erfahren, besuche Eigenschaften von Auto-Layout erkunden →
Auto-Layout-Rahmen haben andere Eigenschaften als normale Rahmen. Wenn du das Auto-Layout anwendest, ändert sich das Menü in der rechten Seitenleiste. 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 die absolute Position des Objekts nicht aktiviert ist
- 🚫 Smarte Auswahl auf Objekte innerhalb des Rahmens anwenden
Auto-Layout hinzufügen
Du kannst Auto-Layout einem Rahmen oder einer Auswahl von Objekten hinzufügen. Dazu gehören:
- Neuen oder leeren Rahmen
- Rahmen mit Inhalt
- Komponenten und Komponentengruppen
- Gruppen oder anderen Auswahlen von Ebenen und/oder Objekten
Es gibt mehrere Möglichkeiten, einem ausgewählten Rahmen oder einer Komponente ein Auto-Layout hinzuzufügen:
- Verwende die Tastenkombination ⇧ Umschalttaste A.
- Wähle einen Rahmen aus und klicke in der rechten Seitenleiste neben Auto-Layout auf.
- Klicke mit der rechten Maustaste auf einen Rahmen oder ein Objekt und wähle Auto-Layout hinzufügenaus.
Sobald du das Auto-Layout verwendest, werden eingebettete Objekte auf automatischen Abstand zwischen, Container füllen und zentriert ausgerichtet eingestellt. Erfahre mehr über die verschiedenen Eigenschaften des Auto-Layouts →
Hinweis: Auto-Layout wird nur für Rahmen unterstützt. Wenn du Objekte auswählst, die keinen Rahmen haben, fügt Figma ihnen automatisch einen Auto-Layout-Rahmen hinzu.
Auto-Layout vorschlagen
Mit der Funktion „Auto-Layout vorschlagen“ kannst du ein Design mit nur einem Mausklick responsiv gestalten.
Wenn du Auto-Layout vorschlagen verwendest, versucht Figma zu bestimmen, welche Objekte in einem Rahmen oder einer Komponente in einem Auto-Layout-Rahmen platziert werden sollen, und fügt dann so viele Auto-Layout-Rahmen wie nötig hinzu, um das gesamte Design responsiv zu gestalten. Diese Auto-Layout-Rahmen werden alle auf einmal erstellt und versuchen gleichzeitig, die Platzierung deines Designs beizubehalten.
So sparst du Zeit, sodass du den Auto-Layout-Rahmen nicht mühsam Rahmen für Rahmen hinzuzufügen musst.
Hinweis: „Auto-Layout vorschlagen“ kann mäßig komplexe Designs, wie Karten, Navigationsleisten oder mobile Bildschirme, verarbeiten. Wenn du mit einem großen oder komplexen Design, z. B. einer Website, arbeitest, verwende die Funktion „Auto-Layout vorschlagen“ gesammelt.
Du kannst von mehreren Stellen aus auf diese Option zugreifen:
- Verwende die Tastenkombination:
- Mac: ⌃ Strg ⇧ Umschalttaste A
- Windows ⌃ Strg Alt ⇧ Umschalttaste A
- Klicke mit der rechten Maustaste auf den Rahmen oder das Objekt und gehe zu Weitere Layoutoptionen > Auto-Layout vorschlagen
- Wähle Automatisches Layout vorschlagen aus dem Menü Aktionen
Nachdem du diese Aktion ausgeführt hast, werden alle eingebetteten Auto-Layout-Rahmen, die erstellt wurden, mit einem blauen Punkt im Ebenen-Abschnitt im linken Tab angezeigt.
Hinweis: Gelegentlich kann es vorkommen, dass sich ein Objekt in einem anderen Auto-Layout-Rahmen befindet, als du beabsichtigt hast, oder dass es horizontal ausgerichtet ist, obwohl du es vertikal haben wolltest. Die Funktion „Auto-Layout vorschlagen“ wird vielleicht nicht immer richtig sein, aber sie dient der Beschleunigung deines Workflows.
Für Elemente, die etwas komplizierter sind, empfehlen wir, die eingebetteten Elemente einzurahmen, zu gruppieren oder mit Auto-Layout zu versehen, bevor du Auto-Layout vorschlagen auf den übergeordneten Rahmen anwendest.
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.
- Klicke auf ein Objekt und ziehe es über einen Auto-Layout-Rahmen.
- Lege mithilfe des blauen Indikators fest, wo das Objekt platziert werden soll.
Hinweis: Die Größe des Objekts bestimmt, ob es dem Auto-Layout-Rahmen hinzugefügt werden kann. Wenn ein Objekt aufgrund einer seiner Abmessungen größer als der übergeordnete Rahmen ist, wird die Option zum Hinzufügen des Objekts zum Auto-Layout nicht angezeigt.
Verwende die Zusatztaste, um das Standardverhalten von Figma zu umgehen und einem Auto-Layout größere Objekte hinzuzufügen. Oder, um Objekte zu einem eingebetteten Auto-Layout hinzuzufügen:
- Mac: ⌘ Command
- Windows: Strg
Mehr über übergeordnete, untergeordnete und gleichgestellte Beziehungen erfahren →
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:
- Button (Schaltfläche): Jede Schaltfläche ist ein horizontales Auto-Layout. Dadurch wird die Größe automatisch angepasst, wenn wir die Beschriftung ändern.
- 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.
- 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.
- 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.
- Wähle den Auto-Layout-Rahmen und die anderen Ebenen aus, die du einbeziehen möchtest.
- Füge Auto-Layout mit der Tastenkombination ⇧ Umschalttaste A hinzu.
- Daraufhin wird um die Auswahl herum ein Rahmen erstellt und Auto-Layout angewendet.
Tipp! Du kannst die standardmäßige angewendete Einbettung umgehen. Halte dafür die Zusatztaste gedrückt, um ein Objekt im aktuellen Rahmen zu behalten oder zu verhindern, dass es eingebettet wird.
- Mac: ⌘ Command
- Windows: Strg
Mehr über übergeordnete, untergeordnete und gleichgestellte Beziehungen erfahren →
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.
- Wähle ein untergeordnetes Objekt in einem Auto-Layout-Rahmen aus.
- Dupliziere es mithilfe des Tastaturbefehls:
- Mac: ⌘ Befehlstaste D
- Windows: Strg D
Objekte (neu) anordnen
Hinweis: Du kannst Objekte in einer Instanz nicht neu anordnen. Du musst die Reihenfolge des Objekts in der Hauptkomponente ändern oder die Instanz lösen, um Objekte neu anzuordnen. Auto-Layout in Komponenten ↓
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.
- Wähle das untergeordnete Objekt aus. Wenn die Ebene eingebettet ist, musst du für die Auswahl die Zusatztaste verwenden:
- Mac: ⌘ Command
- Windows: Strg
- 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.
Tipp! Wenn du die Sichtbarkeit einer Ebene oder eines Objekts änderst, wird diese(s) im Auto-Layout-Rahmen ausgeblendet. Wenn du an der Stelle, an der das Objekt sein sollte, einen leeren Bereich haben möchtest, kannst du stattdessen die Deckkraft des Objekts ändern. Setze diese in der rechten Seitenleiste unter Layer (Ebene) auf 0 %.
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).
- Verwende die folgenden Tastaturbefehle:
- Mac: ⌥ Wahltaste⇧ UmschalttasteA
- Windows: Alt⇧ UmschalttasteA
Tipp: Du kannst das Auto-Layout von Deinem aktuell ausgewählten Frame der obersten Ebene und all seinen eingebetteten Objekten entfernen, indem Du Gesamtes Auto-Layout entfernen unter Aktionen verwendest.
Andere Überlegungen
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 Slide in (Einschieben) 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. Übergänge 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.
Hinweis: Die Präsentationsansicht unterstützt standardmäßig das Scrollen langer Rahmen. Der Workaround ist nur erforderlich, wenn du Inhalte abschneiden möchtest.
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) |
Du möchtest Instanzen Icons hinzufügen? Wir empfehlen, der Hauptkomponente ein Platzhaltersymbol mit einer Deckkraft von 0 % hinzuzufügen. Anschließend kannst du das Symbol gegen eine andere Komponente in deiner Bibliothek austauschen.