New to this topic? Start with our step-by-step guide: How to Make a Wireframe in Figma (Step by Step).
Figma auto layout turns a static frame into one that resizes and rearranges itself when its content changes, the way a real web page or app screen behaves. This guide is for designers and developers who want buttons, cards and navbars that stay tidy when text or screen width changes. You’ll get every setting explained, three hands-on builds, fixes for common problems and a shortcut cheat sheet, current as of October 2026.
How to use Figma auto layout
To use Figma auto layout, select one or more layers and press Shift+A, or click Add auto layout in the right sidebar. Figma wraps them in a frame. Then pick a flow (vertical, horizontal or grid, with optional wrap), set the gap and padding, choose an alignment, and set each layer to Hug, Fill or Fixed. Since July 2026, new frames use Figma’s updated, CSS-like version.
In this guide
Auto layout is available on every Figma plan in Figma Design and Figma Sites. You only need can-edit access to the file.
What auto layout in Figma does (and when to use it)
Auto layout in Figma arranges the children of a frame by rules instead of fixed x and y positions. Add a button, delete a line of text or lengthen a label, and everything else in the frame moves to make room, with no manual nudging.
Use it for anything whose content can change length: buttons, list items, cards, form fields and navigation bars. A good test: if the coded version would need CSS flexbox or CSS grid, build it with Figma auto layout.
The settings map closely to CSS, which eases developer handoff. Figma’s auto layout and CSS flexbox article says the 2026 update brings Dev Mode code even closer to flexbox. These are rough equivalents, not exact Dev Mode output:
| Figma setting | Rough CSS equivalent |
|---|---|
| Vertical flow | flex-direction: column |
| Horizontal flow | flex-direction: row |
| Wrap | flex-wrap: wrap |
| Grid flow | display: grid with fr tracks |
| Gap / Padding | gap / padding |
| Hug contents | Width or height sized to content (fit-content) |
| Fill container | flex: 1 on the main axis, align-self: stretch on the cross axis |
| Fixed | A set width or height in px |
| Ignore auto layout | position: absolute |
How to add auto layout in Figma (3 ways)
Figma auto layout only exists on frames, so Figma wraps whatever you select in a new auto layout frame. You can apply it to empty frames, frames with content, components, component sets, groups or any selection of layers.
- Keyboard: select the layers and press Shift+A (same on Mac and Windows).
- Right sidebar: click Add auto layout.
- Context menu: right-click a frame or object and choose Add auto layout.
When you add auto layout, Figma guesses a flow from how your layers are arranged. Check its choice and switch flows at any time without rebuilding anything.
Let Figma suggest auto layout
Suggest auto layout scans a frame or component and adds all the auto layout frames it thinks you need in one go, while trying to keep your design in place. Run it with Control+Shift+A on Mac, Ctrl+Alt+Shift+A on Windows, or right-click and choose More layout options > Suggest auto layout.
Figma says it handles moderately complex designs, so work in batches on big screens and review the result; it can pick the wrong direction. New nested frames get a blue dot in the layers panel.
How to remove auto layout in Figma
Select the frame and press Option+Shift+A (Mac) or Alt+Shift+A (Windows). You can also click Remove auto layout or Freeform in the right sidebar, or right-click and pick Remove auto layout.
To strip it from a frame and every frame nested inside it, right-click and choose More layout options > Remove all auto layout. You can’t remove auto layout from a component instance; detach the instance or edit the main component instead.
Auto layout flows: vertical, horizontal, wrap and grid
The flow decides how children are placed, so it’s the first setting to get right. Figma auto layout offers three flows, plus a wrap option for two of them.
- Vertical stacks children along the y-axis, top to bottom. Use it for forms, lists, cards and page sections.
- Horizontal lines children up along the x-axis, left to right. Use it for buttons with icons, toolbars, tags and nav links.
- Grid places children in rows and columns, much like CSS grid.
Figma auto layout wrap
Figma auto layout wrap moves children to a new row (horizontal flow) or a new column (vertical flow) when they no longer fit. To turn it on, select the frame, choose the horizontal or vertical flow, then turn on Wrap.
A wrapping frame has two gap values: one between items in the same row or column, and one between the wrapped rows or columns. Wrap only kicks in when the frame runs out of room, so give a horizontal wrap frame a set width (Fixed or Fill). For vertical wrap, Figma recommends a fixed frame height to control where each new column starts.
Vertical wrap is not a masonry layout; items keep their order. Wrap suits tag lists and card collections that should reflow when the screen narrows.
Figma grid auto layout
Figma grid auto layout places children in cells instead of a single line. Grid items don’t wrap; each one sits in a cell and can span several rows or columns. Set Number of columns and Number of rows in the grid picker in the right sidebar. Rows default to auto.
- Track sizes: Fixed, Hug or Fill. Fill tracks share space in fractional units (fr); typing A in a track sets it to 1fr.
- Spanning: set a child to Fill container, then use Column span and Row span.
- Gaps and alignment: set Gap between rows and Gap between columns, and use Position to align each child in its cell.
Grid flow is not the same as layout guides, which are visual aids only. Figma’s grid flow documentation covers every track option.
Gap, padding and alignment
In Figma auto layout, gap is the space between children, padding is the space between the children and the frame’s edge, and alignment decides where children sit. All three are set on the parent frame, not on the children.
Gap and Auto spacing (space between)
Type a number for an exact gap, or set the gap to Auto (vertical and horizontal flows only). Press X while the alignment box is selected to toggle between a set value and Auto. Auto spacing has three modes in the auto layout settings:
- Between (default): children spread out to fill the frame, with no extra space at the edges. This is what most people mean by “space between.”
- Evenly: the same space in every gap and at both edges (1:1).
- Around: each gap is twice the size of the edge space (2:1).
Avoid empty rectangles as spacers. They break as soon as content changes, while gap values adjust on their own. You can also type a negative gap on purpose to overlap items, such as a row of stacked avatars.
Padding
Padding can be one value for all sides, separate vertical and horizontal values (the default view) or individual top, right, bottom and left values. Cmd-click (Mac) or Ctrl-click (Windows) a padding field to set all sides at once, or type CSS-style shorthand such as 8, 16, 8, 16 for top, right, bottom and left. You can also drag the pink padding handles on the canvas; hold Shift for a bigger nudge.
Alignment
Click one of the nine positions in the alignment box to place children top-left, center, bottom-right and so on. With the box selected, arrow keys change the alignment and W, A, S, D jump to an edge. When the gap is set to Auto, the choices drop to three: left, center or right in a vertical flow, and top, center or bottom in a horizontal flow.
Hug vs Fill vs Fixed: resizing in Figma auto layout
Resizing causes more confusion than any other setting in Figma auto layout. Every layer has separate width and height settings, chosen from the Width and Height dropdowns in the right sidebar.
| Setting | Works on | What it does | Typical use |
|---|---|---|---|
| Hug contents | Auto layout frames | Shrinks or grows to fit its children plus padding | Buttons, tags, text groups |
| Fill container | Children of an auto layout frame | Stretches to fill the parent’s free space | Inputs, card bodies, columns |
| Fixed | Any frame or layer | Keeps an exact width or height | Icons, avatars, device frames |
| Min / max | Any frame or layer | Limits how small or large a layer can get | Responsive cards and sections |
Three rules explain most surprises:
- Typing a number into width or height, or dragging a layer’s edge, switches that axis to Fixed.
- If any child is set to Fill container, a parent set to Hug on that axis stops hugging and becomes Fixed.
- Fill is only available to children of an auto layout frame, never to a top-level frame.
A practical rule: containers hug, content fills and only truly fixed assets stay fixed.
Min and max width and height
Open the Width or Height dropdown and choose Add min width, Add max width, Add min height or Add max height, then enter a number or a number variable. Limits combine with Hug, Fill or Fixed, so a Fill card with a 240 px minimum and a 400 px maximum only stretches within that range.
Layers with limits show a two-line icon. Choose Remove min and max to clear them. One text quirk: a text layer can’t have both a max height and a set number of max lines.
Advanced Figma auto layout settings
A handful of less obvious settings solve specific layout problems. Several live in the auto layout settings in the right sidebar rather than the main panel.
Ignore auto layout (formerly absolute position)
Absolute position is now called Ignore auto layout, and it works the same way. Select a child and click Ignore auto layout; Figma keeps the layer inside the frame but takes it out of the flow, so it and its siblings ignore each other.
Use it for notification badges, close buttons and overlays that should sit on top without pushing other items. These layers behave like layers in a regular frame: constraints work on them, but resizing and layout options don’t.
Canvas stacking order
When children overlap, for example with a negative gap, canvas stacking decides which one sits on top. Choose Last on top (the default) or First on top in the auto layout settings. It only changes what you see on the canvas; the order in the layers panel stays the same.
Text baseline alignment
Turn on text baseline alignment in the auto layout settings, or press B with the alignment box selected, to line up text layers by their baselines instead of their boxes. It helps when a row mixes text sizes, such as a large price beside a small “/month” label.
Strokes in layout
Only inside strokes can take up layout space. The Inside stroke setting marks them as included in or excluded from layout, and included is the default. Outside and center strokes still draw but never change spacing or sizing. In the updated version of auto layout, Figma applies this setting only to the frame it’s set on, not its children.
Clip content
Clip content hides anything that extends past a frame’s edges. Find it in the Layout section of the Design tab. Because a Figma auto layout frame grows to fit its content, it rarely has anything to clip. For a scrolling list in a prototype, put the auto layout frame inside a regular, fixed-size frame and clip that one instead.
Figma’s 2026 auto layout update: new vs legacy version
In 2026, Figma auto layout got an updated version that behaves more like CSS flexbox. Starting July 2026, it’s the default for newly created frames, while existing frames stay on the legacy version until you update them. The main differences, according to Figma’s flexbox article:
- Padding always applies. A frame with 30 px of padding on each side can’t be narrower than 60 px.
- Inside strokes count by default. Outside and center strokes never affect layout.
- Fill children split space by content area, matching the CSS border-box model.
- Auto gap never goes below 0. Children that don’t fit collapse to the start instead of overlapping.
- A single child in a Between stack aligns to the start instead of the center.
To check or change one frame, pick the layout version from the dropdown in its auto layout settings. To update many at once, search the Actions menu for Update layout version for selection or Update layout version for page, then review anything that shifts.
You can switch between versions until January 2027. After that, legacy frames get an Update button instead of a toggle, and new frames can’t be set to legacy. Instances can’t override the version, so update and republish the main component.
Hands-on: build a button with auto layout in Figma
A button is the best first Figma auto layout project because it shows Hug, padding and gap in about two minutes. You’ll end with a reusable component that resizes to fit its label.
- Pick the Text tool (T), click the canvas and type Get started.
- With the text layer selected, press Shift+A. Figma wraps it in an auto layout frame; rename the frame Button.
- Set horizontal padding to 16 and vertical padding to 10. Give the frame a fill color and a corner radius of 8, and make the text white.
- Set width and height to Hug contents.
- Optional: drag a 16 px icon into the frame beside the label, set the gap to 8 and center the alignment.
- Press Option+Cmd+K (Mac) or Ctrl+Alt+K (Windows) to turn it into a component.
Now test it: change the label to Get started for free. The button widens and the padding stays exactly 16 and 10. If it doesn’t grow, the frame or the text layer is set to Fixed.
Responsive layouts with Figma auto layout
Auto layout makes a design respond to its content; Fill, min and max limits, wrap and grid make it respond to screen width too. The pattern: the outer frame sets the width, inner layers fill it, and limits stop them getting too narrow or too wide.
- Fill plus limits for elements that stretch within a range.
- Wrap for rows of cards or tags that reflow onto new lines.
- Grid with fr tracks for columns that share space by ratio.
- Constraints only for layers set to Ignore auto layout, or for an auto layout frame inside a regular frame. Children in the flow can’t use constraints, so they rely on resizing.
Walkthrough: a responsive card
- Draw a rectangle for the image, 180 px tall, and give it an image fill.
- Add a title and a short description as two text layers. Select both, press Shift+A, choose vertical and set the gap to 4.
- Add an instance of the button you just built.
- Select the image, the text group and the button, press Shift+A and choose vertical. Set the gap to 12, padding to 16 on all sides and a corner radius of 8.
- Set the image, the text group and both text layers to Fill container width. Keep the button on Hug.
- Give the card a min width of 240 and a max width of 400.
Drag the card’s edge: the image and text stretch, long titles break onto new lines, and the card stops at 240 and 400 px. If something stays rigid, check that layer’s resizing first. Put three cards in a horizontal frame with wrap on, and they reflow into fewer columns as it narrows. Figma’s own responsive card project uses a similar setup with constraints for an image overlay.
Nesting example: build a navbar with auto layout
Real screens are built by nesting simple Figma auto layout frames, each handling one direction with its own padding and gap. A navbar shows the idea well: three levels, each doing one job.
- Links group: type three link labels, select them, press Shift+A, choose horizontal and set the gap to 24.
- Actions group: select a Log in text layer and your button instance, press Shift+A, choose horizontal and set the gap to 12.
- Navbar: select the logo, the links group and the actions group, press Shift+A, choose horizontal and set the gap to Auto (Between). Add 16 vertical and 24 horizontal padding, and center the alignment.
- Resizing: set the navbar to Fill container inside your page frame, or Fixed at your desktop width. Keep the logo Fixed and both groups on Hug.
Resize the page: the logo stays left, the actions stay right and the links sit with equal gaps between them. For mobile, add a second variant that swaps the links for a menu icon. If one frame is fighting to arrange items in two directions, split it into two nested frames.
Figma auto layout with components and variants
Auto layout and components work best together: the main component holds the layout rules, and every instance inherits them. Each component needs its own auto layout; Figma has no bulk option for adding it.
| Action | Main component | Instance |
|---|---|---|
| Adjust padding | Yes | Yes |
| Adjust gap | Yes | Yes |
| Reorder layers | Yes | No |
| Add layers | Yes | No |
| Delete layers | Yes | Hides the layer only |
A useful trick from Figma’s documentation: add a placeholder icon at 0% opacity to the main component, so instances can swap in a real icon later without changing the structure.
For variants, build each state (default, hover, with icon) as its own auto layout component, select them all and click Combine as variants. Figma places them in a component set and keeps their arrangement. Each variant keeps its own auto layout settings, so one can even use a different flow. The top-left variant becomes the default.
Creating variants works on all plans; publishing them to a library needs a paid plan. Figma’s variants guide covers property naming in detail.
Troubleshooting common Figma auto layout problems
Most problems with auto layout in Figma come from a resizing setting on the wrong layer. Check the parent and the child before changing anything else.
Fill container is greyed out
- It’s a top-level frame. Fill only works for children of an auto layout frame. Move the layer into one, or wrap it in one.
- The parent isn’t auto layout. A child of a regular frame or a group can’t fill. Select the parent and press Shift+A.
- The layer ignores auto layout. Resizing options don’t apply to it, so turn Ignore auto layout off.
Items are overlapping
- A negative gap. Set the gap to 0 or higher, or switch it to Auto.
- Fixed-size text. Fixed text boxes don’t grow with their text, so long text spills onto siblings. Change the text layer’s resizing so it grows with its content, or set its width to Fill container.
- A layer set to Ignore auto layout. It doesn’t push its siblings; turn the setting off if it belongs in the flow.
- A legacy frame with an Auto gap. Figma’s update notes say the updated version stops an auto gap at 0, so children collapse to the start instead of overlapping. Updating the layout version often fixes this.
The frame won’t shrink
- The frame is Fixed. Dragging it or typing a size switched it to Fixed. Set it back to Hug contents.
- A child is set to Fill. A Fill child turns a Hug parent into Fixed on that axis. Set the child to Hug, or resize the parent yourself.
- A child is Fixed or has a min width. The parent can’t hug smaller than its largest fixed child, so check every child’s width and limits.
- Padding. In the updated version, a frame can’t be smaller than its total padding plus any included inside stroke.
Auto layout Figma cheat sheet: shortcuts and settings
Keep this table open while you work. Shortcuts that act on the alignment box need the box selected first.
| Action | Mac | Windows |
|---|---|---|
| Add auto layout | Shift+A | Shift+A |
| Suggest auto layout | Control+Shift+A | Ctrl+Alt+Shift+A |
| Remove auto layout | Option+Shift+A | Alt+Shift+A |
| Set all padding sides | Cmd-click a padding field | Ctrl-click a padding field |
| Change alignment | Arrow keys | Arrow keys |
| Align to an edge | W, A, S, D | W, A, S, D |
| Toggle text baseline alignment | B | B |
| Toggle Auto gap (space between) | X | X |
| Hug contents on one axis | Double-click an edge | Double-click an edge |
| Fill container on one axis | Option+double-click an edge | Alt+double-click an edge |
| Duplicate a child | Cmd+D | Ctrl+D |
| Create component | Option+Cmd+K | Ctrl+Alt+K |
Frequently Asked Questions
What is the shortcut for auto layout in Figma?
Press Shift+A on Mac or Windows to add auto layout to the selected layers. Option+Shift+A on Mac or Alt+Shift+A on Windows removes it. Suggest auto layout, which adds several nested frames at once, uses Control+Shift+A on Mac and Ctrl+Alt+Shift+A on Windows. With the alignment box selected, X toggles Auto gap and B toggles baseline alignment.
How do I remove auto layout in Figma?
Select the frame and press Option+Shift+A on Mac or Alt+Shift+A on Windows, or click Remove auto layout in the right sidebar. To remove it from a frame and every nested frame, right-click and choose More layout options, then Remove all auto layout. It can’t be removed from a component instance, so detach the instance or edit the main component.
How do I make Figma auto layout wrap?
Select an auto layout frame, choose the horizontal or vertical flow, and turn on Wrap. Children then move to a new row or column when they run out of space. Give the frame a set width, or a fixed height for vertical wrap, so it has an edge to wrap at, and use the second gap value to space the wrapped rows.
Does Figma auto layout have a grid option?
Yes. Figma grid auto layout is one of three flows, alongside vertical and horizontal. You set the number of columns and rows, size each track as Fixed, Hug or Fill using fractional fr units, and let children span several cells. Grid items don’t wrap. Grid auto layout is different from layout guides, which are visual aids and don’t move content.
What does space between do in Figma auto layout?
Space between is the default Auto spacing mode, labeled Between. When you set the gap to Auto, children spread out to fill the frame with equal gaps and no extra space at the edges, like CSS justify-content: space-between. Figma also offers Evenly, which spaces gaps and edges equally, and Around, where each gap is twice the edge space.
What is the difference between auto layout and constraints?
Auto layout controls how children are arranged and resized inside a frame, using flow, gap, padding and resizing. Constraints pin a layer to the edges or center of a regular frame when that frame resizes. Children in an auto layout flow can’t use constraints; only layers set to Ignore auto layout, or auto layout frames inside a regular frame, can.
Should I update old frames to the new auto layout version?
Usually, yes. Since July 2026, new frames use the updated, flexbox-like version of Figma auto layout by default, and switching back to legacy ends in January 2027. Update with the Actions menu commands for a selection or a page, then review frames with large padding, mixed stroke settings or single-child Auto gap stacks, since those are the most likely to shift.
Next steps
Put Figma auto layout to work on a real project. Our step-by-step Figma wireframe guide is a good place to block out screens, and you can practice nested rows next with our guide to creating a table in Figma. For inspiration, browse the UI/UX design trends for 2026 or these portfolio website examples. If you’d rather hand the design work off, our Figma UI/UX design service can design the screens and components for you.
Photo by Hal Gatewood on Unsplash
