Figma Auto Layout - einfach erklärt

Was ist Figma Auto Layout? Grundlagen, Beispiele – ganz einfach erklärt

‍

Warum Auto Layout?

Bei der Erstellung von UI-Layouts kommt es nicht nur auf ein schönes Design an, sondern auch auf Konsistenz und Wiederverwendbarkeit. Figma's Auto Layout Funktion ist dabei ein mächtiges Werkzeug, das das Erstellen von dynamischen Layouts vereinfacht und Zeit spart. In diesem Artikel erkläre ich, was Auto Layout ist und wie man es effektiv einsetzt.

‍

Was ist Auto Layout?

Auto Layout ist ein Feature in Figma, das es ermöglicht, Frames automatisch an ihren Inhalt anzupassen. Es erlaubt die Definition von Abständen, Ausrichtungen und Größenanpassungen, so dass sich das Layout automatisch anpasst, wenn sich der Inhalt ändert. Dies reduziert manuelle Einstellungen und sorgt für ein konsistentes Design.

‍

Wie aktiviert man Auto Layout?

Auto Layout kann in Figma auf zwei Arten aktiviert werden:

1. Über die Menüleiste: Wähle ein Frame aus und klicke auf das Auto Layout-Symbol in der rechten Seitenleiste.

2. Über die Tastenkombination: Drücke Shift + A, um Auto Layout für den ausgewählten Frame zu aktivieren.

‍

Grundlegende Einstellungen

Sobald Auto Layout aktiviert ist, erscheinen verschiedene Optionen in der rechten Seitenleiste:

Ausrichtung: Definiert, wie die Elemente innerhalb des Frames ausgerichtet werden. Dies kann horizontal oder vertikal sein.

Abstände: Setzt die Abstände zwischen den Elementen und den Rahmen des Frames.

Größenverhalten: Bestimmt, wie sich die Größe des Frames ändert, wenn sich die enthaltenen Elemente verändern. Möglichkeiten sind feste Größe, automatische Größe und minimale/maximale Größe.

‍

Schachteln von Auto Layouts

Eine der mächtigsten Eigenschaften von Auto Layout ist die Möglichkeit, Auto Layouts zu schachteln. Dadurch können komplexe Layouts erstellt werden, die sich an den Inhalt anpassen. Zum Beispiel könnte ein äußerer Frame vertikal ausgerichtet sein, während innere Frames horizontal ausgerichtet sind.

‍

Hinzufügen von Elementen zu Auto Layouts

Elemente können zu bestehenden Auto Layouts hinzugefügt werden, indem sie einfach per Drag-and-Drop in den Frame gezogen werden. Auto Layout passt dann automatisch den Abstand und die Ausrichtung an.

‍

Praktische Beispiele

Die Funktionen "Hug" und "Fill" kontrollieren die Größenänderung:

• Hug: Der Frame umschließt genau seinen Inhalt
• Fill: Der Frame füllt den verfügbaren Platz

‍

Einstellungen von Auto Layout

In diesem Beispiel sieht man die wichtigsten Einstellungen, die zur Verfügung stehen.

‍

Direction: Wähle, ob die Elemente horizontal oder vertikal angeordnet werden sollen.

Spacing between items: Definiere den Abstand zwischen den Elementen. Es gibt auch eine Auto-Funktion.

Padding: Setze den Innenabstand des Frames.

Alignment: Bestimme die Ausrichtung der Elemente im Frame.

Width / Height Resizing: Wähle zwischen den Optionen "Fixed", "Hug" und "Fill".

Min/Max Width/Height: Setze Mindest- und Höchstgrößen für den Frame.

‍

Weitere Einstellungen sind: 

• Text Baseline Alignment: Richte Text an der Grundlinie aus.
• Clip Content: Schneide den Inhalt ab, der über die Grenzen des Frames hinausgeht.
• Stroke included in layout: Berechnungen beinhalten auch die Strichbreite.

‍

Specs

Nicht nur beim Erstellen von Designs hilft Auto Layout, sondern auch bei Entwicklern, die die Designs verwenden. Die Einstellungen werden in den Spezifikationen angezeigt und mässen nicht extra beschrieben werden.

‍

Ergebnis

Hier sieht man das Endergebnis. Alle Elemente sind korrekt angeordnet, haben die richtigen Abstände und passen sich dem Inhalt an.

‍

Fazit

Auto Layout in Figma ist ein mächtiges Werkzeug, das das Erstellen von dynamischen, konsistenten und skalierbaren Designs erheblich vereinfacht. Durch das Verständnis und die richtige Verwendung von Auto Layout können Designer effizienter arbeiten und sicherstellen, dass ihre Designs in verschiedenen Größen und Kontexten gut aussehen.