Fr/Percent units for more control over auto layout content

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 🙂

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.

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.

true 😉

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 🙂

@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

When using auto layout, I can chose different ways to define the width/height of the elements: “fixed”, “hug” content and “fill container”. In many cases none of these matches how the design should be implemented. I want elements to have a relative width of e.g. 2 of 12 columns or 30 %. By offering to add a relative value or working with columns I could move one step closer to the actual implemented result of a responsive design

Is anyone else in need for this? Are there workarounds for the problem I didn’t think of yet?

+1 for this!

I’m also on the +1 team on this one ✌️

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.

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

Hi, I am trying to create responsive columns layout with autolayout feature. It is working with equal width but not working with a different width. I am able to set fill-container for one but not the other column. I assume, we don’t have full flexbox, with max-width or %. or am i missing something here?

With the new update, layout is slightly changed and i also tried using two different frames with each sizes but that gives a similar result with only one column being responsive.

can’t upload the screenshot, as it is restricted for new user.

Thank you.

Sorry I don’t have a solution for you, but I would also like this as a feature. Almost all of our site components are determined by column width, and they are almost universally unequal within a row.

Ok, Uploading the screenshot now, wonder if we get auto width, max-width or % feature.

@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

Percentages please, across all measurements.

My grid view has weird spacing issues 😦

Having percentages or proportional settings for an autolayout frame in components would be a gamechanger.

I make responsive web layouts, and with my hero component I may want the image to fill 1/3 of the width for example. Then whenever I place this hero component inside an artboard (sorry ‘frame’ 😉 ) simulating a page across all the breakpoints I design for, I would be able to have one component, with no detaching, that automatically fills the width and makes the image fill 1/3 of whatever width artboard it sits inside.

Another solution would be enabling the fixed width value of a component to be changed on each instance. So the same hero component example again, I set say the left side 2/3’s to set to fill, the image 1/3 set to fixed on the main component. Then I would be able to manually adjust the fixed width of the image by clicking on the image container and updating the fixed width value in the instance to match my grid without any detaching.

I could also use this feature.

I’m trying to create a responsive layout with a left and right section of content.

I want the content on the left of the screen to always fill 80% of the screen, and I want the right content to fill the remaining 20% (which should happen automatically as there is only 20% remaining to fill)

This has existed in CSS for a long time. I imagine Figma should have this at the top of their priority list as it is used in a very common layout style.