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.
I need this all the time.
I have this text block component with a few nested auto layout containers, one of which is the body below the heading with padding on either side. Yes I have it flexible with “Fill container” and would much rather set a percentage width on that body, like anyone would in real life.
it will be a real time saver while you design a responsive web or app. plus, it maps to how css works
7 votes, I thought more people want this.
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
Today, more and more webdesigns are full fluid. We really need percent gutter and margins.
I thought of this today as I was designing a data table and the dev team asked what percentage of the width each column should be. Due to the absence of this feature, I had to do math. MATH!
In all seriousness, though, I think this makes a whole lot of sense considering that in CSS you are able to set dimensions of divs by using percentage units as well, and it would also save us the work of a LOT of workarounds involved to make an auto layout frame look the way we want.
Just throwing my hat in the ring here to say this would be an incredibly useful, fundamental layout feature. Being able to have an autolayout of 2 columns where I can set their widths to relative percentages (For example : col 1 is set to “Fill” and 70%, col 2 is set to “Fill” and 30%) would be really helpful.
I find myself coming to the Figma Forum to search out this topic nearly monthly, and at this point, I’m just looking for someone to show me a hack workaround that will suffice until this is added natively (I’ve even found old comments of my own about this that I forgot I left…hehehe). Please Figgie! Make this happen in June!
By using the percentage or relative units like em or pem that your design can adapt the different screen sizes. This eliminates the need of pixel calculation for each element.
I agree this would be an incredible time saver and make communication with dev really clear
Really, 2 years 75 votes and nothing?
With the new responsive in prototype feature this is a must to create fluid designs without plugins. C’mon Figma do your magic!
This has been posted a hundred times before. People have been asking Figma for this for YEARS. Hard to get votes when it has already been voted on a bunch of times.
I support you! It is definitely needed! VOTED.
I logged in just to vote for this feature. It should be the top priority. Design and consideration for different screen sizes have always been requirements for professionals. Percentage, at least in auto layout, would be the greatest update since auto layout itself
How is this not a thing?
Add this already! This would be such a great - basic - option to have. Working with percentages is a much better practice and it mirrors how layouts actually get built during development. You do not want to hard-code pixel values or work on the assumption that a desktop or a phone would have x:y aspect ratio most of the time - that’s bad practice!
Oh it would be a dream! how easy it would be the responsive behaviour of uneven layouts with percentage matching the grid! I have always a tone amount of extra work with sliders in different breakpoints. Do we have any solution on this yet?
I’m not sure if this has already been requested, but I still wanted to share this idea.
Right now you can use Fill container to make elements responsive inside an Autolayout frame. But what if I want 1 element to be larger/smaller than the rest, but still responsive (so not using fixed)?
For example: you can set the width of a child element to 50% relative to its parent frame, which uses auto layout, while leaving the other elements set to Fill Container. This way, when the design is scaled down, the layout adjusts automatically without requiring you to apply a new fixed width each time you scale up or down.
This approach would make creating responsive designs much easier and faster. It would also improve the handoff to development, as developers can directly use percentage units in the CSS. There’s no need to explain how you want the responsiveness to work, since the units are already built into the design.
I need this! Also seems to be related to these threads about %:
Yes, this would be helpful. Would be even better if this aligns to the layout grid. You can set a layout grid within Figma, but when setting up containers with auto-layout, it is not possible to align them on the grid. Except for manually, but that’s not responsive.
Figma, adding percentages for widths would make our design files behave like true responsive layouts across any size breakpoint. I currently have 5 breakpoints with minimum widths=90% of the available size for 1, 2 and 3 column layouts and this works adaptively with set widths, but if it was percentage based the layouts would be fluidly controlled.
MAKE THIS HAPPEN!!!
Look at how many requests there are for this upgrade!
LETS GO, FIGMA, ADD THIS FEATURE! 🤟
Adding my +1 for this. We’ve been using percentage based layouts for fluid web design for over two decades, let’s get this basic functionality into Figma.
And no, grids are not the same thing.
I can’t express how badly we need this, please. A simple toggle switcher near basic numeric fields like height/width from px (fixed) to % (variable) would open up so much for data visualization in Figma.
I’m a little bit disappointed that this is still not possibe in Figma. Developers can do it easily and I’m not able to mock it 😦 Vote for this feature!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
