Auto Layout ist ein unverzichtbares Tool für jeden Designer und Figma-Benutzer. Mit dieser Funktion können Sie Änderungen wie die Größenänderung oder Neupositionierung von Rahmen und Objekten vornehmen. Mit Auto Layout können Sie beispielsweise die Höhe und das Gewicht eines Elements mit einer automatischen Einstellung anpassen und so Ihren Arbeitsaufwand halbieren.
Da sich die Bildschirmgröße je nach Gerät oder Browser ändert, mit dem der Benutzer auf die Website zugreift, passt Auto Layout die Elemente innerhalb der Rahmen an diese Änderungen an. Dadurch wirken Layout und Struktur präziser und harmonischer. Lesen Sie weiter, um zu erfahren, wie Sie Auto Layout in Figma und seine Funktionen verwenden.
Verwenden des automatischen Layouts
Um Auto Layout und alle seine Funktionen nutzen zu können, müssen Sie es zunächst einem Rahmen hinzufügen, an dem Sie arbeiten. Dabei kann es sich um einen neuen Rahmen oder einen Rahmen mit Inhalt, Objekten und Komponenten handeln. Nachdem Sie den Rahmen bzw. die Objekte ausgewählt haben, fügen Sie Auto Layout folgendermaßen hinzu:
- Drücken Sie „Alt + A“ auf Ihrer Tastatur (funktioniert auf Mac und Windows).
- Klicken Sie mit der rechten Maustaste auf die Objekte oder Komponenten und klicken Sie auf „Automatisches Layout“ (Sie müssen diese Funktion zu jeder Komponente hinzufügen, da dies bei Massenverarbeitung nicht möglich ist).
- Tippen Sie im Menü von Figma auf das Plus-Symbol neben der Option „Auto-Layout“.
Außer dem Hinzufügen der automatischen Layoutfunktion zu Ihrem Rahmen können Sie verschiedene Dinge tun, vom Stapeln von Rahmen bis zum Duplizieren, Anordnen und Entfernen von Objekten.
Hinzufügen und Entfernen von Objekten
Das Hinzufügen von Objekten zu Ihrem Rahmen ist ziemlich unkompliziert. Sie müssen nur das Objekt greifen, das Sie hinzufügen möchten, und der Anzeige folgen. Und wenn Sie eines entfernen möchten, ziehen Sie es zurück und drücken Sie die Entf-Taste. Wenn Sie ein größeres Objekt als den übergeordneten Rahmen hinzufügen möchten, müssen Sie die Standardeinstellungen von Figma umgehen, um dies tun zu können. Sie können dies tun, indem Sie die Taste „Strg“ (Windows) und „Befehl“ (Mac) gedrückt halten.
Objekte duplizieren
Wenn Sie dem Rahmen zwei oder mehr identische Objekte hinzufügen möchten, können Sie diese duplizieren. Dies ist eine nützliche Funktion der automatischen Ebene. So geht das:
- Tippen Sie auf das Objekt, das Sie duplizieren möchten.
- Halten Sie die Tasten „Strg“ und „D“ gleichzeitig gedrückt, wenn Sie Windows haben.
- Auf dem Mac duplizieren Sie, indem Sie die Tasten „Befehl“ und „D“ gedrückt halten.
Anordnen von Objekten
Wenn Ihnen das Aussehen Ihres Rahmens und die Anordnung der Objekte und Komponenten darin nicht gefallen, können Sie sie neu anordnen. Wenn Sie zwei Ebenen zusammengeführt haben, müssen Sie die Standardeinstellungen von Figma umgehen, indem Sie „Strg“ (Windows) und „Befehl“ (Mac) drücken, um auf die Option „Deep Select“ zuzugreifen und die Komponente aus der Anfangsebene zu verschieben. Wenn es sich jedoch um einen Rahmen handelt, können Sie ein Objekt auswählen und es an eine andere Stelle verschieben, ähnlich wie beim Hinzufügen von Objekten, oder die Pfeiltaste verwenden.
Automatische Layoutebenen
Eine weitere Funktion von Auto Layout besteht darin, mehrere Frames zu einem zu kombinieren, um eine komplexere Benutzeroberfläche zu erstellen, in der Sie verschiedene Auto Layouts-Ebenen wie Schaltflächen und Schaltflächenreihen, einen Beitrag und eine Zeitleiste überlagern können. Auf jeder Ebene können Sie Ihrem Frame ein weiteres Objekt hinzufügen. Schaltflächen- und Schaltflächenreihenebenen sind horizontal, während ein Beitrag eine vertikale Ebene ist, in die Sie Beschreibungen, Bilder usw. eingeben können.
Wenn Sie zwei Rahmen übereinander stapeln, verschmelzen sie und erhalten die Eigenschaften eines übergeordneten Rahmens. Dadurch kann der Benutzer anpassbare Objekte implementieren. Sie können eines greifen und auf ein anderes legen, um zwei Rahmen zu verbinden. Dazu müssen Sie Folgendes tun:
- Wählen Sie einen Rahmen und alles, was Sie hinzufügen möchten.
- Drücken Sie „Umschalt + A“, um einen Auto-Layout-Rahmen hinzuzufügen.
Auto-Layout-Funktionen
Die Option „Auto-Layout“ in Figma verfügt über viele wertvolle Eigenschaften oder Funktionen, von der Richtung und Stapelreihenfolge bis hin zu Abstand, Größenänderung und Ausrichtung. In diesem Abschnitt werden alle diese Funktionen ausführlicher erläutert.
Richtung
Wie der Name schon sagt, bezieht sich die Richtung auf die Reihenfolge der Objekte in einem Rahmen. Bei Verwendung von Auto Layout können die Objekte wie folgt platziert werden:
- Vertikal – Objekte werden auf der Y-Achse platziert. Diese Option eignet sich für Listen, Menüs, Newsfeeds usw.
- Horizontal – Objekte und Komponenten auf der X-Achse (Schaltflächen, Symbole usw.).
- Umbruchposition – Objekte werden in mehrere Spalten und Zeilen gesetzt.
Stapelreihenfolge
Sie können wählen, welche Stapelreihenfolge am besten zu Ihrem Rahmen passt. Dies ist nur eine visuelle Änderung, da die Stapelreihenfolge gleich bleibt (wenn sie 1,2,3 ist, bleibt sie 1,2,3, aber mit visuellen Anpassungen). Wenn Objekte aufeinander gestapelt werden, können Sie wählen, welches oben sein soll. Wenn Sie also beispielsweise drei Dinge haben, die mit 1, 2 und 3 markiert sind, können Sie entweder 1 oder 3 wählen. So können Sie das tun:
- Wählen Sie den Auto-Layout-Rahmen.
- Navigieren Sie zur Option „Automatisches Layout“ auf der rechten Seite Ihres Bildschirms.
- Tippen Sie auf die drei horizontalen Punkte, um erweiterte Optionen zu öffnen.
- Suchen Sie die Option „Canvas Stacking“.
- Wählen Sie „Erstes oben“ oder „Letztes oben“.
Absolute Position
Eine weitere Eigenschaft von „Layer Flow“ ist die absolute Position, abgesehen von Stapelreihenfolge und -richtung. Mit dieser Funktion können Sie ein Objekt platzieren, wo immer Sie möchten, und dabei die Rahmengrenzen ignorieren. So aktivieren Sie sie:
- Nehmen Sie ein Objekt und platzieren Sie es innerhalb des Rahmens.
- Tippen Sie im Menü auf der rechten Seite neben den Werten für „X“ und „Y“ auf das Symbol, das einem Quadrat ohne Kanten mit einem Pluszeichen darin ähnelt.
- Verschieben Sie das Objekt entlang der Linien des Rahmens.
Lückeneinstellung
Es gibt einige Funktionen, die Sie in Bezug auf den Abstand anpassen können, z. B. den Abstand. Sie haben zwei Möglichkeiten, den Abstand zu ändern: automatisch und durch Eingabe eines bestimmten Abstands. Wenn Ihr Abstand so groß wie möglich sein soll, müssen Sie im Menü „Automatisches Layout“ die automatische Einstellung auswählen. Wenn Sie jedoch Ihre Werte eingeben möchten, geben Sie sie in die zugewiesenen Felder ein.
Darüber hinaus können Sie die Abstandseinstellungen für alle Richtungen festlegen. Wenn Ihre Symbole nur horizontal und vertikal sind, können Sie einen horizontalen Abstand zwischen ihnen auswählen. Wenn sie sich jedoch in einer Wrap-Position befinden, können Sie die vertikalen und horizontalen Abstandseinstellungen anpassen.
Ausrichtungseinstellung
Nachdem Sie die Ausrichtungs-, Polsterungs- und Lückenfunktionen eingerichtet haben, können Sie die Ausrichtung des untergeordneten Objekts in Ihrem Rahmen anpassen, da diese Funktion von den Abstandseinstellungen abhängt. Sie können die Ausrichtung jedes einzelnen Objekts nicht ändern, sondern ein im Menü „Automatisches Layout“ angebotenes Muster auswählen. Sie können im Menü auf das 3×3-Raster klicken und die gewünschte Ausrichtung auswählen. Dies können Sie mit den Pfeiltasten oder den WSAD-Tasten auf Ihrer Tastatur tun.
Darüber hinaus können Sie hier die automatische Einstellung wählen, um die horizontale und vertikale Ausrichtung als Zeile zu vertauschen. Mit bestimmten Werten können Sie alle neun Optionen (oben links, unten links, links, rechts links, unten rechts usw.) nutzen.
Sie können die Textausrichtung auch anpassen, indem Sie diese Option im Menü aktivieren und die Taste „B“ gedrückt halten.
Größenanpassung
Die Größenänderungsoptionen von Auto Layout haben viele zusätzliche Eigenschaften wie Inhalt vergrößern, Container füllen, Breite und Höhe anpassen, Abmessungen usw. Sie können die automatische Option auswählen, wenn Sie möchten, dass Ihre Werte fixiert werden, aber das begrenzt die Möglichkeiten. Für die Größenänderung wird empfohlen, Ihre Werte festzulegen.
Sie können einen festen Wert auswählen oder die maximal bzw. minimal möglichen Abmessungen für Breite und Höhe festlegen. Mit „Inhalt umarmen“ können Sie die Größe eines Rahmens basierend auf dem untergeordneten Objekt anpassen, während die Option „Container füllen“ die Größe eines Objekts entsprechend dem übergeordneten Rahmen ändert.
Erstellen einzigartiger Rahmen mit automatischem Layout
Mit Auto Layout, einer der wesentlichen Figma-Funktionen, können Sie Ihren Rahmen und die darin enthaltenen Objekte und Fächer nach Ihren Wünschen anpassen. Die Eigenschaften und Funktionen sind vielfältig und ermöglichen Ihnen die Erstellung eines ordentlichen und sauberen Produkts. Auto Layout ist ein grundlegendes Tool, das Sie beherrschen müssen, bevor Sie mit Figma arbeiten.
Welche Auto-Layout-Funktion verwenden Sie am häufigsten? Lassen Sie es uns im Kommentarbereich unten wissen.
