So verwenden Sie das automatische Layout in Figma

Auto Layout ist ein unverzichtbares Werkzeug für jeden Designer und Figma-Benutzer. Mit dieser Funktion können Sie Änderungen vornehmen, z. B. die Größe ändern oder Rahmen und Objekte neu positionieren. Mit dem automatischen Layout können Sie die Höhe und das Gewicht eines Elements beispielsweise mit einer automatischen Einstellung anpassen und so Ihre Arbeit halbieren.

Da sich die Bildschirmgröße je nach Gerät oder Browser ändert, mit dem der Benutzer auf die Website zugreift, passt sich das automatische Layout den Elementen innerhalb der Frames an diese Änderungen an. Dadurch wirken Layout und Struktur präziser und harmonieren besser. Lesen Sie weiter, um zu erfahren, wie Sie das automatische Layout in Figma und seine Funktionen verwenden.

Verwenden des automatischen Layouts

Um das automatische Layout und alle seine Funktionen nutzen zu können, müssen Sie es zunächst zu einem Frame hinzufügen, an dem Sie arbeiten. Dabei kann es sich um einen neuen Frame oder einen Frame mit Inhalten, Objekten und Komponenten handeln. Nachdem Sie den Rahmen oder die Objekte ausgewählt haben, können Sie ihm wie folgt das automatische Layout hinzufügen:

• 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 jeder Komponente hinzufügen, da dies nicht in großen Mengen möglich ist).
• Tippen Sie im Menü von Figma auf das Plus-Symbol neben der Option „Auto-Layout“.

Neben dem Hinzufügen von Auto-Layout zu Ihrem Rahmen können Sie verschiedene Dinge tun, vom Stapeln von Rahmen bis zum Duplizieren, Anordnen und Entfernen von Objekten.

Objekte hinzufügen und entfernen

Das Hinzufügen von Objekten zu Ihrem Rahmen ist ziemlich einfach. Sie müssen nur das Objekt ergreifen, das Sie hinzufügen möchten, und dem Indikator folgen. Und wenn Sie eines entfernen möchten, ziehen Sie es wieder heraus 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 Figma-Standardeinstellungen vermeiden, um dies tun zu können. Sie können dies tun, indem Sie die „Strg“-Taste für Windows und die „Befehlstaste“ für 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 für die automatische Ebene. So können Sie es machen:

1. Tippen Sie auf das Objekt, das Sie duplizieren möchten.
   
2. Halten Sie die Tasten „Strg“ und „D“ gleichzeitig gedrückt, wenn Sie Windows haben.
   
3. Beim Mac duplizieren Sie es, indem Sie die Tasten „Befehl“ und „D“ gedrückt halten.
   

Objekte anordnen

Wenn Ihnen das Aussehen Ihres Rahmens und die Anordnung der darin enthaltenen Objekte und Komponenten nicht gefällt, können Sie sie neu anordnen. Wenn Sie zwei Ebenen zusammengeführt haben, müssen Sie die Figma-Standardeinstellungen umgehen, indem Sie „Strg“ für Windows und „Befehl“ für Mac drücken, um auf die Tiefenauswahloption zuzugreifen und die Komponente aus der ersten Ebene zu verschieben. Wenn es sich jedoch um ein Einzelbild handelt, können Sie ein Objekt auswählen und 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 kompliziertere Benutzeroberfläche zu erstellen, in der Sie verschiedene Auto-Layout-Ebenen wie Schaltflächen und Schaltflächenreihen, einen Beitrag und eine Zeitleiste überlagern können. Auf jeder Ebene können Sie Ihrem Rahmen ein weiteres Objekt hinzufügen. Schaltflächen- und Schaltflächenreihenebenen sind horizontal, während ein Beitrag eine vertikale Ebene ist, in der Sie Beschreibungen, Bilder usw. eingeben können.

Wenn Sie zwei Frames übereinander stapeln, verschmelzen sie und erhalten die Eigenschaften eines übergeordneten Frames. Dies ermöglicht dem Benutzer die Implementierung einstellbarer Objekte. Sie können einen nehmen und ihn auf einen anderen legen, um zwei Rahmen zu verbinden. Dazu müssen Sie:

1. Wählen Sie einen Rahmen und alles, was Sie hinzufügen möchten.
   
2. Drücken Sie „Umschalt + A“, um einen Auto-Layout-Rahmen hinzuzufügen.
   

Automatische Layoutfunktionen

Die Option „Automatisches Layout“ in Figma verfügt über viele wertvolle Eigenschaften oder Funktionen, von der Richtung und Stapelreihenfolge bis hin zu Abständen, Größenänderung und Ausrichtung. In diesem Abschnitt wird ausführlicher auf jede dieser Funktionen eingegangen.

Richtung

Wie der Name schon sagt, bezieht sich Richtung auf die Reihenfolge von Objekten in einem Bild. 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.).
• Wrap-Position – Objekte werden in mehreren Spalten und Zeilen festgelegt.

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 Gegenstände übereinander gestapelt sind, können Sie wählen, welches oben liegen soll. Wenn Sie beispielsweise drei Dinge haben, die mit 1, 2 und 3 gekennzeichnet sind, können Sie entweder 1 oder 3 wählen. So können Sie dies tun:

1. Wählen Sie den Rahmen „Auto-Layout“.
   
2. Navigieren Sie zur Option „Auto-Layout“ auf der rechten Seite Ihres Bildschirms.
   
3. Tippen Sie auf die drei horizontalen Punkte, um erweiterte Optionen zu öffnen.
   
4. Suchen Sie die Option „Canvas Stacking“.
   
5. Wählen Sie „Erster oben“ oder „Letzter oben“.
   

Absolute Position

Eine weitere „Layer Flow“-Eigenschaft ist eine absolute Position, abgesehen von der Stapelreihenfolge und -richtung. Mit dieser Funktion können Sie ein Objekt an einer beliebigen Stelle platzieren und dabei die Rahmengrenzen ignorieren. So aktivieren Sie es:

1. Schnappen Sie sich einen Gegenstand und legen Sie ihn in den Rahmen.
   
2. Tippen Sie im rechten Menü neben den Werten für „X“ und „Y“ auf das Symbol, das einem Quadrat ohne Kanten mit einem Pluszeichen darin ähnelt.
   
3. Bewegen Sie das Objekt entlang der Rahmenlinien.
   

Lückeneinstellung

Es gibt einige Funktionen, die Sie beim Abstand anpassen können, z. B. den Abstand. Sie haben zwei Möglichkeiten, die Lücke zu ändern: automatisch oder durch Eingabe einer bestimmten Lücke. Wenn Sie möchten, dass Ihre Lücke so groß wie möglich ist, müssen Sie im Menü „Auto-Layout“ die Einstellung „Auto“ auswählen. Wenn Sie jedoch Ihre Werte eingeben möchten, geben Sie diese in die dafür vorgesehenen Felder ein.

Darüber hinaus kann die Spalteinstellung für alle Richtungen eingestellt werden. Wenn Ihre Symbole nur horizontal und vertikal sind, können Sie einen horizontalen Abstand zwischen ihnen auswählen. Wenn sie sich jedoch in einer Wickelposition befinden, können Sie die vertikalen und horizontalen Abstandseinstellungen anpassen.

Ausrichtungseinstellung

Nachdem Sie Richtungs-, Abstands- und Abstandsfunktionen 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 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 kann mit den Pfeiltasten oder den WSAD-Tasten auf Ihrer Tastatur erfolgen.

Darüber hinaus können Sie hier die automatische Einstellung wählen, um die horizontale und vertikale Ausrichtung als Reihe zu wechseln. Mit bestimmten Werten stehen Ihnen alle neun Optionen zur Verfügung (oben links, unten links, links, rechts links, unten rechts usw.).

Sie können die Textausrichtung auch anpassen, indem Sie diese Option im Menü aktivieren und die Taste „B“ gedrückt halten.

Größenänderung

Die Größenänderungsoptionen des automatischen Layouts verfügen über viele zusätzliche Eigenschaften, wie z. B. „Inhalt umarmen“, „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 festgelegt werden, dies schränkt jedoch die Möglichkeiten ein. Für die Größenänderung wird empfohlen, Ihre Werte festzulegen.

Sie können einen festen Wert auswählen oder ihn auf 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 dem automatischen Layout, einer der wesentlichen Funktionen von Figma, können Sie Ihren Rahmen sowie die darin enthaltenen Objekte und Fächer nach Ihren Wünschen anpassen. Seine Eigenschaften und Merkmale sind vielfältig und ermöglichen die Herstellung eines geeigneten und gepflegten Produkts. Auto-Layout ist ein grundlegendes Werkzeug, das Sie beherrschen müssen, bevor Sie in Figma arbeiten.

Welche Auto-Layout-Funktion nutzen Sie am häufigsten? Lassen Sie es uns im Kommentarbereich unten wissen.