Layout grid and auto layout together?

Gleb - Could you explain more about your suggested approach? I’ve tried creating a frame with a layout grid, and then adding auto layout - but the grid disappears when I do so. This leaves me with just horizontal or vertical options. I see a number of people in here asking about grid and auto layout together. It would seem this is possible somehow since this is demonstrated in the first video displayed on the Figma site - at one point swapping components horizontally between two columns (or vertically between two rows). Hard to imagine they would produce this video if Figma didn’t have this capability. Any thoughts on how this is done?

This was considered a bug so it seems the bug got fixed now.

I don’t understand.
Are you saying the ability to apply an auto layout to a frame that had a grid was a bug (which has since been fixed)?

The larger question remains. Are you aware of how to achieve the same layout options as shown in the Figma video (swapping items between columns or rows in an auto layout)?

Any assistance with this is greatly appreciated. Thank you in advance.

Yes.

I don’t understand what you mean, can you send the video link?

Sure. It’s the first video shown on the homepage of Figma.com.
The dedicated link is:
http://player.vimeo.com/video/365886635?badge=0

The swap I’m referring to happens at 0:19.

There is no auto layout here, this is Smart Selection grid. Dragging one of the items in a grid via the pink circle in the middle while holding Cmd/Ctrl makes the items swap instead of simply moving one item.

That’s great to hear, and thank you. Didn’t really give a crap whether it was auto layout or not - just wanted to know how to do it. But seeing as how this is the functional equivalent of auto layout with a grid, it’s a shame this answer hasn’t been shared on the four or more other forum threads where this question has been raised.

Regardless, I appreciate the answer. Thanks again.

Can you show the threads? I don’t think anyone asked about this specifically.

Here’s one:

And another:

Thought there were more, but this is only after a quick search.

Vote here if you want display: grid layout (both in x,y;↕️,↔) though

Nope, you can’t use both Layout grid and Auto layout, only smart selections. Would be great though.

Here’s a workaround for using layout grids with auto layout. If you first save the layout grid as a grid style or apply a grid style and after that enable auto layout, the layout grid stays. You can also change the grid or add another. However, be careful that if you remove all the layout grids, you won’t be able to add grids again.

Hi!

Have some issue with some components with auto-layout those don’t let add a layout grid to them. If you remove the auto-layout works, but with it not… WTF. Even the option “Layout grid” is not visible. Any idea?

Hi @Placido,

This is expected behavior as we don’t currently support layout grids on auto layout frames, but you can vote and provide any additional feedback here:

Thanks so much!

This topic was automatically closed after 20 hours. New replies are no longer allowed.