There's a predictable arc to learning Auto Layout in Figma. In the first week, you ignore it — everything seems to work fine without it. In the second week, you try it on one component and immediately break something. You turn it off and go back to manual. In month three, you watch a senior designer make a change that cascades across an entire component system in 10 seconds, and you realize that's Auto Layout doing that.
The designers who avoid Auto Layout aren't saving time — they're spending it. Every time a button's text changes and you have to manually resize the frame. Every time a list gains an item and you have to shift everything below it down. Every time a card layout needs to work on both mobile and desktop and you're duplicating frames instead of letting the layout adapt.
Auto Layout is not a power-user feature. It's the fundamental building block of professional Figma work. This guide covers everything you need to go from Auto Layout-skeptic to fluent user.
What Is Auto Layout?
Auto Layout is a property you apply to a frame that makes it behave like a CSS flexbox container. The frame automatically resizes to fit its contents, and its children arrange themselves according to the direction, spacing, and alignment rules you set.
Without Auto Layout, a Figma frame is a static container. You set a fixed width and height, place elements inside it manually, and everything stays exactly where you put it — regardless of whether the content changes. If the text gets longer, it overflows the frame. If you add an item to a list, you move everything else by hand.
With Auto Layout, the frame responds to its content. Add a word to a button and the button grows. Add an item to a list and every item below it shifts down automatically. Switch from desktop to mobile and the layout reflows. This is what enables Figma components to behave like real UI elements — and it's what makes handoff accurate, because the design actually reflects how the code will behave.
Part 1: Adding Auto Layout
To add Auto Layout to any frame or selected group, press Shift+A. If you have multiple elements selected that aren't already in a frame, Shift+A wraps them in a new Auto Layout frame automatically.
The first choice you make is direction: horizontal (children arranged in a row) or vertical (children stacked in a column). Most UI elements follow a predictable pattern — buttons are horizontal (icon + label side by side), menus and lists are vertical (items stacked), nav bars are horizontal, form fields are vertical.
You'll see the Auto Layout controls appear in the right panel: direction arrows, spacing controls, padding controls, and sizing mode selectors. These are the controls you'll spend most of your time with.
- Shift+A — add Auto Layout to the selected frame or wrap selected elements
- Horizontal — children arranged in a row, left to right
- Vertical — children stacked, top to bottom
- Wrap — children flow into new rows when the container is full (useful for tag lists and grids)
Part 2: Padding and Spacing Controls
Padding is the space between the frame's edge and its contents. Spacing is the gap between children inside the frame. These two controls define the feel of your components more than almost any other property.
Uniform padding sets all four sides at once — useful when you want equal padding around a component. Click the padding field once and type a number. Individual padding gives you separate control over top, right, bottom, and left — click the padding icon to toggle between uniform and individual mode.
Gap between items controls the spacing between each child element. Unlike CSS where you might use margin on individual children, Auto Layout's gap applies uniformly between all siblings. For buttons, 8px is a common icon-to-label gap. For vertical lists, 12–16px between items reads as clean and scannable. For cards in a grid, 24px between cards gives breathing room without spreading them too far apart.
One useful behavior: set the gap to Auto (the icon that looks like two arrows pointing away from each other) to distribute children evenly across the full width of the frame. This is the Figma equivalent of `justify-content: space-between` in CSS — useful for nav bars and toolbars.
Part 3: The 3 Sizing Modes
Every element in an Auto Layout frame has two sizing dimensions: width and height. Each can be set to one of three modes, and choosing the right mode is where most beginners get confused.
Hug contents — the frame or element shrinks to exactly fit whatever is inside it. Use this for buttons (the button hugs the text label), badges, tags, and any element that should size itself around its content. This is the default when you first add Auto Layout, and it's the right starting point for most components.
Fill container — the element expands to fill all available space in the parent. Use this for elements that should stretch to match their siblings or fill a row or column. A text field inside a form row should use Fill container for width so it stretches across the full available space. A card in a grid should use Fill container so all cards are the same width regardless of content differences.
Fixed size — the element stays at exactly the size you set, regardless of content. Use this when a component must have a precise, unchanging dimension — a specific image dimension, a fixed-height header, a column with a defined width. Be careful with fixed size on elements containing text — if the text grows longer than the fixed width, it will overflow.
- Hug contents — frame shrinks to fit its contents; good for buttons, tags, labels
- Fill container — element expands to fill available parent space; good for inputs, cards in a grid
- Fixed size — stays at the exact size you set; good for images, defined columns, fixed headers
Part 4: Nesting Auto Layouts
The real power of Auto Layout emerges when you nest Auto Layout frames inside each other. This is how professional Figma components are built — from small atomic pieces up to large complex layouts.
A button is a horizontal Auto Layout frame: icon (optional) + text label, with padding around them. That button is then placed inside a button group — a horizontal Auto Layout frame containing multiple buttons with a gap between them. That button group might sit inside a navigation bar — a horizontal Auto Layout frame with the logo on one end, navigation links in the middle (using Fill container to expand), and CTAs on the right.
Each level of nesting handles one level of layout. The button handles its own padding and icon-label spacing. The button group handles the spacing between buttons. The nav bar handles the overall horizontal distribution. Change the button's padding at the component level and every button everywhere updates. Add a button to the button group and the group expands. Nest these structures, and complex layouts become trivially maintainable.
Part 5: Min/Max Width Constraints
Auto Layout supports minimum and maximum width/height constraints — the Figma equivalent of CSS min-width and max-width. These are essential for building components that need to be responsive without becoming unusably small or unreadably large.
A common pattern: a button set to Fill container width with a min-width of 120px. On wide screens, the button expands to fill its container. On narrow screens, it won't compress below 120px. This prevents buttons from becoming unreadably narrow on mobile without requiring you to design a separate mobile variant.
Another common pattern: a card with a max-width of 600px. On a wide desktop layout, the card won't stretch past 600px even if the parent container is wider. This is how you build a reading column or a form layout that stays readable regardless of viewport width.
Access min/max constraints by clicking the sizing mode dropdown next to the width or height field and enabling Min width, Max width, Min height, or Max height.
Common Gotchas
Absolute position inside Auto Layout — you can exclude a child from Auto Layout's flow by setting it to absolute position (the icon that looks like a pushpin in the right panel). This is useful for overlays, tooltips, and decorative elements that shouldn't affect the layout flow. But overusing absolute position defeats the purpose of Auto Layout — if most children are absolutely positioned, you're back to manual layout.
Strokes and sizing — Figma strokes can be set to inside, outside, or center. Outside and center strokes add visual space but don't affect Auto Layout dimensions, which can cause unexpected gaps between elements. When sizing matters precisely, use inside strokes.
Wrapping — setting an Auto Layout frame to wrap causes children to flow into new rows when the frame width is reached. It works, but wrapping layouts are harder to control precisely than single-direction layouts. Use wrap deliberately, not as a fallback when you can't get a single-direction layout to work.
When to Use a Regular Frame Instead
Auto Layout is the right default for most components and layouts. But there are cases where a regular frame (no Auto Layout) is the better choice:
Freeform arrangements where elements overlap deliberately — image compositions, hero illustrations, decorative layouts where precise spatial relationships matter more than flow.
Components with very complex internal structures — sometimes the combination of absolute positioning, multiple Auto Layout axes, and nesting becomes harder to maintain than a clean fixed layout. Know when to stop.
Placeholders and wireframes — when you're still figuring out a layout and want to move things around freely without the constraints of Auto Layout, start with a regular frame and add Auto Layout once the structure is settled.
Work With Auto Layout Built In From Day One
Learning Auto Layout by building components from scratch is the most thorough path. But there's a faster way to develop fluency: work inside a component library where every element already uses Auto Layout correctly.
FolioForge's Figma UI Component Kit is built entirely on Auto Layout best practices — every button, input, card, and nav bar uses the right sizing modes, correct padding and gap values, and proper nesting structure. Opening a component, examining how it's built, and making modifications to see how Auto Layout responds is one of the fastest ways to internalize these patterns.
The Figma Pro Design System goes further — a complete design system with semantic token layers, 150+ components, and inline documentation explaining the Auto Layout decisions behind each component. It's a learning resource and a production tool at the same time.
Browse both at /products and start building with a foundation that's already structured right.