UI Coach guide
Figma Auto Layout
How to use Figma auto layout so components resize predictably instead of fighting the frame.
By UI Coach Editorial ·
Auto layout is how Figma components survive real content. Without it, every new label length becomes a manual nudge. With it, padding, gap, and direction become the design, which is closer to how the interface will be built.
Think in stacks
Most UI is a vertical or horizontal stack with padding. Put auto layout on the smallest repeating group first, then wrap those groups. Hug contents when the size should follow the label. Fill container when the size should follow the parent.
Padding is the component
Do not fake padding with empty frames. Set padding on the auto layout frame so hover states and borders wrap the control correctly. Absolute position is for badges and decorative exceptions, not for everyday spacing.
Alignment and wrapping
Space between is useful for toolbars. Packed plus a trailing action is useful for list rows. Wrap helps chip groups. If wrapping surprises you, the parent probably needs a min width or the child needs to hug.
Common mistakes
- Applying auto layout only at the page level and leaving inner cards as freeform artboards.
- Mixing magic numbers with auto layout so one nested frame still overflows.
- Ignoring constraints when placing auto layout frames inside a non-auto parent.
How to judge the work
Auto layout is doing its job when a longer label does not require nudging, when padding lives on the frame rather than in spacer rectangles, and when nested stacks hug or fill on purpose. If one nested frame still overflows after every parent is set to auto layout, a magic number is still hiding in the file.
Practice this on UI Coach
Rebuild a challenge screen using only auto layout stacks. If a card cannot grow with a two-line title, the structure is not done. Figma plugin resources can help with spacing audits after the stacks are honest.
Sources
- Figma help on auto layout properties