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

    Petr_Jandak
    New Member
    August 23, 2023

    +1
    I really don’t understand, how it is possible to have auto layout without the percentages. I mean, if we want to create truly responsive layouts, it’s simply impossible to do it with the absolute values (or simply assume, that all the widths should be equal). I was really surprised it wasn’t the part of the min/max and wrap update, it’s directly connected and not fully usefull without it.

    IraX
    Power Member
    August 23, 2023

    Absolutely need percentages.

    IraX
    Power Member
    August 23, 2023

    Like the other post, definitely need to define a percentage for the width of a child element in its container. Or height. Or anything. Even spacing should be flexible – %, vw, vh, etc.

    Barry_McMillan2
    New Member
    August 27, 2023

    Definitely needed for responsive designs, please add this functionality Figma

    Jack_Reeves
    New Participant
    September 12, 2023

    This is why im looking at penpot/framer. Im sorry but ever since adobe bought Figma things just slowed right down. Im glad you eventually added variables/tokens. But its almost too little and too late. It still lacks a lot…Then we have this feature…WHICH IS MUCH NEEDED! and is not rocket science to add … the community has obviously made you aware about its need over 2.5 years ago…but alas we are just shouting into the void!

    Mike_Nino
    New Member
    September 15, 2023

    For lists and table views, I usually create components for row-items in a list. Then I stack the list items vertically to make the list. When a list has multiple “columns”, you can set cell width using a fixed-width frame for each cell. That’s great for one page size but if I stretch the row-item horizontally, I want to control how cells in the row stretch. Some may need to remain fixed-width. Some will stretch to claim the extra available horizontal space.

    If there’s only one cell in the list item that stretches horizontally, setting that one cell to “fill” works because it just claims all the horizontal space available to it.

    But if you have multiple columns of different widths that need to stretch, the only option for stretching the cells is to set the auto-layout cell frame to “fill”, but that makes all cells resolve to the same width. I need them to fill the horizontal space up proportionately. Column A: 20%, Column B: 30%, Column C: 50%, for example.

    It would be great if the widths of horizontal auto-layout frames inside another horizontal auto-layout frame could divide the horizontal space proportionally with percentage widths.

    It’s a lot easier concept than it sounds. It seems like a basic need. Maybe I’m missing something in Figma. Maybe there’s another way to do what I’m looking for?

    Roman_Gorshkov
    September 15, 2023

    yes, it’s required often

    Darko_Atanasov
    October 2, 2023

    Yes! I googled and landed here while working on table column widths 🙂

    Nicolas_Fol
    October 12, 2023

    It makes me so frustrated that this feature is not added. We want to build up our design like we would code them with HTML and CSS and for this we need the units to make it a bit responsive.

    Edit: Or something like CSS GRID, to better visualise design that have odd layouts like 4 columns to 8 and so on. Its a shame, you could connect it to the existing grid. So many opportunities. Really hope this is going to be added soon.

    Jinsu_Varghese1
    October 20, 2023

    Will this ever be resolved!!?