Skip to main content
Solved

Figma autolayout changes

  • August 27, 2026
  • 1 reply
  • 25 views
Kristaps_Stikuts

The recent figma autolayout update has brought up conflicting emotions. From one point it’s great that the autolayout would work closer to code, but on the other hand for teams that do more complex projects than Web UI, this creates a loooot of issues.
 

3 things in particular, that I know for sure, will break what we've been using in case of complex layouts:

  • "Padding now always gets the room it needs" - Often when necessary, I relied on the fact that you can set auto-layout frame size to 0 and add paddings inside to allow precise position of elements without affecting the size and position parent and sibling frames. Now that won't be possible.
  • ⁠"Inside strokes counting in autolayout" - again pretty sure this will break layouts where inside stroke was used.
  • ⁠"Stacks with gap set to auto no longer overlap" - A lot of cases it's better to have parent in the desired size than have the parent rely on the children. Then we will get uneven distances and paddings in some cases. 

All of this would be fine, except for the fact that the previous auto layout will be discontinued and there is no way to switch new auto layout to the old one for newly created frames, forcing us to rework previous layouts if we want to make new changes.

Best answer by adamsmasher

Hi ​@Kristaps_Stikuts - thanks for your post. I appreciate you providing some real-world examples of how this affects your workflow.

 

First, some good news: you can switch back to the previous auto layout version, including on newly created frames. This isn't going away for a while, either. Each auto-layout frame has a Layout setting in the Auto Layout settings panel which toggles between Latest and Legacy, and that option will be available until January 24, 2027. So for now, if a frame breaks under the new behavior you can flip it back to Legacy on a frame-by-frame basis (or use the Update layout version for selection/page action in the Actions menu to preview changes before committing). One thing to keep in mind, though: that toggle isn't overridable on component instances; only on frames and main components. If you're hitting this inside a design system, you’ll want to change this at the component level rather than per-instance.

 

To address the three specific behaviors you called out:

  • Padding/frame sizing
    • This brings it closer to code by matching how CSS border-box works: a frame can no longer render smaller than its padding (plus inside stroke width, if included). If you were relying on 0-size frames with padding for precise positioning, you might want to simply reduce the padding to bring it back to a particular size.
  • Inside strokes
    • Only inside strokes count toward layout now; center/outside strokes are visual-only. For this, you might want to try a similar approach that developers use with CSS: a nested spacer frame (an extra wrapping frame with padding sized to match what the outside/center stroke used to occupy).
  • Auto gap overlap
    • Gap in an auto-gap stack no longer goes negative; children pack tightly instead of overlapping. You could try setting a negative gap value manually since that is supported, rather than relying on auto-gap to produce overlap.

 

Hopefully those are helpful for you going forward, particularly since you have a lot of time to make the changes before the toggle goes away. Regarding the update itself, you can also read more about the changes in our help article on using auto-layout with CSS flexbox in mind. In the meantime, let me know if you have any other questions!

    1 reply

    adamsmasher
    Figmate
    • adamsmasher
    • Figmate
    • Answer
    • August 27, 2026

    Hi ​@Kristaps_Stikuts - thanks for your post. I appreciate you providing some real-world examples of how this affects your workflow.

     

    First, some good news: you can switch back to the previous auto layout version, including on newly created frames. This isn't going away for a while, either. Each auto-layout frame has a Layout setting in the Auto Layout settings panel which toggles between Latest and Legacy, and that option will be available until January 24, 2027. So for now, if a frame breaks under the new behavior you can flip it back to Legacy on a frame-by-frame basis (or use the Update layout version for selection/page action in the Actions menu to preview changes before committing). One thing to keep in mind, though: that toggle isn't overridable on component instances; only on frames and main components. If you're hitting this inside a design system, you’ll want to change this at the component level rather than per-instance.

     

    To address the three specific behaviors you called out:

    • Padding/frame sizing
      • This brings it closer to code by matching how CSS border-box works: a frame can no longer render smaller than its padding (plus inside stroke width, if included). If you were relying on 0-size frames with padding for precise positioning, you might want to simply reduce the padding to bring it back to a particular size.
    • Inside strokes
      • Only inside strokes count toward layout now; center/outside strokes are visual-only. For this, you might want to try a similar approach that developers use with CSS: a nested spacer frame (an extra wrapping frame with padding sized to match what the outside/center stroke used to occupy).
    • Auto gap overlap
      • Gap in an auto-gap stack no longer goes negative; children pack tightly instead of overlapping. You could try setting a negative gap value manually since that is supported, rather than relying on auto-gap to produce overlap.

     

    Hopefully those are helpful for you going forward, particularly since you have a lot of time to make the changes before the toggle goes away. Regarding the update itself, you can also read more about the changes in our help article on using auto-layout with CSS flexbox in mind. In the meantime, let me know if you have any other questions!

    Terms & ConditionsAccessibility statement