Skip to main content

Hi, could someone please help me. I am unable to set auto layout to auto distribute horizontally. It only let’s me do so when I specify auto layout direction. I am extremely confused by the settings in general because the first Icon is labeled Freeform which converts the auto layout to a regular frame without any indications. The top right icon does the same only it’s highlighted in blue. I also couldn’t understand Grid Beta. This used to be so you can set auto layout bi-directionally ↩️︎ it doesn’t seem to work in similar way but is rather building tool in somewhat of a separate category. Also, how often do you click Align or Grid boxes vs Vertical and Horizontal gap settings? It makes no sense! =\

 

Are you talking about the wrap? they moved it at the corner

 


@Raphael_M If you look at my screenshot it’s not there, but I do see it now. And I made a mistake earlier confusing fill with align auto.


Ahh. Yes because flex column doesn’t have flex wrapping and auto layout uses that principle so that’s why it’s not there. You’ll have to set it to row or horizontal first for it to appear.


@Raphael_M I was just about to update. Warp ↩️︎ showing only under Horizontal. You have 1 out of 3 chances to miss it completely. When it’s not showing, the empty space, what else is reserved there that the option is not enabled all the time? Even looks better that way.


Now that you said it. you’re right, they’ve hidden it instead of making it a kind of figma layout, like before.

Technically, they’re not wrong since the wrap is set on horizontal only but they’ve change the flex wrapping UX and made it harder for designers who have less knowledge regarding it.


Forgive me if I am wrong, but in the layout panel there used to be resize to fit which I believe was visible most of the time. So In the screenshot the only way to adjust auto layout frame is by toggling under Resizing Hug. However, doing so creates a single horizontal row and otherwise having to.  manually adjust the width. 

Looking for solution I was in Warp mode, which looks to be linked to horizontal flow only. However, if I click on Freefrom, let’s say by accident, and then click the top right button - that creates Grid. This is a little confusing to me because it feels like two distinct mechanics. Warp is bi-directianl auto layout and Grid is flex-box. Both have similar but distinct factionally with Warp being less dynamic unless manually configured by hand which is why it’s so much fun to use in the design application.  

The logic of the current auto layout Grid option, it’s core functionality, is that of a flex box. It needs it’s own settings section. This allows its proper utilization as it has quite a few alignment options. With a separate section you also get extra room to pack unique features like pre cell alignment options, per cell/row absolute positioning locking mechanism. I am thinking out loud here, but you get the idea. Thanks!

 


Hoping this could make some sense. Please don’t take it personally or anything just thoughts maybe this is useful. I would love to see resize to fit feature enabled for all flow mods. I feel like without it’s somehow gotten confusing in UI3.
 

 


You’re half right, the new grid beta’s core functionality is of the CSS grid and not the flexbox. The Flexbox in Figma is the horizontal (flex-row), vertical (flex-column), and wrap (flex-wrap). Before we have the Layout grid (now layout guide) that functions like CSS Grid, but Figma made it better by making an automated grid layout (which in turn becomes the Grid (beta) which is under the Layout functionality.

 

Have you ever thought why the freeform says (Layout) while the others are (Auto-Layout)?

Freeform (Default)
Auto-Layout Horizontal

What I think is it’s because of that reason, so instead of Figma mimicking entirely CSS Concepts, what they did is to create a Layout feature which is only unique to them (2 groups: Layout and Auto-Layout) and more understandable for non-technical users.


Here is another frustrating moment. You used to be able to quickly switch horizontal/vertical frame layout with two simple buttons. I guess that’s not happening anymore

 


Reply