Skip to main content
Aalok_Trivedi
January 29, 2021

Fr/Percent units for more control over auto layout content

  • January 29, 2021
  • 214 replies
  • 20235 views

Although I find the new autolayout UI extremely convoluted and overdesigned, the ‘hug/fill parent’ feature is great. However, It would be immensely helpful to have more control over how the elements fill the parent.

Currently, the only option is for the elements to fill the remaining space, but oftentimes, I need certain elements to take up a certain proportion.

Example: I need element-1 to take up 2fr (~66%) and the rest to take up 1fr (~33%). It would be a game-changer if we could use ‘fr’ units.

Framer does this beautifully and it’s vital for efficient, adaptive layout workflows:

    214 replies

    Miguel3
    May 11, 2023

    P L E A S E !! we need this so bad

    Dustin_Miller1
    May 23, 2023

    This would be great! It would also be great if it worked similar to how you would code columns with flexbox.

    ohbox0408
    June 2, 2023

    yeb PLEASE! It would be loads of benefits to have %width features as well as max/min width and height settings, like the things framer have already had!

    To be honest, I don’t even know why it still doesn’t include % features since Figma has ‘fill’ setting to do the 100%, also for the thing set to be position absolute having constraints feature which can do the “scale” setting and it is basically the % approach.

    Ignazio_Lacitignola
    June 6, 2023

    Please please please Figma implements this!!!

    A work around I found myself to handle that in components is to create fixed with empty columns… but its such a mess to maintain

    Chukwuebuka
    June 25, 2023

    Guys after looking for a solution for so long I found this Figma plugin that solves this problem and more!

    Figma

    Kindly like and support the developer too! ❤️‍🔥😜

    XavierV
    Active Member
    June 27, 2023

    So now we have min and max which is very nice. It could be pretty nice to be able to user percent instead of px now 🙂 .

    JackieChui
    Figmate
    Figmate
    June 27, 2023

    Can you give me some example use cases when you would want to have min/max in percentages?

    XavierV
    Active Member
    June 28, 2023

    Hello Jacky,
    Of course, the reason is simple: I would be interested to manage my different container and sub-container on a page using relative size to manage different list on the page.
    This way it would be also possible to use a combo of “Fill” and a “relative size” with a min/max behavior.

    dennsi
    Active Member
    June 28, 2023

    Percentage values for (general / max / min) width and height would be awesome.

    Mathieu_Minier
    New Member
    June 28, 2023

    I’m also waiting for this feature, it’s much easier to manage the width of the columns with percentage values ​​rather than pixels and it allows you to give the size you want to each column in an auto-layout. (Like a 60/20/20, 70/30, and more…)

    For example. in a table component when you need both responsiveness and to set an average size for a column, very useful combine to min-width 😍