Prefer English?
Prefer English? Switch the website language for a better experience.
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.
{{webdesign}}
At Mazette.co, we will not pretend otherwise: this is an update we had been waiting for. Not because it is flashy, but because it fixes a day-to-day problem every designer who uses auto layout seriously has run into.
On our Webflow projects, we build a huge number of interfaces with dynamic content: CMS collections, filters, lists that grow depending on the data. Until now, getting a clean vertical wrap in Figma required workarounds that had no place in a design process meant to be smooth. We were losing time on technical details instead of focusing on the real value: the user experience.
The real benefit, in our view, is the convergence with CSS flexbox. The closer Figma gets to actual web behavior, the faster and more predictable the handoff to Webflow becomes. A design that stays true to the final output means less ambiguity, fewer questions, and a site that genuinely matches what was approved in design.
Our only gripe: this feature could have arrived sooner, given how obvious the gap has been since auto layout was introduced. But we would rather welcome a good practice late than see a bad one become the norm. This is exactly the kind of improvement that, added up with others, keeps turning Figma into a tool that is more and more aligned with real development.
If you work with Figma every day and want your designs to translate faithfully into a high-performing Webflow site, that is exactly what we do. Discover our Figma expertise or let's talk about your project directly.
Code
Over 120 companies have already stepped out of the shadows with us.
When an auto layout is set to vertical flow, content that exceeds the frame height automatically shifts into a new column instead of overflowing the frame. This mirrors how flex-wrap behaves in CSS, making designs more faithful to the final rendered output in development. You just need to enable the wrap option in the properties of the vertical auto layout to use it.
Horizontal wrap already existed and allowed items in a row to move to the next line when they exceeded the available width. Vertical wrap does the opposite: it manages height overflow by creating a new column, which is useful for grids or lists organized vertically. Combined, both options finally cover all the responsive layout cases that previously had to be handled manually.
Auto layout lets elements automatically reposition and resize as content changes, avoiding the need to manually adjust everything with every edit. It is the foundation of a solid, consistent design system, especially valuable for teams bridging design and development. It also brings Figma closer to how code actually works, particularly CSS flexbox, which makes the move to production much smoother.
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.
