Entdecke die Eigenschaften von Auto-Layout
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.
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.
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.
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!
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 von1,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.
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
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.
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.
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.
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.
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.
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 |
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 (Frames) 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.
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:
- 🚫 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 beliebige Objekte innerhalb des Rahmen 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.
Klicke bei ausgewähltem Auto-Layout-Rahmen in der rechten Seitenleiste auf , um erweiterte 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.
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 als „absolute Position“ bezeichnet. 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-Eigenschaften und -Einstellungen sind für Objekte, die Auto-Layout ignorieren, 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 Element eines Auto-Layout-Rahmens aus und klicke in der rechten Seitenleiste auf .
- Ziehe ein Objekt in einen Auto-Layout-Rahmen, während du die Taste ⌃ Steuerung drückst.
Abstand
Abstand zwischen Elementen
Verwende 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 in der rechten Seitenleiste 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!
Die Innenabstand-Steuerelemente in der rechten Seitenleiste 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 von1,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 in der rechten Seitenleiste, 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.
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
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.
Um Ebenen anhand ihrer Grundlinien auszurichten, wähle die Ebenen aus, die du ausrichten möchtest, und klicke in der rechten Seitenleiste auf , um erweiterte Auto-Layout-Einstellungen zu öffnen. Klicke neben der Grundlinienausrichtung des Textes auf , um die Basislinienausrichtung zu aktivieren.
Tipp! Klicke auf das Ausrichtungsfeld in der rechten Seitenleiste 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. Die Größenänderungseinstellungen können für Objekte auf der X- und Y-Achse einzeln mithilfe der Dropdown-Menüs in der rechten Seitenleiste 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.
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.
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 Maximale 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.
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 in der rechten Seitenleiste 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.
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 |
Innenabstand auf allen Seiten bearbeiten (von der rechten Seitenleiste 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 in der rechten Seitenleiste 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 |