LAUNCHED: Wrap elements in Auto Layout to multiple lines

This looks absolutely heavenly. Only took 2 years for it come! But a very welcome sight indeed.

Anyone have an idea when this will be released?

Hey @Richard_Bennett,

This is definitely on our Auto Layout team’s radar, but we don’t have an exact timeline to share just yet. Stay tuned!

We are also desparate for this feature. Our latest use case is for attaching a separate text layers for mandatory asterisks and optional text strings. We would also use this for wrapping pills in filters.

Thanks for the additional feedback, @Luke_Emmerson-Finch1 !

The Auto Layout team has already been working on this. We hope to have a better timeline to share in the future, but rest-assured - it’s coming!

Not understanding why it needs to be ‘wrap’ and not just replace row/col with a grid. That is going to be the most similar behavior to Flex, Grid, and old skool Block Floats. Maybe just a simple ‘x cols’ option to help lock it or set to col vs row.

All the other features to wrangle the items are there: alignment, width + height control, gap (maybe make this h vs. v as well), padding, etc. As someone who prototypes in code often, this would be a welcome change.

Hey David,
I think just having only a grid option will not resolve the most painful point of creating layouts, responsiveness. Even Flex and Grid have a wrap function and this makes things much easier to create layouts. Just having a grid will still result in the same thing we are doing now, changing the settings of the auto layout to achieve a new layout, similar to creating breakpoints in css. Imagine just setting things to wrap and then copying the frame and just adjusting the width, this will result in most of the work done. You will have to adjust just some parts or maybe none to have the final layout.

@Mihai_Marcu
They essentially do the same. But keeping the row/col buttons for flow is a valid point for sure. Though it still doesn’t solve the nuanced control of responsive design and setting columns at breakpoints.

Yeah you can rely on the width of the item either in the style of inline blocks, auto flex blocks, or perhaps set percentages. But you can’t guarantee column width or determine say a 4-col for desktop, 2-col tablet, 1-col mobile. You could add min-max widths ala css grid to the width/height settings to keep inputs few.

But it is a narrow line between simplifying flexbox in Figma vs. just building in code.

@David_Balogh I wasn’t saying it is perfect, and I think nobody expects to have the wrap solve every use case, but it still makes things easier to work with. I was trying to highlight that now if you need a 2 by 2 grid, you need one frame to have the 2 rows each with the columns inside. This results in the need to change the settings of the contained rows to use “column” orientation to achieve a 1 column layout. This is basically the same situation as using a grid option, and you still need to change the settings to have the layout become from 2x2 to 1x4. If the wrap option were available, you could have only one container frame and its 4 children. Each child should have a min-width, let’s say, 343px and a max-width of 560px. With the wrap option enabled, the wanted change happens without changing the container’s settings. And as I said at the start, this will only solve some use cases; we will still need to change some things manually, but it would only be some elements.

Woohooo! Thanks for hearing us Figma!