How to Set Up Auto Layout in Figma
Master Figma auto layout to build responsive, flexible designs. Learn padding, spacing, alignment, and nested layouts step by step.
Step-by-step
How to Set Up Auto Layout in Figma
Apply auto layout to a frame
Select a frame or group of elements and press Shift+A to apply auto layout. The elements will arrange themselves vertically or horizontally with equal spacing. Toggle direction with the arrows in the right panel's Auto Layout section.
Configure padding and spacing
Set the padding (space between the frame's edge and its children) and item spacing (gap between children). You can set uniform padding or independent values per side. Use the spacing input fields in the right panel or drag the pink spacing handles on the canvas.
Control alignment and sizing
Set how children align within the auto layout: left, center, right, top, bottom, or space-between. Set each child's sizing to 'Hug contents' (shrink to fit), 'Fixed' (set size), or 'Fill container' (stretch to fill available space).
Nest auto layouts for complex layouts
Build complex page layouts by nesting auto layout frames. For example: a card component has a vertical auto layout containing a horizontal row (image + text), a description, and a horizontal row of buttons. Each level handles its own direction and spacing.
Use absolute positioning for exceptions
For elements that need to break out of the auto layout flow (like a badge on a card corner), select the element and enable 'Absolute position' in the right panel. The element stays in the auto layout frame but positions freely using X/Y coordinates.
Tips
Pro tips
- *
Always start from the inside out — apply auto layout to the smallest groups first, then wrap those in larger auto layout frames
- *
Use 'Fill container' on elements that should stretch (like text inputs in a form) and 'Hug contents' on elements that should shrink (like buttons)
- *
Hold Ctrl/Cmd while resizing an auto layout frame to resize the frame without changing the children's layout
- *
Use negative spacing values to create overlapping layouts (like stacked avatars or overlapping cards)
Related guides