Skip to main content
vdekkernl
Active Member
Dec 9, 2022 3:07 PM UTC

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

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.

105 replies

Jelzanne
New Member
May 2, 2024 1:10 AM UTC

I agree this would be an incredible time saver and make communication with dev really clear

Serhii_Hubernachuk1
New Member
Jun 20, 2024 12:33 PM UTC

Really, 2 years 75 votes and nothing?

de_la_Puente_Pantoja_Alberto
New Participant
Jul 14, 2024 12:22 PM UTC

With the new responsive in prototype feature this is a must to create fluid designs without plugins. C’mon Figma do your magic!

KennLucas
Jul 14, 2024 2:34 PM UTC

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.

Uyen_Hoang1
Jul 15, 2024 3:12 AM UTC

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

Arxareon
Jul 17, 2024 1:49 PM UTC

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!

Lia_Janela
Aug 8, 2024 12:00 PM UTC

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?

Bram_Huinink
Sep 18, 2024 10:31 AM UTC

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.

Matty_Vazquez
Active Member
Sep 18, 2024 12:26 PM UTC

I need this! Also seems to be related to these threads about %:

Vermeulen_Peter
New Member
Sep 19, 2024 7:10 AM UTC

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.