Skip to main content
vdekkernl
Active Member
Dec 9, 2022 3:07 PM UTC

Use percentages for heights, widths, paddings, gutters in auto layout

This makes it easier to use components in designs for different screen sizes. And then you don’t have to calculate every time what 40% or 60% of the width is.

This also makes it easier to design scalable applications that grow with the width of the screen.

105 replies

IraX
Power Member
Dec 9, 2022 4:00 PM UTC

I need this all the time.

I have this text block component with a few nested auto layout containers, one of which is the body below the heading with padding on either side. Yes I have it flexible with “Fill container” and would much rather set a percentage width on that body, like anyone would in real life.

_UED_UX3
New Member
Jan 13, 2023 5:32 AM UTC

it will be a real time saver while you design a responsive web or app. plus, it maps to how css works

vdekkernl
vdekkernlAuthor
Active Member
Jan 20, 2023 11:09 AM UTC

7 votes, I thought more people want this.

Apr 20, 2023 11:10 AM UTC

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

vdekkernl
vdekkernlAuthor
Active Member
Sep 26, 2023 7:13 AM UTC

Thank you for reopening @dvaliao and yes @_UED_UX3 it will!

SylvainPrevost
Oct 2, 2023 12:02 PM UTC

Today, more and more webdesigns are full fluid. We really need percent gutter and margins.

Santiago_Castillo
Jan 18, 2024 12:50 PM UTC

I thought of this today as I was designing a data table and the dev team asked what percentage of the width each column should be. Due to the absence of this feature, I had to do math. MATH!

In all seriousness, though, I think this makes a whole lot of sense considering that in CSS you are able to set dimensions of divs by using percentage units as well, and it would also save us the work of a LOT of workarounds involved to make an auto layout frame look the way we want.

Design9
Mar 8, 2024 9:24 AM UTC

Just throwing my hat in the ring here to say this would be an incredibly useful, fundamental layout feature. Being able to have an autolayout of 2 columns where I can set their widths to relative percentages (For example : col 1 is set to “Fill” and 70%, col 2 is set to “Fill” and 30%) would be really helpful.

Greg_Huntoon1
Mar 19, 2024 5:42 PM UTC

I find myself coming to the Figma Forum to search out this topic nearly monthly, and at this point, I’m just looking for someone to show me a hack workaround that will suffice until this is added natively (I’ve even found old comments of my own about this that I forgot I left…hehehe). Please Figgie! Make this happen in June!

Mar 19, 2024 7:18 PM UTC

By using the percentage or relative units like em or pem that your design can adapt the different screen sizes. This eliminates the need of pixel calculation for each element.