Fr/Percent units for more control over auto layout content

Forum|Forum|5 years ago
January 29, 2021
214 replies
20235 views

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:

Show previous replies

aryanraj

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

Dennis_N

Power Member

@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.

Edward3

+1

Percentages please, across all measurements.

My grid view has weird spacing issues 😦

Joe_Garlick

Active Member

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.

Walter_Allred

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.

Ben_Simpson

New Member

Just a quick bump on this. It would be SO helpful! Like, genuinely beyond helpful.

From page layout, to progress bars, to slider controls—all of it would benefit huge from % width, height, position in auto-layout. Also, it be such a time saver in the CSS panel. Our engineers have commented often that all of our design work in static pixel values creates more legwork for them.