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

    Smileyblond
    New Member
    January 25, 2024

    I need percentages too… just found this thread 😂

    dv.korzhev
    New Member
    January 26, 2024

    +1. I would also like to use this functionality. Sometimes it is necessary to make columns 60/40, 70/30 and 80/20. Does anyone know if there is a way around this now?

    Schaltza
    New Participant
    January 26, 2024

    This is really really needed. It would be great if autolayout frames would conform to grid just like normal frames do. If I set a grid for an autolayout frame and set set an object inside it to fix that conforms to the grid - it should stay this way if I resize the parent frame.

    Michael_Staton
    New Participant
    January 30, 2024

    How is this not implemented yet? The Figma team is known for their engineering prowess. This is 2nd grade math. You don’t have to build any new UI. All the Figma team has to do is interpret the % character in their dimensions inputs, and then compute it in the background.

    January 31, 2024

    I am relatively new to Figma. I was drawn in by the idea of being able to build what I want developed the way it would be developed. So when I found I could not base max or min sizes on percentages or use relative positioning I realized rather quickly that what I was hoping for is not a reality. Is there any intention to add this feature to Figma any time in the near future?

    February 2, 2024

    +1!!! This feature would make an amazing addition to the min/max width feature. As others have said, it’s a great way to control column sizes that scale with size of the screen/frame. Here is my current example:

    In the first image in the screenshot I essentially have the page broken up into 4 columns, each taking up 25% width (aside from spacing). With the top 4 elements this is easy to lay out because I just set all elements to fill container width, however with the next row of elements that consists only of two elements of differing size it gets more difficult. Because one element takes up 75% and one takes up 25% I have to set the larger element to fill container, and the smaller element to have a max-width that is the same as the widths of the elements in the row above. This creates the illusion that they are using column widths.

    Usually in code to achieve this we would use class based width applications based on a certain column grid size that apply a percentage based width. In this case we will say we have 12 potential columns so we will use col-9 for 75% on the larger element and col-3 for 25% on the smaller.

    The second image in the screenshot shows why the % widths are needed in Figma, it shows what happens when the frame condenses for that same layout. You’ll see that the column widths no longer line up and it would require a manual change of the width of the smaller element on the second row. Hope this provides a a good example of just one of the ways % based width values would be a HUGE time saver.

    domwashburn
    New Member
    February 6, 2024

    Big plus for this, it would be helpful in a lit of cases… I won’t re-hash all the examples, but I do have one to add.

    I was attempting to make a logarithmic scale for a chart I was mocking up yesterday which requires the ticks to be spaced proportionally…

    Ideally I should have been able to take frames within an auto layout and given them a percentage width and voila… but after a convoluted mess of min/max, nested items, etc, I couldn’t get it to work so I gave up.

    I get it… it’s not a typical design measurement, but it’s useful, and ultimately it’s a supported unit of measurement in CSS, so I don’t see why it wouldn’t be a supported. It’s not like we’re asking for calc() (though, that’d be nice too 😉)

    Andy33
    New Participant
    February 16, 2024

    +1 for percentages

    KennLucas
    February 19, 2024

    Easily this would be helpful IF Figma could support responsive display in presentations mode!

    I have so many designs that could benefit from a full-width hero or even just the line beneath my title bar to extend all the way across my client’s browser would help our jobs as designers and product people.

    Having to have a client resize their browser window because our prototypy does not stretch to their giant display settings is detrimental.

    Obviously that is a different rant all together. But definitely having some level of being able to alleviate a small part of that presentation challenge could easily be solved by percentage widths.

    Jensen_Perez
    New Member
    February 22, 2024

    +1
    this will be very useful. will probably use it more often than pixel size.