Entdecke die Eigenschaften von Auto-Layout

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.

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.

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

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 von 1,2 setzt die Werte auf oben/unten: 1 und links/rechts: 2.

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

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.

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.

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.

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.

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.

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