Layout grid and auto layout together?

Is there a hack that would allow me to use both auto layout and a layout grid for a top level frame at the same time? It seems like I can only do one or the other.

If you first set up the layout grid and after that enable auto layout, the grid should stay.

4 Likes

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.

1 Like

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.

2 Likes

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

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

2 Likes

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.

9 Likes

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:

4 Likes

Thanks so much!

1 Like

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