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.
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.
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
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.
Oh – of course!
My developer-colleagues would love this feature, too!
thanks :) bye.
+1 right here :) it would be really a nice feature, I was trying to solve it just now :D
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?
Comment in support of this idea. This feature is very much needed.
+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.
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
+1
I (and the developers I work with) would really loved this
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!
I don’t need AI, I need percentage widths.
+1 Less AI and more basic features like percentages!
Percentages would be awesome and consistent to use in css-vars.
+1. I promise I’ll treat my FigPal well.
Begging once again for this one
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
Does Figma not take a stand on this? There must be a reason for it.
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.
Pretty please, with sugar on top, end our suffering and let us set dimensions by percentage. We wants it. We needs it. Please?
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.
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:
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.
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...)
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.