Fr/Percent units for more control over auto layout content

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.

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

+1! this would be great for responsive forms

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

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

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.

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.

+1, please Figma!

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.

I really don’t understand, how it is possible to have auto layout without the percentages. I mean, if we want to create truly responsive layouts, it’s simply impossible to do it with the absolute values (or simply assume, that all the widths should be equal). I was really surprised it wasn’t the part of the min/max and wrap update, it’s directly connected and not fully usefull without it.