How to Use Auto Layout in Figma: A Practical Guide

html

Every frame in Figma can hold auto layout. Switch it on and the frame starts managing its own contents, arranging them, spacing them, and resizing them as the content inside changes length.

Designers work with it inside Figma Design files. Developers meet the other end of it, since the code Figma spits out leans on CSS Flexbox, the same standard behind responsive layouts in the browser.

Worth knowing before you go hunting for a button that no longer exists: hug contents and fill container used to be a single-click toggle. Figma moved them into dropdown controls in a 2022 update, a change documented on the Figma Forum.

What Is Auto Layout in Figma?

The rules live on the frame, not on the individual layers. You set direction, padding, gap, and resizing behavior once, and everything inside that frame follows along as content changes.

It replaces the old routine of nudging layers by hand every time a label gets longer.

Nothing happens until you apply it to a frame, or select a few layers and let Figma wrap them in one.

That mechanism is what makes real responsive design possible inside Figma. The layout reacts to new content instead of breaking when text runs long or short.

People confuse it with Figma’s layout grid guides sometimes. They are not the same thing. Grid guides are visual aids for placement and resize nothing on their own.

Once applied, auto layout frames get a visible badge and border on the canvas, plus a colored marker beside the name in the layers panel. Nested auto layout frames pick up their own blue dot indicator in that panel, which starts mattering the moment you are three levels deep and cannot remember what is what.

• Direction, which sends layers sideways, downward, or onto a new line
• Padding, the room between the frame edge and its contents
• Gap for the space between the child layers themselves
• Resizing, where you pick hug contents, fixed size, or fill container
• Alignment on the primary and counter axis

Some numbers worth keeping in the back of your head.

• The feature launched in December 2019 as one of Figma’s most requested additions (TechCrunch, 2019)
• Auto layout applies with one shortcut, Shift plus A, works on every Figma plan, and now reaches into Figma Sites and the design mode in Slides and Buzz (Figma Help Center)
• 82.3% of designers name Figma their primary interface design tool, a roughly 46 to 1 lead over Sketch (UX Tools 2024 Design Tools Survey, n=2,220)
• Grid joined horizontal and vertical as a third auto layout flow in May 2025 (Figma Help Center)

Auto Layout vs Constraints: What Is the Difference?

These two solve different problems inside the same frame, which is why designers keep mixing them up.

Auto layout arranges and spaces a group of child layers together. Constraints pin one layer’s position relative to its parent’s edges, and that is all they do.

Constraints do not vanish once auto layout is applied. A nested layer can still carry its own pin-to-edge setting underneath the parent’s rules.

Figma’s plugin documentation lists five constraint behaviors: Left, Right, Center, Left and Right (stretch), and Scale, applied independently on the horizontal and vertical axis.

Constraints are the right call for one floating element, like a badge or a back button that has to stay glued to a corner. Everything else, meaning any situation where more than one layer needs to move or grow together, belongs to auto layout. That covers most buttons, cards, and lists you will ever build in a design system.

How to Add Auto Layout to a Frame

Select your layers, hit Shift plus A, done. Figma reads where the selected layers sit and guesses a starting direction for you, which you can override immediately.

1. Select the layers or frame you want to convert.
2. Press Shift plus A, or click the plus icon next to Auto layout in the right sidebar.
3. Check the direction Figma chose and switch it if the guess is wrong.
4. Set padding, gap, and resizing to match the design.
5. Rename the frame something specific, not “Frame 47,” before it gets reused elsewhere.

Removing it works in reverse. Right click the frame, open More layout options, choose Remove auto layout.

There is also Remove all auto layout in that same menu, which strips it from the frame and every nested frame inside it in one go. Handy when you inherit a file from someone else and the nesting has gotten out of hand.

Shift plus A is one entry in Figma’s full set of keyboard shortcuts, worth learning properly if auto layout becomes a daily habit.

Auto Layout Direction: Horizontal, Vertical, and Wrap

Direction decides which way child layers flow inside the frame. Sideways, downward, or onto a new line once space runs out.

Figma’s documentation now calls this setting auto layout flow rather than direction, a naming change that landed in May 2025 alongside the grid update.

Horizontal Direction

Horizontal lines child layers up left to right along the primary axis.

• Button groups and toolbar icons
• Tag lists and filter chips
• Row items inside a table cell

A navigation bar is the everyday example. Logo on the left, links in the middle, a button on the right, all sitting in one horizontal auto layout frame.

Vertical Direction

• Forms, where label and input repeat downward
• Feeds with single column posts or comments stacked in order
• Cards holding a title, a description, then a button at the bottom

Vertical stacks child layers top to bottom, and each new item pushes whatever sits below it further down.

Switching a frame from horizontal to vertical will not wipe your padding or gap values. Only the axis they apply to changes.

Wrap

Figma shipped wrap at Config 2023 in June 2023. Designers had been faking it with plugins for years before that.

Wrap lets child layers spill onto a new row once the parent frame runs out of room, rather than squeezing everything into an unreadable line. It only exists on the horizontal flow, so it creates rows and never columns.

• Set a minimum width on layers you want to wrap, or fill container will stretch them across the full row instead
• Combine wrap with fill container for cards that reflow from three columns down to one
• Wrap respects gap and padding the same way the other flows do

Padding and Spacing in Auto Layout

Two spacing controls, two different jobs. Padding governs the room between the frame’s edge and its contents. Gap handles what happens between the contents themselves, and that is the one people tend to get sloppy with.

Padding in Auto Layout

Padding sets the space between a frame’s edge and whatever sits inside it, across all four sides independently.

• Top, right, bottom, left, each with its own pixel value
• Larger padding tends to read as more generous, more premium
• Uneven padding is one of the fastest ways to make a component look unfinished

A card with generous padding and a button with tight padding read as different components even when their corner radius and color match exactly.

Nothing gives away a rushed file faster than inconsistent padding across a row of buttons. Uneven white space is the first thing the eye catches.

Spacing and Gap in Auto Layout

Gap sets the distance between sibling layers inside the frame. It takes either a fixed pixel value or auto, which some parts of the interface label space between.

Figma’s documentation notes a behavior change here worth flagging: a single child inside an auto-gap stack now aligns left or top by default, where it used to center automatically (Figma Help Center).

A fixed gap holds its pixel value even when only one item is left. Auto gap spreads the remaining space evenly instead, which is close to what justify-content does in CSS.

Nested frames compound their gap values. A card with 16 pixels of gap sitting inside a list that has its own 24 pixels of gap ends up running two separate spacing rules at once. They do not merge into one number, and forgetting that leads to a lot of squinting at the canvas.

Hug Contents, Fixed Size, and Fill Container: Resizing Behavior Explained

Resizing behavior decides how a frame reacts when its contents change or its parent changes. Really the question is who gets to control the final size, and each mode answers that differently.

Hug Contents

Hug contents shrinks or grows a frame to match exactly what is inside it, with no extra room beyond the padding you set.

Tags and badges almost always hug on both width and height. The whole point of a badge is to wrap tightly around a short label.

It never leaves awkward empty space, and it adapts instantly when text gets edited or translated into a longer language. The downside shows up in button rows, where different label lengths give you buttons at four different widths.

Fixed Size

Fixed size locks a frame’s width, height, or both, no matter what happens to its contents or its parent.

Icon containers are the obvious case. 24 by 24 pixels, always.

You get predictable, pixel perfect results that are easy to match against a coded component. You also get clipped or overflowing text the moment someone writes a longer label than you planned for.

Fill Container

Fill container stretches a layer to take up whatever space its parent frame allows, after padding and sibling layers have taken their share.

It only works on a layer that already sits inside an auto layout frame. Try it on a plain layer and the option is simply not there, which trips up a lot of people the first time.

Building a button in Figma that behaves responsively is the standard demonstration. Set the label to hug on width, set the button frame to hug too, then switch the whole button to fill container once it lands inside a wider call to action section.

It maps cleanly onto CSS flex-grow, which is why developers rarely argue with it. But it needs a parent with defined space. Without that, the layer has nothing to fill and just sits there.

Alignment and Distribution in Auto Layout

Alignment controls where child layers sit inside the frame once there is leftover space to place them in.

Figma splits this across two axes. The primary axis follows the frame’s direction, and the counter axis runs perpendicular to it.

• Primary axis: start, center, end, or space between
• Counter axis: start, center, or end

The control in the right sidebar shows nine dots in a grid. Click one dot and you set both axes at once.

Flip a frame from horizontal to vertical and the axes swap roles, so an alignment that read as left aligned in a button row now reads as top aligned. Obvious once you know it, mildly infuriating the first time it happens.

Consistent alignment is a big part of what gives a layout its visual hierarchy. Predictable positioning tells the eye where to look first without a word of copy changing.

Nesting Auto Layout Frames

Nesting means putting one auto layout frame inside another, with each level keeping its own direction, padding, and gap.

A card layout shows it well. An outer vertical frame holds the card, a horizontal frame inside holds the image and title, and a bottom frame holds the button.

• Direction is set independently on each nested frame
• Padding and gap stay independent per frame, nothing is inherited
• Resizing cascades from the innermost frame outward

Set the outer frame to hug contents and its final size depends on every hug frame nested inside, calculated from the inside out.

A card can carry 24 pixels of padding while a button two levels down carries 8. Neither value touches the other.

One quirk: an object has to be smaller than its target frame to join an auto layout directly. Oversized objects need a modifier key held down to force it.

Heavy nesting has a real cost.

Figma’s community forum has an active thread of designers reporting slow text editing and sluggish prototypes once component instances stack several layers deep (Figma Forum, 2024).

Nest only as deep as the design actually needs. Three levels for a card reads clearly. Eight levels usually means something upstream should have been simplified.

Auto Layout Inside Components and Variants

A main component takes auto layout the same way any frame does, and every instance inherits those rules.

Change the padding on a component‘s auto layout frame and every instance in the file updates at once.

Variant properties like size or state can swap padding, gap, or even direction from one variant to the next, since each variant is really just a separate frame inside the same component set.

A large button variant usually carries 16 pixels of padding while the small one carries 8, each governed by its own settings.

Instances have hard limits.

Figma’s documentation states plainly that you cannot override the order or z-index of layers inside an instance, and that includes the position of items in an auto layout frame (Figma Help Center).

Reordering means detaching the instance or editing the main component. No middle ground.

Nested instances add another wrinkle. Figma’s team confirmed on its support forum that swapping a variant inside a nested instance does not always resize that instance correctly, and they treat it as a known limitation rather than a bug awaiting a fix (Figma Forum, 2024).

Auto Layout Compared to CSS Flexbox

Both work off the same model. A parent container controls how its children are spaced, sized, and aligned.

Figma built auto layout to mirror flex behavior deliberately, which is why the two map onto each other so directly.

The mapping breaks down in one place. Classic horizontal and vertical auto layout has no direct equivalent to CSS Grid’s two-dimensional row-and-column placement. The newer grid flow narrows that gap, covered earlier.

How Auto Layout Translates to Code in Dev Mode

Dev Mode reads every auto layout property on a selected frame and writes matching CSS in the Inspect panel by itself.

• Direction and gap become flex-direction and gap
• Padding becomes the padding shorthand
• Alignment becomes justify-content and align-items

Frames without auto layout get none of that. Two plain rectangles sitting side by side generate no flex code at all, because Figma has no rule describing the relationship between them.

Which is one more argument for applying auto layout early rather than treating it as cleanup work before a Figma dev mode handoff.

When Auto Layout Does Not Work

It struggles anywhere the design depends on deliberate overlap, freeform placement, or visual randomness instead of predictable rows and columns.

Moodboards, illustrations, and marketing collages built around intentional chaos fight a system built for order. You will spend more time overriding it than you save.

Common Auto Layout Mistakes

Stroke settings quietly throw off spacing. Inside strokes count toward an object’s size by default, so a heavy border pushes your padding and gap numbers away from what the sidebar says. Each frame’s stroke setting is now self-contained, meaning you have to check it frame by frame in a nested structure rather than assuming the parent’s setting carries down (Figma Help Center).

Negative gap is the other one. Horizontal gap accepts negative values for overlap, but Figma blocks them on vertical gap, because there is no reliable way to express a negative vertical gap in CSS flexbox (Figma Support, Forum 2024).

• Workaround: store the negative number in a variable, then apply that variable to the vertical gap field
• Typing the same negative number directly into the field is blocked, even though the variable route is not

Files can also behave differently after an update.

Figma introduced a new auto layout version in 2026 that changes how padding, inside strokes, and auto-gap stacks behave. Support confirmed the older Legacy version stays available, frame by frame, until January 2027 (Figma Forum, 2026).

So before you assume a spacing bug is your own fault, check whether the frame’s Layout setting says Latest or Legacy.

When Manual Positioning Works Better

• Early wireframe exploration, where speed beats structure
• Badges, tooltips, and decorative overlays that need to sit outside the normal flow
• One-off marketing graphics that will never become a reusable component

Figma’s ignore auto layout setting, which was called absolute position until the rename, handles the badge and tooltip case directly.

Turn it on for one layer and that layer stops taking up space in the flow while staying inside the same frame, positioned by its own constraints instead.

It does not mix well with heavy nesting, though. Stack an ignored object inside a nested auto layout frame and the parent’s calculated size can come out wrong, since the parent still has to account for where that object sits.

When a layout genuinely has no repeating structure to automate, a plain frame with constraints is the better tool. Not every frame needs to be smart.

FAQ on How To Use Auto Layout In Figma

Which Figma plan is required to use auto layout?

None. It ships on the free Starter plan and every paid tier above it.

Anyone with edit access to a file can turn it on. It is a core drawing feature, not a paid add-on.

Can auto layout be used in FigJam, or only in Figma design files?

Figma Design, Figma Sites, and the design mode inside Slides and Buzz all support it.

FigJam does not. Its boards run on sections and sticky notes rather than frames, and frames are where auto layout controls live.

Can auto layout be animated between states with Smart Animate?

Yes.

Smart Animate matches layer names across two frames and animates the differences between them, including auto layout changes like padding, gap, and shifts between hug, fill, and fixed. You get smooth resize transitions without touching a single keyframe.

Does auto layout affect performance on large, complex files?

The feature itself is lightweight. Large files usually slow down because of image assets, complex vectors, and plugins.

Heavy nesting inside big component libraries is the one way auto layout contributes to sluggish editing and prototyping.

Where Should You Start With How To Use Auto Layout In Figma?

Order matters more than most tutorials admit. Get direction and resizing behavior settled first, then padding and gap, and only reach for nesting and components once the base frame behaves the way the design needs.

• Direction and resizing behavior
• Padding and gap
• Nesting, components, and variants

Since the December 2019 launch, four documented revisions have landed. The 2022 sizing menu rework, the 2023 wrap release, the 2025 grid flow addition, and the 2026 Legacy rewrite work out to roughly one substantial change every year or two.

Working in that order does mean going back to revisit variant padding whenever an early resizing decision changes. It is a small cost, and a cheaper one to pay now than halfway through building a full design system in Figma.