Skip to main content

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


Show first post

51 replies

Elliott_UX
  • New Participant
  • 14 replies
  • December 19, 2024

If we are trying to align designers and developers, this is crucial. This is the sort of thing that leads to design drift and misinterpretation of designs.


Jan Niklas Hellenbrandt

Dear Figma,
I would love to use this feature.
My colleagues would love to use this feature.
Our Figma-community would love to use this feature.
Your future clients would love to use this feature.
It’s CSS basic. Please!
Thank you


Kait_O_Malley

This would be a gamechanger when creating reusable components for my design team partners. We on the UX team create a structure similar to what they would find in their CMS platform to both set rules but give the creative team freedom and tools to get creative before trial and error on the platform itself to prevent rework. 


Jan Niklas Hellenbrandt

Oh – of course!
My developer-colleagues would love this feature, too!

thanks :) bye.


Sergio666
  • New Member
  • 1 reply
  • January 22, 2025

+1 right here :) it would be really a nice feature, I was trying to solve it just now :D 


Phil Salesses

Honest question: How are we supposed to design a responsive website with auto-layout?

I have to adjust each child manually and recalculate 50% of the parent container to reset everything?


ArtMalikoff
  • New Member
  • 3 replies
  • February 10, 2025

Comment in support of this idea. This feature is very much needed.


AJ114
  • New Member
  • 2 replies
  • February 11, 2025

+1

Genuinely shocking that this wasn’t implemented when auto-layout was released, or even when they released wrapping with auto-layout. I’m able to assign % values with Flexbox, there’s no real reason we couldn’t do this in Figma.


Gabriel Poli
  • New Member
  • 1 reply
  • February 25, 2025

Let’s gooooooooo Figma

It’s been 2 years now, and people still need this more than a new UI

C’mon, that’s easy peasy for you guys


Coltide
  • New Member
  • 2 replies
  • March 3, 2025

+1

I (and the developers I work with) would really loved this


Matt_Ryan1
  • New Member
  • 1 reply
  • March 19, 2025

Voted.

 

Came to request this feature. The hack with columns and constraints is too limiting and time consuming. Just allow me to change the width or height to a percentage of it’s parent, please!


GLD
  • New Member
  • 2 replies
  • March 27, 2025

I don’t need AI, I need percentage widths.


Sofie_Katan1

+1 Less AI and more basic features like percentages!


Faulancr
  • New Member
  • 1 reply
  • April 3, 2025

Percentages would be awesome and consistent to use in css-vars.


Joris_Demange

+1. I promise I’ll treat my FigPal well.


Zoe_Gomez
  • Active Member
  • 26 replies
  • April 9, 2025

Begging once again for this one


Savan Kotadiya
vdekkernl wrote:

This makes it easier to use components in designs for different screen sizes. And then you don’t have to calculate every time what 40% or 60% of the width is.

This also makes it easier to design scalable applications that grow with the width of the screen.

@figma please introduce this feature

 


BenchPress Ben

Does Figma not take a stand on this? There must be a reason for it.


Vicky10
  • New Member
  • 2 replies
  • April 16, 2025

Logged in just to say yep I really need this. I hate having to apply a column grid to auto layouts just to get the width correct, and then having to add extra notes to the devs that it should be percentage based instead of fixed width. It also sucks when there’s a responsive option in the present mode but this doesn’t work with that.


Krystal1
  • New Member
  • 1 reply
  • May 1, 2025

Pretty please, with sugar on top, end our suffering and let us set dimensions by percentage. We wants it. We needs it. Please?


ArtMalikoff

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

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
  • 2 replies
  • May 7, 2025
ArtMalikoff wrote:

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
  • 16 replies
  • 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
ArtMalikoff wrote:

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


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings