TL;DR: Auto Layout turns static frames into responsive, self-adjusting components by controlling direction, spacing, padding, and sizing rules. Master these ten features—from gap and padding to wrapping and min/max constraints—and your UI files will resize, adapt, and hand off cleanly with far less manual fixing.
1. Enable Auto Layout
Select a frame or group and press Shift + A. Figma wraps the contents in a flexible container. Everything you add afterward snaps into the flow automatically.
If you want to dig deeper, check out our guide on Solid-State Batteries: Mass Production Finally Here.
2. Choose Direction
In the right panel, pick vertical, horizontal, or wrap. Vertical stacks suit lists and cards; horizontal rows suit toolbars and button groups. Wrap lets items flow onto new lines when space runs out.
3. Set Gap Between Items
Use the gap field to control spacing uniformly. Click the icon between the fields to switch between uniform and individual spacing, which is handy when a divider or label needs different breathing room.
4. Apply Padding
Padding defines the inner space between the container edge and its children. Set it uniformly or per side. A common button recipe: 12px vertical, 20px horizontal.
5. Master Alignment
The nine-point alignment grid positions children within the frame. Pair it with gap and padding to center content without nudging individual layers.
6. Control Child Sizing
Each child can be fixed, hug contents, or fill container. Use Fill for inputs that should stretch and Hug for labels that should stay tight.
7. Use Min and Max Width
Click the sizing dropdown and set min/max values. This prevents buttons from collapsing or text blocks from stretching across an entire desktop screen.
8. Set Absolute Position
Need a badge pinned to a corner? Select the child and choose Absolute position. It leaves the flow but stays inside the auto layout frame.
9. Nest Auto Layouts
Combine horizontal and vertical frames to build complex components. A card might be a vertical stack containing a horizontal header row and a text block.
10. Reuse with Components
Convert finished auto layouts into components. Variants plus auto layout let one master adapt to every state, size, and label length.
Tip: Hold Ctrl/Cmd while dragging a child to reorder it instantly, and always test by typing longer text—good auto layout should never break.
FAQ
Q: Does Auto Layout work with absolute positioning?
A: Yes. Set a child to Absolute position inside an auto layout frame to pin it without affecting the flow of other items.
Q: What is the difference between Hug and Fill?
A: Hug makes a frame shrink to fit its contents, while Fill makes it stretch to occupy the available space in its parent.
Q: Can I remove Auto Layout later?
A: Yes. Select the frame and press Shift + A again, or right-click and choose Remove auto layout; children return to free positioning.
Leave a Reply