LAUNCHED: Wrap elements in Auto Layout to multiple lines

Very much needed for me to stop selecting and creating multiple auto layouts.

Is there a tutorial video for the AutoLayout plugin. I can’t seem to get the elements to wrap to the next row. Ive created tags that can be added to a list from the filter options. I would like the tag to move to the next row once it no longer fits.

1. Describe the problem your experiencing and how your idea helps solve this

When putting together prototypes to show responsiveness, it is very annoying to have to manually ‘wrap’ a row of components by creating two or more rows. I’d love for the behavior to be similar to the ‘wrap’ flexbox css property where I could select wrap or not and the list of components would wrap to a new row if their combined width is greater than the width of the parent

2. Add as much context as possible (screenshots, Figma files, mockups, etc.)
   Current Experience (left), Desired Experience (right
   

   
   
   )

3. Ask questions to bring the community into the conversation
   (e.g. Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?, etc.
   Has anyone found a way to do this??

+1 plz add this feature

We’re desperate for this feature, It’s such a basic behaviour of the web. Hope you can introduce this soon!

I also need this feature…
Hopefully it will be added soon!

Adding my voice here. I need this feature. This is one of the few things causing me to look at other tools (like moving away from Figma). We have a robust export pipeline from the API so the handoff effort from design to dev is almost non-existent. Simple things like this cause workarounds and messes that are hard to workaround.

This is great - but I would love to have that data available on the API! It’s not exported 😦

your great data and good information.

I also support this idea and I am hoping that this is going to be implemented very soon or at least we will get an additional informations is it planned and for when

Yes please! Very much want this.

Adding more noise. We want it Figma!

Someone on r/FigmaDesign created another neat concept for how this might work: link.
I love the idea of applying the ‘Grid’ concept to Auto Layout. This would remove SO MANY redundant layers when one needs to go Horizontal + Vertical, which obviously happens quite a bit.

Ping Figma devs - comon we all need this!

+1 please 🙂

Would be amazing to have. It would be nice to create a grid with rectangles and have it auto-wrap depending on what rectangles you hide or unhide.

Our team really need this.

This feature would be a game-changer 🔥🔥

I vote for this as well. Lack of this feature is top reasons for our figma users resorting to all kinds of undesirable workarounds.

Nice feature to have. +1

New to Figma… Was trying to wrap, but couldn’t. Searched for “how to…” Found this thread. Shocked this functionality doesn’t exist already. Yes, please make this available soon! @anon21722796

Adding a +1 on this! I work on a rich text editor and making realistic mockups of it is painful currently!

I want to make autolayout work in more than one direction.

When I horizontally resize a frame with autolayout I want it to shuffle items to a second row.

So if I have 12 items on a horizontal autolayout, and I resize the width to half, it moves the last 6 items to a second row.

I don’t know how useful this would be to other folks, but it would be a cool way of starting to get some responsive behavior into autolayout.

this is the flex-wrap functionality everyone above mentioned.
I’m a developer and really want our design team to be able to use it in Figma as that’s what CSS flex-wrap does.

I want to create an auto-layout that stacks cards horizontally until it reaches the border of the container, then starts a new row underneath (vertically) and continues to stack items in that row horizontally. As you can see in the screenshot, my horizontal constraint is set to “fixed width” (have also tried fill container) and my vertical constraint to “hug contents”. When I add more cards, the container overflows. Is there a function for this that I’m missing, or a hack that people use (assuming I’m not the only one trying to do this). The only info I’ve been able to find is this forum from 2021 which doesn’t have any answers Auto-Layout -> Make a Grid.