Fr/Percent units for more control over auto layout content

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.

4 Likes

+1
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.

1 Like

Absolutely need percentages.

2 Likes

Like the other post, definitely need to define a percentage for the width of a child element in its container. Or height. Or anything. Even spacing should be flexible – %, vw, vh, etc.

2 Likes

Definitely needed for responsive designs, please add this functionality Figma

1 Like

This is why im looking at penpot/framer. Im sorry but ever since adobe bought Figma things just slowed right down. Im glad you eventually added variables/tokens. But its almost too little and too late. It still lacks a lot…Then we have this feature…WHICH IS MUCH NEEDED! and is not rocket science to add … the community has obviously made you aware about its need over 2.5 years ago…but alas we are just shouting into the void!

5 Likes

For lists and table views, I usually create components for row-items in a list. Then I stack the list items vertically to make the list. When a list has multiple “columns”, you can set cell width using a fixed-width frame for each cell. That’s great for one page size but if I stretch the row-item horizontally, I want to control how cells in the row stretch. Some may need to remain fixed-width. Some will stretch to claim the extra available horizontal space.

If there’s only one cell in the list item that stretches horizontally, setting that one cell to “fill” works because it just claims all the horizontal space available to it.

But if you have multiple columns of different widths that need to stretch, the only option for stretching the cells is to set the auto-layout cell frame to “fill”, but that makes all cells resolve to the same width. I need them to fill the horizontal space up proportionately. Column A: 20%, Column B: 30%, Column C: 50%, for example.

It would be great if the widths of horizontal auto-layout frames inside another horizontal auto-layout frame could divide the horizontal space proportionally with percentage widths.

It’s a lot easier concept than it sounds. It seems like a basic need. Maybe I’m missing something in Figma. Maybe there’s another way to do what I’m looking for?

1 Like

yes, it’s required often

2 Likes

Yes! I googled and landed here while working on table column widths :slight_smile:

2 Likes

It makes me so frustrated that this feature is not added. We want to build up our design like we would code them with HTML and CSS and for this we need the units to make it a bit responsive.

Edit: Or something like CSS GRID, to better visualise design that have odd layouts like 4 columns to 8 and so on. Its a shame, you could connect it to the existing grid. So many opportunities. Really hope this is going to be added soon.

1 Like

Will this ever be resolved!!?

4 Likes

Agreed, this seems like a very valid use case, and is needed for at least one component in my client’s library.

1 Like

Agreed, a while back I posted a similar request. See my post here:

1 Like

We really need this feature,
We need to be able to set an element to “X columns” according to the column grid previously set (nb of columns, gutters and margins could be variables)
we need to be able to set a frame to “X %” of the parent

These features could help us to design more like dev, and this could be really useful for the devmode, to have a good devmode more close to the reality of HTML/CSS development.

5 Likes

+1 please.
It’d be amazing to be able to define how child elements to fill the parent by Fr/Percent units.

3 Likes

+1. Minimum character count.

+1. This is one of the last pieces of the puzzle of being able to adequately mimic layouts on the web.

4 Likes

+1 thanks!

3 Likes

This is a pretty urgent need, in my opinion. Honestly, this is one of the main reasons we can’t make truly responsive components that operate and respond the way they do in code.

For example, I have a section header component that contains a title and an optional description. When the description is on, I want it to occupy 8 columns and the title to be constrained to 4 columns. But there’s just no way to achieve this in a reasonable (non-plugin / non-hack) manner. I should be able to either set them to 1/3 and 2/3, or to 4 columns and 8 columns, respectively.

This will be such a huge unlock when the enhancement makes it to Figma!

4 Likes

This indeed would be very nice.

It’s something that’s been requested since before Auto-layout and Figma used a different feedback and discussion forum.

1 Like