Skip to main content

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

  • December 9, 2022
  • 100 replies
  • 8014 views

Show first post

100 replies

ArtMalikoff
  • New Member
  • May 7, 2025

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.


ArtMalikoff
  • New Member
  • May 7, 2025

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.


Dalia
  • New Member
  • May 7, 2025

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 


pterisaur
  • New Participant
  • May 7, 2025

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.

Dustin_Hansen2

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.

 

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...)


David131
  • New Member
  • May 12, 2025

Yes! I actually need this today.


Brett_Houston

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


Patrick27
  • New Member
  • May 21, 2025

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


Christopher_Andert

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


_Jackson_Beale

+1 essential for communicating responsive behaviour


Ties
  • Active Member
  • July 18, 2025

7 votes, I thought more people want this.

over a 100 people liked your idea now ;)


Bhaumin
  • New Participant
  • July 18, 2025

@djv Any update on this feature?


Sharon_Taylor

another vote for this feature, and I actually expected it to be in by now.


Brendan_Murphy

With every new Figma product, percentages become an even more powerful feature. Please prioritize this!


Hannah S
  • New Member
  • July 30, 2025

+1

This would be more helfpul to me than any new shoehorned in AI features.


Bhaumin
  • New Participant
  • August 1, 2025

@Celine_  ​@seni ​@djv ​@Tom Reem ​@y_toku 

Subject: We Need Percentage-Based Sizing in Auto Layout NOW!

To the Figma Team,

It's deeply frustrating that the request for percentage-based units in Auto Layout, a fundamental feature for responsive design, remains ignored. The current system is rigid and forces countless workarounds, hindering our ability to design efficiently.

This isn't a minor feature; it's a core requirement for modern UI design. The community has been pleading for this for years, as you can see here: https://forum.figma.com/suggest-a-feature-11/use-percentages-for-heights-widths-paddings-gutters-in-auto-layout-35075?tid=35075#post169705

Please, prioritize these long-standing pain points over shipping new features. We need the tools to do our jobs properly. We need percentages in Auto Layout. Thanks


Weirdo
  • Active Member
  • August 6, 2025

+1


Andrea_Bichsel2

+1


Ethan Welner
  • New Participant
  • August 14, 2025

It’s honestly shocking to me that this hasn’t been in there from day 1. This would be far more used and useful than the AI features getting jammed in.


Daniel Mora
  • New Member
  • August 18, 2025

August 2025 and still I cant have responsive objects/containers based on %? Can someone tell me how to make bar charts scale based on container…? This seems it should be an easy concept but apparently I'm missing something?


James_DUK
  • New Member
  • August 20, 2025

+1


Krissan_Pattugalan

How does this not have thousands more likes?

This ability is trivial in code. So, even if it’s not trivial in development, I think its a sssuuuper important feature in the figma app. We should be able to mock what you can develop, without having to throw in a bunch of work arounds that make the exported code so much more messy.


Krissan_Pattugalan

August 2025 and still I cant have responsive objects/containers based on %? Can someone tell me how to make bar charts scale based on container…? This seems it should be an easy concept but apparently I'm missing something?

You would have to create the bar chart manually, then group it. Then you would put that group into an auto layout and select “fill” for the sizing option. This should pull and stretch the whole bar chart as a single object. Make sure if you have any text in your bar chart, that it’s set to point type and not text boxes, so that you wont get any strange clipping and text wrap.


Krissan_Pattugalan

100% this needs to be a feature, so we can design layouts with css capabilities in mind. 


Pal_Heick
  • New Member
  • September 10, 2025

+1
Come on, Figma - Focus on finishing crucial features in the existing product before opening avenues in Jam, Buzz, Marmelade etc.