Use auto layout with CSS Flexbox in mind

This article covers changes coming to auto layout as part of an update that brings it closer in line with how CSS flexbox behaves. Check out these other articles to learn more about working with auto layout in Figma Design.

• Guide to auto layout: An overview of auto layout, how it works, key properties, and browse a collection of auto layout resources.
• Use the horizontal or vertical flows in auto layout: Learn about the properties available to the horizontal and vertical flows in auto layout.
• Use the grid auto layout flow: Learn how to work with columns, rows, and cells with the grid layout flow.

Why auto layout is changing

Auto layout was designed to mirror how the web renders layouts, but a few edge cases never quite matched CSS. This meant that hand-off from design to code (and code to design) sometimes required workarounds—like using a negative-offset outline to fake a border, or manually double-checking that a frame's padding actually fit inside its bounds.

The new auto layout version closes these gaps. Here’s what’s changing:

• Padding now always gets the room it needs
• Outside and center strokes are no longer accounted for in a layout, only inside strokes count
• The stroke setting no longer affects child layers
• Children set to fill container now use the border-box model
• Stacks with gap set to auto no longer overlap
• A single child now aligns to the start instead of the center

What is changing

Padding now always gets the room it needs

Previously, you could set a frame's horizontal padding to 30px on each side (60px total) but still set the frame's width to 50px and Figma would render the frame at 50px wide, squeezing 60px worth of padding to fit.

In the new version, that same frame can't be narrower than 60px. Its padding is always fully respected and ignore any max width set for the frame. If the frame has an inside stroke and strokes are included in layout, the stroke width counts toward that minimum too.

Strokes and layout

Only inside strokes count

Previously, strokes were ignored by default when calculating the size of an object, and thus leaving its parent frame or surrounding siblings unaffected. This didn't always match how CSS renders borders, so Figma offered a stroke setting in auto layout settings to choose to have strokes included in layout or excluded from layout calculations.

In the new version, inside strokes are included in layout by default, This means your designs will be more compatible with CSS out of the box, without needing workarounds like a separate border node or a negative-offset outline.

However, outside and center strokes are no longer counted in layout, even when a frame's stroke setting is set to included in layout. They'll still paint visually on the canvas, they just won't affect spacing, fill calculations, or any other layout math, and are not longer affected by the include/exclude setting for strokes.

The stroke setting no longer affects child layers

Previously, the strokes included setting on an auto layout parent frame would also impact any children with strokes so they would always be visible, even if the setting was only applied to the parent.

In the new version, this setting only affects the frame it's set on. A parent's stroke setting no longer has any effect on how a child's stroke is calculated. Each frame's strokes now follow its own rules, independent of its parent or children.

Children set to fill container now use the border-box model

When two or more children in an auto layout frame are set to fill container and have different padding and inside stroke widths, the new version changes how much content area each child gets.

Previously, children set to fill container would evenly occupy the available space—the length of space minus padding, gap, and strokes. This means a layer with a heavier stroke would end up with visibly less content area than a layer with a thinner stroke, even though both layers were technically the same size.

In the new version, Figma distributes space amongst fill container children by the children’s content area instead of by their size, matching the CSS border-box model. A layer with a thicker stroke will take up slightly more of the available width or height, so that its inner content area matches its sibling's. The new behavior for children set to fill container carries into prototyping and reflects how your designs will appear in development.

Gap set to auto

An auto layout frame with gap between items set to auto distributes the available free space between its children.

Stacks with gap between set to auto no longer overlap

When an auto layout frame has enough space for its children to fit, auto gap works as expected. However, previously, when the children didn’t fit, auto gap would go negative and cause the children layers to overlap.

In the new version, gap between in an Auto-gap stack will never go below 0. When children don't fit, they'll collapse to the start of the frame instead of overlapping, matching how space-between behaves in CSS flexbox.

A single child in an Auto-gap stack aligns to the start

Previously, a single item in an auto layout frame with gap between set to auto would be centered by default.

In the new version, a single child aligns to the left in a horizontal flow or the top in a vertical flow.

How to update to the new version

There's no urgency to upgrade your existing designs. Figma will support switching between both auto layout versions until January 2027, so you can upgrade any existing auto layout frames when you're ready.

Update a selection or page:

• Select a frame and choose the layout version from the dropdown in auto layout settings

• Or, use the Actions menu and search for:

  • Update layout version for selection
  • Update layout version for page

  Any updates that will result in visual changes for a frame, like a shifting layout or resized containers, can be reviewed before the upgrade is done, and you can always undo changes using Command / Control Z.

After upgrading a complex file, it’s good practice to review the file. Here’s what to look out for:

• Total padding is equal to or larger than a frame's minimum size
• Nested frames with different stroke settings on parent versus child
• Children set to fill container with mismatched stroke widths
• Any auto-gap stacks with a single child, which are the layouts most likely to look different after upgrading

What happens next:

• The new version is available as an opt-in for existing frames from the auto layout settings and the new version will become the default for newly created frames.
• In January 2027, the auto layout setting will change from a toggle to an Update button for all frames created with the legacy version.

Frequently asked questions