Fr/Percent units for more control over auto layout content

Although I find the new autolayout UI extremely convoluted and overdesigned, the ‘hug/fill parent’ feature is great. However, It would be immensely helpful to have more control over how the elements fill the parent.

Currently, the only option is for the elements to fill the remaining space, but oftentimes, I need certain elements to take up a certain proportion.

Example: I need element-1 to take up 2fr (~66%) and the rest to take up 1fr (~33%). It would be a game-changer if we could use ‘fr’ units.

Framer does this beautifully and it’s vital for efficient, adaptive layout workflows:

14 Likes

I vote for fr units, it would be nice to have around, if Figma can handle percentages, I can’t see the reason why fr can’t be supported. It is a bit of a paradigm shift, but that’s fine :slight_smile:

3 Likes

For sure. FR units are amazing. Plus Figma doesn’t even handle percentage (unless I’m missing something). OMG after using Framer’s layout tools, it’s really hard to come back.

2 Likes

You can enter percentages in Frame options (width/height/X/Y).

But that’s in relation to itself/current value, not to the parent frame.

2 Likes

true :wink:

Just a quick addition, that i totally get what was mentioned about the great but convoluted methods for working with Auto-layout-like functionality in Figma. it’s great that it’s there don’t get me wrong. But after working with Framer for 5 minutes (where people that are used to “web” find their way intuitively I think), it’s painful to go back to Figma and having to trial/error 20 times on each layout action to get things to line up (and stay lined up).

I think the whole Layout thing is where Sketch stumbled a bit as well, Figma seems to have a challenge with it sometimes also (although less so). For an outsider it’s hard to understand as in… just do what Framer did :slight_smile:

2 Likes

@Ben_Smeets Agreed!. Framer has the best design/layout/prototyping/preview tools and functionality by a wide margin. As soon as they introduce type styles (really frustrating and a shame they haven’t yet…), I’m switching over to Framer. They’ll soon be implementing auto-sizing as well.

+1 for this

+1 for this!

I’m also on the +1 team on this one :v:

totally +1

Yes please!!

yes please!!

I also really need this feature! Could someone from Figma please let us know if they’re planning to implement this any time soon?

I think you can achieve most of what you want by using the layout grid feature.
Maybe you’ll find the video “Utilizing Constraints & Layout Grids” in Figma’s YouTube channel helpful.

3 Likes

That seems to do the trick, thank you @Ariel_Odiz!

+1, framer have more advanced place. but it is not good for design, wait, wait it more better, I will be change

@Ariel_Odiz good hint but how to combine the advantages of auto layout and this method? I want my frames height to hug it’s content but want the width to be controlled by my grid.

1 Like

+1

Percentages please, across all measurements.

My grid view has weird spacing issues :frowning:

1 Like