Figma Auto Layout — Vertical, Horizontal & Grid Flows, Wrap, Hug and Fill Explained

Change a button’s label and the padding breaks. Line up cards horizontally and they refuse to drop to a second row when space runs out. Switch a frame to Hug and watch the whole card collapse. Auto Layout is where most Figma layout work either clicks or stalls.

Auto Layout gives a frame a set of rules for arranging its children — and keeps sizes and spacing intact as content grows, shrinks, or gets reordered. If you know CSS, it maps closely onto Flexbox and Grid. Once it clicks, the cost of changing a design drops sharply.

This guide walks through the basics → sizing → wrap → the grid flow → nesting → overflow control → troubleshooting, in the order you actually need them. It reflects the current UI, including the grid flow added in 2025 and a setting that has since been renamed.

A note on naming — "Absolute position" is now "Ignore auto layout"

The setting that pulls a child out of the Auto Layout flow used to be called Absolute position. It is now Ignore auto layout. Figma’s own documentation states that “Ignore auto layout was formerly known as absolute position. The feature has a new name, but it still works the same.” Plenty of tutorials still use the old label, so this article uses the current name and notes the old one where it helps.

A note on behavior — the layout version changed in July 2026

On 24 July 2026, Figma introduced an updated auto layout version that brings its behavior closer to CSS. Frames you create from now on use the updated version automatically, while frames that already exist stay on the legacy version. The same settings can therefore produce different results depending on when the frame was made.

The main changes:

Padding is always honoured — a frame can no longer be narrower than its combined padding (the same idea as CSS border-box)
Only Inside strokes affect layout — Outside and Center strokes no longer factor into spacing or sizing, even when they are included in layout
A parent frame’s stroke setting no longer carries down to how child frames calculate theirs
Fill container distributes leftover space based on the content area rather than the total size
Auto gap no longer goes negative — children collapse toward the start instead of overlapping
A single child in an auto-gap stack aligns to the start (left or top) rather than centring

To switch, select a frame and pick the layout version from the dropdown in auto layout settings, or run Update layout version for selection / Update layout version for page from the Actions menu. In January 2027, the setting becomes an Update button for every frame built on the legacy version.

Everything this article covers works the same way on both versions.

What you’ll get from this article

How to add and remove Auto Layout, and what it can be applied to
How direction, gap, padding, and alignment fit together
When to use Hug contents, Fill container, and Fixed — plus min and max width
How to wrap items onto multiple rows, and why wrap sometimes isn’t available
How the grid flow builds two-dimensional layouts without nesting
How to tell Figma’s three different “grids” apart

📝 Introduction — Three places Auto Layout trips people up

Auto Layout problems tend to fall into three buckets. Each has a different fix, so it helps to identify yours first.

Scenario A: Content changes and the layout breaks

A longer button label changes the padding; more text in a card pushes past the edge. This is a sizing problem — which of Hug, Fill, or Fixed each element uses. The sizing section covers it.

Scenario B: Items won’t drop to a second row

Tags or cards sit in one row and overflow the frame instead of wrapping. This is what wrap solves — but it’s only available under a specific condition, which is where most people get stuck.

Scenario C: You need rows and columns

Galleries, bento layouts, dashboards. This used to require nesting horizontal frames inside vertical ones. The grid flow, added in 2025, handles it directly.

The sections below go in that order: fundamentals (the groundwork for A) → wrap (B) → grid (C).

🧭 What Auto Layout is (vertical, horizontal, grid)

Auto Layout turns a frame into a container with arrangement rules. Its children line up along a direction you choose, and when you add, remove, or resize something, spacing and padding are preserved automatically.

That removes most manual coordinate nudging — which is why it pays off most on the things you edit constantly: buttons, lists, cards, navigation.

Three flows

Flow	How items line up	Best for
Vertical	Top to bottom, single column	Lists, forms, stacked content
Horizontal	Left to right, single row	Icon + label buttons, navigation, tag rows
Grid	Across columns and rows	Galleries, bento boxes, dashboards

Vertical and horizontal are the long-standing flows. Grid arrived in 2025 and is the newest addition. Learn vertical and horizontal first, then reach for grid when a layout genuinely needs two dimensions.

⚙️ Adding and removing it — targets and shortcuts

Adding Auto Layout

Select the elements (multiple selection works) or the frame you want to arrange
Press Shift + A — or click ＋ in the Auto layout section of the right sidebar (Design tab)
Choose the flow (vertical, horizontal, grid) and adjust the settings

Selecting several loose elements and pressing Shift + A creates a new frame around them with Auto Layout applied. Selecting an existing frame applies it to that frame directly.

Removing it

Select the frame and press Shift + Option + A (Shift + Alt + A on Windows), or use the minus (−) in the Auto layout section.

Removing Auto Layout keeps the frame and its children exactly where they are — it just freezes their current positions. Nothing is deleted, so toggling it off to inspect a layout is safe.

It applies to frames, not groups

Auto Layout is a frame feature. If you select a group and press Shift + A, Figma converts it to a frame first. There’s no way to keep something a group and give it Auto Layout — worth knowing before you go hunting for the option.

🔧 The basics — direction, gap, padding, alignment

Four settings do most of the work.

Setting	Name in the UI	What it controls
Direction	(flow selector)	Vertical, horizontal, or grid
Spacing	Gap between	Distance between adjacent children
Padding	Padding	Inner spacing, per side if needed
Alignment	(alignment box)	Where children sit inside the frame

Padding can be set per side

The padding field accepts one value for all sides, separate vertical and horizontal values, or four independent values. Expand the input to switch to per-side entry.

Alignment uses the nine-point box

Left, center, and right alignment (or top, middle, bottom in a horizontal flow) are one click away in the alignment box in the Auto layout panel.

Distributing items evenly

To push items to the edges with even space between them, set Gap between to Auto. Instead of a fixed number, the children spread across the full width (or height) of the frame. This is the standard way to build a navigation bar with a logo on the left and menu items on the right.

📏 Sizing — Hug, Fill, Fixed, and min/max width

Most Auto Layout frustration traces back to sizing. Get this right and “it breaks when the content changes” largely goes away.

There are three behaviors, and you set them independently for width (W) and height (H).

Setting	Behavior	Use it for
Hug contents	Frame shrinks or grows to fit its children	Buttons, tags, labels — anything sized by its content
Fill container	Expands into the space the parent has left	Body text in a card, flexible input fields
Fixed	Stays at the value you set	Icons, thumbnails, deliberately fixed columns

Fill container is only available when the parent is an Auto Layout frame. If you can’t find it, check the parent first.

Setting minimum and maximum width

Hug and Fill both flex, and sometimes you need to bound that. Open the width (W) dropdown and choose Add min width or Add max width — height works the same way.

This is how you get “text that flexes, but never gets so wide it’s hard to read”: set a max width and let Fill handle the rest.

When things break, check the parent/child sizing pair

If a layout collapses when content changes, the culprit is usually not the element itself but the combination of parent and child sizing. A parent set to Hug with a child set to Fill is a common contradiction that produces surprising results. Work outward-in through the W/H settings and the problem tends to surface quickly.

↩️ Wrap and multi-column layouts

Wrap pushes items that no longer fit onto the next line. It’s what you want for tag lists, card galleries, and anything where the number of items varies.

Turning it on

Select the Auto Layout frame
Set the flow to horizontal
Enable wrapping

Once it’s on, items that exceed the frame width move to the next row, and you can set the spacing between rows separately from the spacing between items.

No wrap option? Your flow isn't horizontal

Wrap is only available on the horizontal flow. It doesn’t appear on vertical or grid flows. If wrapping “doesn’t work” or the setting seems missing, check the flow first — this is by far the most common cause.

If you want exactly two columns

Wrap reflows items when they run out of room; it is not a column-count setting. Two columns is a side effect of how frame width and item width happen to relate.

To control the number of columns directly, use the grid flow below, or set item widths to Fixed and size the frame to match. If your goal is “exactly N columns,” grid is the more direct tool.

🔲 The grid flow — building two-dimensional layouts

The grid flow was added to Auto Layout in 2025 and controls rows and columns together. Layouts that previously required nesting horizontal frames inside a vertical one can now be built in a single frame.

How it works

Columns and rows are referred to as tracks. Each track can be sized to fit its contents or set to a fixed value.

Setting	What it controls
Gap between columns	Horizontal spacing between tracks
Gap between rows	Vertical spacing between tracks
Horizontal / Vertical padding	Inner spacing around the whole grid
Column span / Row span	Let one item stretch across several tracks

Because of Column span and Row span, a bento-style layout — one feature card twice as wide as the rest — no longer needs nested frames.

Wrap or grid?

Item count varies and should reflow when space runs out → horizontal flow + wrap
You want a defined number of columns and rows to place things into → grid flow

A tag list is the first case. A three-column card gallery is the second.

🧩 Three different “grids” in Figma

Figma uses the word “grid” for more than one thing, and that’s the single biggest source of confusion here. It got harder in 2025, when the Auto Layout grid flow arrived at roughly the same time layout grids were renamed to layout guides.

Sorting them by role makes it manageable:

Feature	Role	Moves elements?
Auto Layout grid flow	Arranges children into rows and columns	✅ Yes
Layout guide (formerly layout grid)	Displays reference lines to align against	❌ No
Constraints	Anchors elements when the parent resizes	△ On resize only

The question that resolves it: do you want Figma to arrange things, or do you just want a reference to align to? Arranging is Auto Layout. A reference is a layout guide.

Setting up layout guides is covered in Layout Grids in Figma (Now “Layout Guides”).

They're not mutually exclusive

These three work together. A common setup is a frame with a 12-column layout guide, containing Auto Layout frames that arrange the actual content. The guide establishes the overall structure; Auto Layout handles what goes inside it.

🪆 Nesting Auto Layout frames

Real components are built by nesting Auto Layout frames. A card typically looks like this:

Outer frame (vertical) — stacks thumbnail, text block, and button
Text block (vertical) — stacks heading and description
Button (horizontal) — places icon beside label

Layering flows in different directions is what lets complex layouts stay responsive to content changes.

The practical tip: build inside-out. Apply Auto Layout to the small units first — buttons, tags, list items — then select those and wrap them with Shift + A. You end up with a clean hierarchy instead of an improvised one.

Deep nesting gets hard to manage, so turn anything you reuse into a component. For organizing component structure, Migrating XD Components and Symbols to Figma Components is a useful companion.

🎛️ Overflow and stacking — Ignore auto layout and Clip content

Ignore auto layout (formerly absolute position)

To pin a badge to the corner of a card, or place something freely regardless of the flow, use Ignore auto layout.

Select the child and enable the option to the right of the Position header in the right sidebar. The element stays inside the frame but leaves the Auto Layout flow — it and its siblings stop affecting each other, even as they resize and move. Notification badges, ribbons, and overlapping icons all rely on this.

As noted at the top, this was previously called Absolute position. Older tutorials use that label, so search for the current name if you can’t find it in the UI.

Clip content for overflow

When children extend past the frame, enabling Clip content hides everything outside the frame bounds. It’s a checkbox in the Layout section of the Design panel.

Use it to crop an image with a frame or to build a scrollable area. Conversely, if you want a shadow or badge to spill outside, leave it off.

🔍 Troubleshooting

The Auto Layout option isn’t there

Your selection is probably a plain shape or text rather than a frame or component. Press Shift + A — Figma will wrap it in a frame and apply Auto Layout in one step.

Wrap isn’t available

The flow isn’t horizontal. Wrap doesn’t exist on vertical or grid flows.

Width changes on its own when content changes

Width is set to Hug contents. Switch to Fixed to lock it, or Fill container to match the parent. If the opposite is happening — it won’t grow with content — check whether it’s stuck on Fixed.

Fill container is grayed out or missing

Fill container requires the parent to be an Auto Layout frame. Apply Auto Layout to the parent first.

Items are in the wrong order

Auto Layout follows layer order. Reorder in the layers panel, or drag an element on canvas — Figma shows where it will land.

🔄 Rebuilding layouts on files migrated from XD

On files brought over from Adobe XD, structures that were Stacks or Repeat Grids in XD often need to be re-established as Auto Layout on the Figma side.

Right after migration, elements keep their coordinates, so the practical approach is to decide which units deserve Auto Layout and wrap them from the inside out — the same inside-out habit described in the nesting section.

For exactly how XD’s Stack and Repeat Grid convert, and how much gets turned into Auto Layout during conversion, see Bringing Adobe XD’s Stack and Repeat Grid into Figma’s Auto Layout.

Auto Layout is native Figma — conversion is a separate job

Auto Layout needs no plugin; it’s built into Figma. What does need tooling is getting an XD file into Figma in the first place. Pixel Fine Converter handles that import step, and the layout rebuild happens in Figma afterwards.

If you still have XD files that haven’t made the move, convert them with Pixel Fine Converter first, then use this guide to rebuild the layouts.

Convert XD files to Figma Install free from Figma Community

One-click install from Figma Community

❓ Frequently asked questions

Q: What’s the shortcut for Auto Layout in Figma?

Shift + A. With several elements selected, it wraps them in a new frame and applies Auto Layout. To remove it, press Shift + Option + A (Shift + Alt + A on Windows).

Q: Why can’t I wrap items in Auto Layout?

Check that the flow is set to horizontal. Wrap is only offered on the horizontal flow — not on vertical or grid.

Q: What’s the difference between Hug and Fill?

Hug contents sizes the frame to its children; Fill container expands it into the parent’s available space. Buttons and tags usually want Hug; body text inside a card usually wants Fill. Fill container only appears when the parent is an Auto Layout frame.

Q: Where did absolute position go?

It’s now called Ignore auto layout. Same behavior, new name — select a child of an Auto Layout frame and look to the right of the Position header.

Q: Can an element flex but stop at a maximum width?

Yes. Open the width dropdown and choose Add max width. Add min width sets a lower bound, and height has the same options.

Q: How is the Auto Layout grid different from a layout guide?

The grid flow actually arranges your children into tracks. A layout guide only draws reference lines to align against — it never moves anything. You can use both on the same design.

Q: How do I distribute items evenly?

Set Gap between to Auto and the children spread across the full width (or height) of the frame.

🎯 Wrapping up

Auto Layout gives a frame rules for arranging its children, so the design keeps working as content changes.

Key takeaways

Three flows: vertical, horizontal, and grid — grid arrived in 2025 for two-dimensional layouts
Shift + A adds it, Shift + Option + A (Shift + Alt + A on Windows) removes it
Four basics: direction, Gap between, Padding, alignment
Three sizing modes: Hug contents, Fill container, Fixed — most breakage comes from the parent/child combination
Bound the flex with Add min width / Add max width
Wrap is horizontal-only — if it’s missing, check the flow
Absolute position is now Ignore auto layout
Three different “grids”: Auto Layout grid arranges, layout guides reference, Constraints anchor

There are a lot of settings, but in practice almost every problem reduces to two questions: which sizing mode is this element on, and is the flow set to horizontal. Get into the habit of checking those two first, and debugging a broken layout stops being guesswork.

If you still have XD files not yet in Figma, convert them with Pixel Fine Converter first, then use the Auto Layout settings in this article to rebuild the layout.