Figma | Vertical Wrap Adds Responsive Multi-Column Layouts
Figma added vertical wrapping to Auto Layout on September 25, 2026. Designers can build a fixed-height arrangement that continues into another column as its content grows, making a specific multi-column behavior easier to describe on the canvas.
Content can move into the next column
With vertical flow, items run from top to bottom and wrap when the available height is filled. The feature preserves Auto Layout order; it is not a masonry layout.
A list of product details or a set of short biographies could use this pattern. The key decision is the reading sequence. A viewer should understand whether to continue downward and then move across, rather than assuming the content is organized as horizontal rows.
Frame height is part of the design rule
Figma's guide identifies fixed-height, multi-column layouts as a use case. Adding, removing, or resizing items can change where the flow moves into another column.
Test the arrangement with a longer item before approving it. A paragraph that grows can move later content and alter the visual balance. That behavior may be appropriate for a flexible collection, but it deserves a clear explanation when a developer implements the layout.
Choose the layout pattern before matching the appearance
Vertical wrapping and a grid can look similar in a carefully balanced example while organizing items differently. Describe the intended sequence and sizing behavior rather than asking a developer to reproduce only the screenshot.
For a website checklist, consider how the visitor scans the items and what happens on a narrower screen. The desktop composition may use several columns while the mobile version needs a simpler reading order. Keep that decision part of the component's specification.
Review the flow with realistic content
Try a short collection, an uneven collection, and an added item. Inspect the result at the frame heights and widths that represent the intended interface. This reveals whether the column breaks remain useful when the content stops matching the demonstration.
When handing off the design, include the content order and the reason for the height constraint. A clear behavior note can prevent a visually similar implementation from using a different reading sequence or an unsuitable overflow rule.
REMEMBER: Vertical wrap preserves Auto Layout item order and creates new columns after available height is filled. Test uneven content and document the intended reading sequence.{alertSuccess}
Daisuki's Take: What This Means for Web Designers
We see vertical wrap as useful when the design truly needs a top-to-bottom flow across columns. It gives the canvas a clearer way to represent that behavior.
We would choose it based on content order, not only the appearance of a balanced demo. A different layout pattern may suit a different reading task even when both can produce several columns.
The practical gain is a more precise handoff. Show how the content moves, test the awkward cases, and explain the constraint that should guide the frontend implementation.
Sources and Recommended Links
- Vertical wrap available in auto layout | Figma Official Release Notes
- Guide to auto layout | Figma Official Help Center
