Auto Layout
Design Processes
Figma's way of making frames resize and rearrange their contents like real flexbox.
In practice
Auto layout gives a Figma frame rules — direction, spacing, padding, alignment, how children grow — so it behaves like a layout engine rather than a fixed canvas. Change the text and the button resizes; add an item and the list reflows. It is the single feature that makes a design file behave like the interface it describes, and it is how responsive components are built in design.
Questions
What is Auto Layout?
Auto layout is a Figma property that arranges a frame's children automatically by direction, spacing and sizing rules, so components respond to content changes.
Why do you use Auto Layout?
Without it every variation is drawn by hand and drifts. With it, one component holds up across content lengths, sizes and states.
How do you use/apply Auto Layout?
Apply it to a frame, set direction and gap, choose how each child sizes — hug, fill or fixed — and nest frames to build complex responsive structures.
When do you use Auto Layout?
For essentially every component and layout. Freeform positioning is for illustration, not interface.
Who uses Auto Layout?
Every product designer working in Figma.
