Fr/Percent units for more control over auto layout content

It would be great to be able to layout elements by column-widths or percentages for column based designs. If I actually had the ability to divide components and elements into columns the layout-grid wouldn’t really be a necessity.

The time it would save me would be immense.

Even having percentages would be a really good step.

https://forum.figma.com/t/auto-layout-with-different-column-width/22662/3

4 Likes

P L E A S E !! we need this so bad

3 Likes

This would be great! It would also be great if it worked similar to how you would code columns with flexbox.

3 Likes

yeb PLEASE! It would be loads of benefits to have %width features as well as max/min width and height settings, like the things framer have already had!

To be honest, I don’t even know why it still doesn’t include % features since Figma has ‘fill’ setting to do the 100%, also for the thing set to be position absolute having constraints feature which can do the “scale” setting and it is basically the % approach.

2 Likes

Please please please Figma implements this!!!

A work around I found myself to handle that in components is to create fixed with empty columns… but its such a mess to maintain

4 Likes

Guys after looking for a solution for so long I found this Figma plugin that solves this problem and more!

Kindly like and support the developer too! :heart_on_fire::stuck_out_tongue_winking_eye:

So now we have min and max which is very nice. It could be pretty nice to be able to user percent instead of px now :slight_smile: .

61 Likes

Can you give me some example use cases when you would want to have min/max in percentages?

Hello Jacky,
Of course, the reason is simple: I would be interested to manage my different container and sub-container on a page using relative size to manage different list on the page.
This way it would be also possible to use a combo of “Fill” and a “relative size” with a min/max behavior.

11 Likes

Percentage values for (general / max / min) width and height would be awesome.

14 Likes

I’m also waiting for this feature, it’s much easier to manage the width of the columns with percentage values ​​rather than pixels and it allows you to give the size you want to each column in an auto-layout. (Like a 60/20/20, 70/30, and more…)

For example. in a table component when you need both responsiveness and to set an average size for a column, very useful combine to min-width :heart_eyes:

11 Likes

100% agree. I am so excited for these Figma updates, but I got a little bummed when I realized we couldn’t use percentages. A bulk of my day to day is designing UI for web based applications and so percentages are everywhere.

6 Likes

That is “showing” the % only, not setting them. Unfortunately.

+1! this would be great for responsive forms

4 Likes

@JackieChui You asked for a concrete example… there we go:

I would like to set the max-width to 100% of the parents frame to avoid elements like buttons to overflow. This would allow to combine hugging with the benefits of fill-container if the content would exceed. Especially if the component got resized.

See:

18 Likes

Thanks for the example!
Will share it with the team.

8 Likes

Percent based sizing is useful in general, not just for min/max width. It is one of the most common ways of sizing things when coding layouts. Relying on Fill width and pixel sizing just isn’t capable enough, especially when you want to handoff to devs and you want them to use percent based sizing.

16 Likes

I would also love to use percentages because of the way the auto layout wrap works. Because the min and max aren’t flexible, I now often have to use empty spacing layers to make sure everything wraps well. It would be way easier to way:

  • Min Width: 33%
  • Max Width: 50%

Now I often have to recalculate for different screen sizes.

14 Likes

+1, please Figma!

2 Likes

Agree. Like others here I work on a web app with cards, tables, and other UI containers and elements that would benefit from percentages in Figma. Now I often have to draw fixed width drawings and math out the percentages – at least the width and height box make for quick math – but it is still a lot of work, especially if they change up at breakpoints. I can use fill on an auto layout for easy halves, thirds, quarters and other even layouts, but I find myself just always using even divisions to make my life easier in Figma when I should probably split containers by uneven percentages like 60/40 or 70/30.