Bei der Erstellung von UI-Layouts kommt es nicht nur auf ein schönes Design an. Vor allem in der Zusammenarbeit mit Entwickler:innen ist es wichtig, präzise Vorgaben zu machen, um ein einheitliches Bild zu schaffen und die Weiterverarbeitung zu vereinfachen.
In Figma lässt sich diese Präzision schnell und effizient herstellen – mit Auto Layout. Für viele Einsteiger:innen wirkt Auto Layout auf den ersten Blick jedoch komplex und fordert etwas Übung. Es gibt aber ein Grundprinzip, das sich auf das gesamte Auto Layout anwenden lässt und dabei hilft, es schneller zu verstehen. Danach ist es „nur noch“ Übung.
Das Prinzip ist simpel: Man stellt sich vor, man hätte viele Schachteln – von klein bis groß – die man ineinander stecken möchte. Wie wäre die Vorgehensweise?
Zuerst nimmt man sich die kleinsten Schachteln vor, steckt sie zusammen, damit sie in eine etwas größere Schachtel passen. Dann fasst man diese Schachtelgruppen zusammen und packt sie in eine noch größere Schachtel. So arbeitet man sich von der kleinsten zur größten – oder anders gesagt: von der innersten zur äußersten Schachtel.
Genau so funktioniert Auto Layout in Figma:
Man beginnt bei den kleinsten Elementgruppen und verschachtelt sich Schritt für Schritt nach außen.
1. Auto layout Toggle
2. Flow Auswahl
2.1. Freeform - Neues Update für freie Platzierung ohne Vert. Und Horiz. Einschränkung
2.2 Verticaler Flow
2.3 Horizontaler Flow
2.4 Grid (Beta) - Baut Elemente in einem Grid auf
3. Wrap - wird angezeigt bei Horizontalem Flow – Pusht alle Elemente die Overflown in die nächste Zeile - Praktisch für Responsive Prototypen
4. Width des Elements - Options Dropdown für Hug Content, Fill Container und Min. und Max. Width
5. Height des Elements - Options Dropdown für Hug Content, Fill Container und Min. und Max. Height
6. Lock Aspect Ratio – Verschließt die Width zu Height Proportionen sodass das Element oder bspw. Image beim vergrößern oder verkleinern die selben Proportionen beibehält
7. Align – Wie sollen die Elemente Aligned werden? Oben, unten, mitte, rechts oder links etc.
8. Gap – Der Abstand zwischen Objekten innerhalb des Layouts
9. Weitere Auto layout Einstellungen
10. Padding - Abstand der Elemente zur Äußeren Kante des Layouts
10.1 Horizontal Padding
10.2 Vertical Padding
10.3 Individual Padding – Individuelles Einstellen jeder Seite, Rechts, Links, Oben und Unten
11. Clip Content Toggle – Wenn Aktiv werden alle Elemente die aus dem Rahmen des Auto Layouts herausragen ausgeblendet.
Das Kürzel für das Autolayout ist sowohl für Windows als auch Mac
„Shift + A“, dabei muss mindestens ein Element oder Frame ausgewählt sein, worauf das Auto layout angewendet werden kann.
In diesem Bild sind die einzelnen Boxen in der Reihenfolge in der gearbeitet wird von klein zu groß Farblich markiert um im späteren Verlauf die Verschachtlung besser darzustellen.
Hier sind einmal alle Einzelteile für einen Musik Player aufgereiht. Bei der Arbeit in Figma ist es immer von Vorteil, wenn man die Einzelteile, Images, Icons sowie Components bereits angelegt und sortiert hat um sich die Zusammensetzung in das Layout zu vereinfachen.
Diese Einzelteile bestehen aus:
Hier wurden die Einzelteile genommen und in ein grobes Layout gebracht, dazu wurde ein Frame angelegt, diesen findet man in der Figma Tool Zeile unter dem „#“ Symbol, und die Elemente wurden in die gewünschte Reihenfolge auf den Frame gelegt. Das Layout ist hier etwas überspitzt schief dargestellt damit der Effekt vom Autolayout später deutlicher ist. Im zweiten Screen sind alle Elemente die zusammen in eine Box gehören der Größe nach farblich markiert.
Bei der Anwendung des Auto layouts ist es wichtig zu verstehen wie die Boxen miteinander agieren, deshalb fangen wir bei den innersten Elementen an:
„Was sind die kleinsten Element Gruppen und wie sollen sie miteinander argieren?“
Beispiel: Songtitel und Künstler („Song Titel“ und „Example Artist“) gehören zusammen und sollen übereinander – also vertikal – dargestellt werden. Beide Elemente werden markiert und mit Shift + A in ein Auto Layout gebracht.
Die Einstellungen dazu sehen wie folgt aus:
Das gleiche Prinzip wird mit den anderen gelb markierten Elementgruppen angewendet – dort jedoch im Horizontal Flow.
Als nächstes kommt die grüne Box an die Reihe.
Frage: Warum kommen die beiden Icons „Shuffle“ und „Replay“ in eine äußere Box und nicht direkt in die gelbe Box?
Antwort: Weil die beiden Icons einen anderen Abstand zur inneren gelben Box haben sollen als die Buttons innerhalb dieser.
Vorgehen:
Wenn Gap auf „Auto“ steht und die Width später auf „Fill Container“ gesetzt wird, passt sich der Abstand der Elemente automatisch der Breite der äußeren Box an. Width = „Fill Container“ ist in diesem Schritt jedoch noch nicht möglich, da die Box dafür in einer übergeordneten Auto-Layout-Box liegen muss.
Die nächsten Boxen sind Wiederholungen der bisherigen Schritte:
So entsteht eine hierarchische Struktur aus Verschachtelungen, die später sehr leicht anzupassen ist.
Zum Schluss wird der äußere Frame (rot) in ein Auto Layout umgewandelt. Dieser erhält folgende Attribute:
Nun können alle inneren Boxen „versäubert“ werden:
Ein weiterer Vorteil: Durch Auto Layout können Inhalte sehr einfach getauscht oder verschoben werden. Im Beispiel wurde etwa die Position von Zeitachse und Bedienungs-Buttons im laufenden Prozess angepasst – ohne das Layout komplett neu bauen zu müssen.
Wenn sich ein Image nicht so verhält, wie erwartet, lohnt sich ein Blick auf folgende Punkte:
Mit diesen Einstellungen lassen sich Bildgrößen stabil und konsistent steuern.
Im finalen Design wurden Bilder, Effekte und Icons noch verfeinert und angepasst, sodass ein stimmiges Gesamtbild entsteht. Dank Auto Layout bleibt das UI nicht nur gut aussehend, sondern auch:
Das Auto Layout in Figma wirkt auf den ersten Blick komplex, folgt aber einem klaren und leicht verständlichen Prinzip: Schachteln in Schachteln.
Wer von innen nach außen denkt und Elemente Schritt für Schritt gruppiert, behält die Kontrolle über Abstände und Strukturen und schafft ein stabiles, flexibel anpassbares Design.
Mit etwas Übung wird Auto Layout zu einem unverzichtbaren Tool, das den Workflow beschleunigt, die Zusammenarbeit mit Entwickler:innen erleichtert und für klar definierte, saubere UI-Layouts sorgt.
Unser Geschäftsführer Tibor Csizmadia und unser Kundenbetreuer Jens Walter stehen Ihnen persönlich zur Verfügung. Profitieren Sie von unserer langjährigen Erfahrung und erhalten Sie eine kompetente Erstberatung in einem unverbindlichen Austausch.
