Better in English?
Better in English? Switch the website language for a better experience.
On July 24, 2026, Figma quietly rolled out one of the most significant changes to its layout engine since Auto Layout was first introduced. The announcement takes up just one line in the official changelog, but its impact is far from minor: Figma is updating Auto Layout to behave like CSS.
Until now, a subtle but very real gap existed between how Auto Layout handled certain behaviors (resizing, wrapping, size constraints) and how those same rules apply in modern CSS, particularly with Flexbox and Grid. The practical result: developers regularly had to add manual adjustments during handoff to make the coded version match the design validated on canvas.
This update closes that gap. Auto Layout now behaves much more like real CSS, which means what you see in Figma structurally resembles what will actually be produced in code.
Figma designed the rollout so it would not break projects already in progress:
This gradual approach gives teams time to test the migration on pilot projects before rolling it out everywhere, rather than facing a sudden behavior change across an entire component library overnight.
| Aspect | Old Auto Layout | New Auto Layout (CSS-aligned) |
|---|---|---|
| Resizing behavior | Figma-proprietary rules | Modeled on Flexbox / Grid |
| Design-to-code fidelity | Frequent gaps to fix | Direct match |
| Migration of existing files | — | Optional, reversible until January 2027 |
| New frames | — | New behavior by default |
At Mazette.co, Figma is our everyday tool for designing interfaces before building them out on Webflow. And with this kind of update, we get a direct benefit: less of a gap between the design file and the delivered site means less time spent re-explaining a layout intention that seemed perfectly clear on the canvas.
In practice, the legacy Auto Layout worked fine as long as you stayed in simple use cases. As soon as a layout got slightly more nuanced (conditional wrapping, nested resizing behaviors, multiple constraints), we regularly ran into situations where the Figma render no longer exactly matched what a real Flexbox or Grid setup would produce in CSS. The developer then had to make a call: follow the Figma file to the letter, even if the result looked a bit off, or deviate slightly from the design to respect sound CSS logic. Neither option was truly satisfying.
This update tackles that core problem head-on, rather than being a cosmetic feature. It is the kind of change that does not make headlines but genuinely changes the day-to-day work of a product-design-dev team.
Our only reservation: the coexistence window between the old and new versions, while necessary, can also create temporary confusion within teams if some files stay on the old behavior and others switch to the new one without clear documentation on the design system side. We recommend treating this migration as a proper project, with an upfront audit of critical components, rather than letting each designer switch over on their own timeline.
If you work with a product design team that builds interfaces in Figma before Webflow integration, now is the time to revisit your component libraries to take advantage of this improved match between design and code. And if your agency is exploring how to better connect Figma and Webflow day-to-day, our Figma agency page details our approach.
Code
Over 120 companies have already stepped out of the shadows with us.
This update aligns Auto Layout behavior with modern CSS layout rules, particularly around resizing, spacing, and constraints. In practice, whatever you design on the Figma canvas now behaves the same way once translated into code, without the small discrepancies that used to force developers to manually tweak the output.
No, it is not mandatory right away. Existing frames stay on the old version unless you choose to update them, while new frames automatically inherit the new behavior. You can revert to the old version until January 2027, which gives you plenty of time to test the migration calmly on ongoing projects.
Yes, that is precisely the point of this update. By bringing Auto Layout behavior closer to CSS Flexbox and Grid rules, Figma cuts down on the cases where a developer had to recreate a layout differently from what was visible in the design. For Webflow development workflows, where design fidelity really matters, this limits last-minute fixes during handoff.
