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

Figma is starting to disappoint me by not being able to implement a simple feature for two years. They already implemented it when auto layout calculates the padding width of internal elements with the fill property, but for some reason they do not give us the ability to manage it to get more control.

It is disappointing to see Figma completely ignoring it. The reality is that we see AI and a new interface instead of the necessary features.

There has been no progress on many other features from Figma for years (I mean fixes for the nested component override feature, errors with variables, and some animation features in prototyping)

I have started searching for an alternative tool and am ready to leave Figma as soon as I find a replacement.

I found the solution!!!!

Sorry for getting carried away in the previous post. But this problem has been bothering me for three years. And I just found the solution!

You need to add LAYOUT GRID > columns to the frame.
Set up 3 columns in strench mode.

Add 2 frames (one small, one large) and align them to the columns. And most importantly, set the position of these frames to "left+right".

And then the magic happens - your frames will follow the column with scaling working, preserving the indents.

I was really shocked by this layout grid feature that no one talked about.

omfg O_O 

The new grid auto layout feature sort of makes this possible! I’ve got 2 scenarios that have worked well:

For grids with no minimum column widths:

1. Create a grid with 100 columns.
2. Set each frame within the grid to the desired percent as the column span (15% = 15 columns).
3. Of course if you have simple percentages you may not need 100 columns, for example if you want a 75% 25% layout you can use 4 columns.

For grids with minimum column widths:
Note: I’m using this to create responsive table rows. This method allows for columns with minimum widths where all remaining space is divided evenly.

1. Create a grid with twice as many columns as your content (for a 5-column table you’d create a grid with 10 columns).
2. Set each frame within the grid to span 2 grid columns.
3. Set a fixed (minimum) width for 1 out of each set of columns. The remaining columns will fill available space.

This is a cool workaround!

One clarification - it’s called “Layout guide,” and that part is really just a visual guide, it doesn’t affect the elements in the frame. The “left+right” constraints are the key here. (And then you can adjust the spacing in the Layout panel - which, again, has nothing to do with the layout guide, so if you’re using that you’d need to change the “Gutter” for the Layout Guide to match the “Spacing” in “Layout.”

It’s kind of weird (to me, at least).

Another thing to note, this will only work if the parent frame does NOT have Auto Layout applied.

This is where a lot of confusion comes in for me - when to use Auto Layout vs when to use Constraints.

Hopefully this new Auto Layout > Grid thing now will make things easier and not more complex. (Trying it out now...)

Yes! I actually need this today.

Posting to add another note that this would be an INCREDIBLE feature addition!

+1
Yea need this like today as well …. trying to match code and it ain’t easy without percetages

Please add this obvious feature, Figma. It is universally requested by industry professionals.

+1 essential for communicating responsive behaviour