Figma Updates Auto Layout to Match Real CSS Behaviour

On 24 July 2026, Figma released an update to auto layout, the tool's core layout system, designed to bring its behaviour closer to how CSS actually works in a browser.

Until now, auto layout and CSS diverged in small but persistent ways: how gaps, padding and sizing interact, how wrapping behaves, and how elements resize relative to their parent. Those differences meant developers had to add manual workarounds at handoff to make the shipped site match the canvas design. Figma's release notes put it plainly: "Small differences between how auto layout and CSS handle layout meant developers had to add workarounds at handoff to make the built version match the canvas. This update closes those gaps."

New frames created after the update automatically use the revised auto layout behaviour. Existing frames keep the legacy version so nothing breaks retroactively, though teams can opt in manually. Figma says the legacy option stays available until January 2027, giving studios a long runway to migrate.

For anyone handing designs to developers, this is a practical fix rather than a flashy one. A large share of design QA time on web projects goes into chasing pixel differences between Figma frames and the built page, and most of that gap comes from exactly the mismatches this update targets: flex style sizing, gap behaviour and wrapping rules that never quite lined up.

It also lands a month after Figma's Config 2026 event introduced Code Layers and Figma Motion, both of which depend on auto layout producing predictable, code like output. A layout engine that behaves more like CSS makes those AI assisted, code generating features more reliable, since there is less translation happening between what a designer draws and what a browser renders.

We spend a fair amount of our own handoff time on exactly this kind of mismatch, so it is a welcome, if overdue, fix.