Prefer English?
Prefer 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 |
{{webdesign}}
Figma just announced an update that looks minor on the surface but turns out to be remarkably useful day to day: auto spacing in auto layout gains two new behaviors. Until now, there was only one default logic, quietly renamed "Between" in this update. It remains unchanged: equal spacing between elements, nothing on the edges.
Two new options join this mode:
Nothing revolutionary on paper. But in practice, these are exactly the three values offered by the CSS justify-content property in flexbox (space-between, space-around, space-evenly). Figma is not reinventing anything here: it is finally aligning its vocabulary and behavior with the code that actually runs interfaces.
Anyone who has ever mocked up a card grid, a tag list or a navigation bar knows how quickly manual spacing turns into a headache. Adding or removing an element meant recalculating margins by hand, or hacking together invisible spacers to fake an even distribution effect. It was not just a waste of time: it was also a source of errors and inconsistencies between Figma screens and the final browser render.
By faithfully replicating CSS behavior, Figma closes a gap that has existed for years between the designer's intent and the developer's reality. An "Around" spacing in Figma now behaves exactly like an "Around" spacing in CSS. No more rough translation, no more "close enough".
| Spacing mode | Behavior | CSS equivalent |
|---|---|---|
| Between | Equal spacing between elements, nothing on the edges | space-between |
| Around | Equal spacing between elements, half-space on each edge | space-around |
| Evenly | Every gap strictly identical, edges included | space-evenly |
This announcement fits into a deeper trend at Figma: bringing the design tool ever closer to the real constraints of development. We already saw this with the recent updates around motion and shaders, where Figma is working to shrink the gap between what gets designed and what actually runs in a browser. Responsive spacing follows the same logic, at an even more fundamental level: the layout itself.
For a team working with a Design System, this kind of terminological and functional alignment carries value well beyond simple convenience. It means less documentation needed to explain "what the designer meant", and less interpretation required on the handoff side.
A quiet update, but one that will bring relief to plenty of designers. Figma has just added vertical wrap to auto layout. In practical terms: when your flow is set to vertical and the content exceeds the frame height, it no longer overflows. It cleanly shifts into a new column instead.
A feature that sounds minor on paper. It is anything but, if you build interfaces with a lot of dynamic content: tag lists, product cards, galleries, stacked filters.
Before this update, only horizontal wrap existed in auto layout. Useful for rows of elements that need to break onto the next line. But as soon as your layout was designed with vertical columns and variable content, you had to improvise: nested frames, manual duplication, or worse, a silent overflow that quietly broke the design without warning.
In short: fewer manual calculations, and greater consistency between what you design and what gets coded. A technical detail with a very real impact on production speed.
| Situation | Before vertical wrap | With vertical wrap |
|---|---|---|
| A growing list of tags | Frame overflow or manually nested frames | New column created automatically |
| Grid of product cards | Duplication and repositioning with every addition | Automatic reorganization into columns |
| Fidelity to the final code | Gap between the design and CSS flexbox | Behavior aligned with flex-wrap |
Auto layout is the foundation of any consistent design system in Figma. Every new option that brings it closer to actual code behavior saves time during implementation and reduces back-and-forth between designers and developers. Vertical wrap fits right into that logic: fewer components breaking in production, more predictability in complex layouts.
A design that behaves like the final code is a design the whole product team can trust.
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 180 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.
Impactful titles, polished meta descriptions, sitemaps, Schema.org, Hn structure, and audits: these are the SEO foundations that make your content readable by both Google AND generative AI. We cover both simultaneously.
With over 180 clients, our agency is one of the few in France to hold the Webflow Premium Partner label, supporting you in every area, including custom web design, sophisticated automation, conversion optimization, and SEO and GEO visibility.
We create bespoke web designs focused on performance, user journeys, and conversion. Join over 180 clients who have trusted us to elevate their brand.
