Figma auto layout is the feature that separates components you can actually use from components you'll eventually throw away. Once you understand fill container vs. hug content vs. fixed — and when to use each — your Figma files start behaving like real interfaces instead of static screenshots.
The Three Sizing Modes (and When to Use Each)
Every frame and layer inside an auto layout container has a sizing mode for both width and height. Getting these right is 80% of the battle.
- Hug contents — the frame shrinks or grows to fit its children. Use this for buttons, tags, badges, and any component whose size should be determined by its content.
- Fill container — the frame expands to fill the available space in its parent. Use this for columns that should share equal width, or for the content area in a sidebar layout.
- Fixed — the frame stays at an exact pixel dimension regardless of content. Use this sparingly — mostly for images, avatars, and containers with defined minimum/maximum sizes.
Direction: Horizontal vs. Vertical
Auto layout arranges children in a single direction: either horizontal (left to right) or vertical (top to bottom). For complex layouts, you nest: an outer vertical auto layout containing several horizontal auto layout rows.
Example: a card component is a vertical auto layout (image → content → footer). The content area is a vertical auto layout (title → description). The footer is a horizontal auto layout (avatar → name → date).
Spacing: Between Items vs. Padding
Two spacing controls work together:
- Gap (space between items) — the distance between children inside the container
- Padding — the distance between the container edge and its children
Set padding as a uniform value (all four sides the same) or individual sides (top/right/bottom/left). Use consistent multiples of 4px or 8px throughout your component library for visual rhythm.
Alignment Within Auto Layout
The alignment grid in the auto layout panel controls how children position along the cross-axis (the axis perpendicular to the direction).
For a horizontal auto layout, the cross-axis is vertical — so alignment controls whether items are top-aligned, center-aligned, or bottom-aligned vertically. The most common setting: center alignment, which keeps mixed-height children visually balanced.
Wrap: The Grid Alternative
Figma's “wrap” mode on horizontal auto layouts lets items flow to the next row when they run out of space — similar to CSS flexbox flex-wrap: wrap. This is the right tool for tag lists, chip groups, and responsive icon grids where you don't know how many items you'll have.
Auto Layout and Component Libraries
The reason auto layout matters so much for component libraries: a component without auto layout is brittle. Change the text, and the frame doesn't resize. Add a list item, and everything overlaps. Paste it into a different context, and the spacing breaks.
When you use components from a proper Figma component library, all the auto layout is already set up correctly. You paste the component, resize the container, and everything reflows as expected.
This is especially visible in complex components like navbar components (where the center links need to be flexible) and pricing table components (where plan cards need consistent heights regardless of how many features each plan lists).
Common Auto Layout Mistakes
- Mixing fixed and fill incorrectly — setting a child to “fill container” when the parent is set to “hug” creates a circular sizing conflict. Figma will warn you.
- Absolute position inside auto layout — elements set to absolute position are excluded from the auto layout flow. Useful for overlays and badges; confusing for everything else.
- Forgetting to set gap — new auto layout frames default to 0 gap. Set your standard gap immediately so children don't stack on top of each other.
Next Steps
Once you're comfortable with auto layout, the next level is building a proper Figma design system — where auto layout combines with design tokens and component variants to create a library that scales with your product.