LAUNCHED: Wrap elements in Auto Layout to multiple lines

A must have feature to bridge the gap between designers and developers even further.

I too really could use this feature.

+1 yes please :nerd_face:

This can also be done in CSS with display: inline-block or float: left

as I see it, Figma’s role is to anticipate CSS. It can also be wishful, but ultimately it should be pragmatic and let designers point developers to basic CSS features like wrapping blocks to multiple lines. Is Figma a CSS interface, and if not, why not? Couldn’t it be built as a UX oriented interface on top of something like Chrome? Surely that would make adding features such as this a breeze (not to mention the benefits of aria controls for accessibility), compared to having to reinvent the wheel every time, or am I missing something?

1 Like

I only spent about 2 days with Figma and ran into this missing feature.
I can only put out my vote to implement this feature as soon as possible.

Thank you

Thomas

1 Like

I do believe that Figma should match HTML 100%, the way that Webflow does, by fully supporting CSS grid + Flexbox functionality, for at least two reasons:

  1. CSS Grid/Flexbox properties have been designed with maximum layout flexibility in mind, and they’ve been a god-sent since then.
  2. This would further reduce the gap between design and front-end development.

That said, I imagine this may not be an easy challenge for the Figma enginnering team. In a Nov 2020 post, they explain that autolayout was inspired by Flexbox, but after some testing, they decided to chose a compromise between a perfect match with Flexbox, and making it easy for people to use. It’s also to note that for optimal layouts, CSSs may need custom manipulations that go beyond a simple application of CSS grid/Flexbox techniques.

5 Likes

+1 from Bulgaria :slight_smile: the wrapping feature will solve so many problems

1 Like

This plugin works well in a main component. but it pretty unreliable with overall auto-layout in variants.

+1 for this feature

1 Like

+1 for auto-layout content wrapping. This would be huge!

+1 make the auto layout that much more magical… please!

Yes please! +1

1 Like

omg, yes, please - if I could vote on an idea more than once I would seriously consider adding half my remaining votes to it.

I don’t actually think that the full capabilities of flex box would require too much complexity if some of the options are in the main UI and others are in the advanced menu where you can currently choose between packed/distributed, include/exclude borders, first/last on top stacking order and text baseline.

I’d put the following directly on the properties panel:

  • horizontal and vertical z-wrap options (as others have described above)
  • a field for the number of columns/rows along the horizontal/vertical

When the the horizontal/vertical resize of the container is “fixed”, contained items - which can have any resize option - are automatically wrapped at the specified number of columns/rows,

When the horizontal/vertical resize is set to “fill” and the advanced “Spacing mode” setting is “Packed” the same number is used and all contained items are set to “fill”. If the resize is still fill and spacing mode is changed to “Space between” then column/row count switches to “Auto” and the wrap is based on the width/height of the container frame and the width/height of the contained items. In this latter case, items set to “fill” will always fill up what remains of the width/height of the current row/column, forcing the next item into the following row/column. This does mean that if all items are set to “fill” the result devolves to a single column/row but that’s okay because, if the user wants them to be in multiple columns/rows they just have to switch back to the “Packed” spacing mode.

“justify-content” and “align-content” values are handled by the existing alignment square.

“row-gap” and “column-gap” are handled by showing both the horizontal and vertical “spacing between items” elements

“align-items” is on the advanced panel and only enabled when the horizontal or vertical z-wrap is selected. For the horizontal z-wrap, it uses the same three icons as text does for vertical alignment. For the vertical z-wrap, it uses the same icons as text does for horizontal alignment.

16 Likes

Needs to happen @Figma_Support

wen integration?

cmon guys, u can do it! :slight_smile: :slight_smile:

+1 please, much needed feature

2 Likes

+1 Figma is so feature-rich that I was surprised auto-layout didn’t work like CSS Flexbox / Grid

1 Like

How is this not a thing yet?! Doesn’t everyone run into this problem every time they use auto layout?

1 Like