Skip to main content
Aalok_Trivedi
January 29, 2021

Fr/Percent units for more control over auto layout content

  • January 29, 2021
  • 214 replies
  • 20236 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

    KennLucas
    June 6, 2024

    After this latest disaster with the new drafts thing and how they destroyed the organization of the sidebar…I might be looking for a different tool.

    Literally they did not have to reorder ALL of the 38 items I had in my starred section.

    Aalok_Trivedi
    June 6, 2024

    PSST: (cough)…Framer…(cough)

    Michael_Staton
    New Participant
    June 11, 2024

    Yeah, creating Bento style layouts is maddening and I end up creating all kinds of unnecessary containers. I also end up duplicating all kinds of work in larger files.

    I’m not sure why they implemented Autolayout with only the three options they have currently. Clearly, the CSS community aligned on a grid system where you could just tell every box how many grid units to span in either height or width.

    MG17
    New Participant
    June 13, 2024

    To make sure this topic isn’t closed.

    Joe12
    June 17, 2024

    I believe this feature could help bridge the design-dev gap further and enable designers to create truly responsive prototypes. Currently, I have to use workarounds when building pattern libraries with set width modes. This new capability would be incredibly useful.

    Bennett_Frazier
    June 18, 2024

    +1 (or more if possible)… I’ve worked as both a web designer, frontend dev, senior frontend dev, React Native dev, and agree with @Joe12 completely.

    This definitely would close the dev-design gap further.

    Example: Trying to design stacked horizontal bar charts simply does not work with auto layout if any layout adjustment shifts. This really does not work well when attempting to design multiple cards with charts in a dashboard view.

    June 27, 2024

    Was really hoping to finally see this at Config. Unless I missed it, sad to see its still not possible. It boggles my mind that other ‘sexier’ features get prioritised over this (comparably) simple little thing that could save so much pain.

    Baffour_Atuah
    New Member
    June 28, 2024

    I also thought we might see it so a bit disappointed! To be fair we don’t know if they prioritised other features over it. They’re probably working on several things concurrently and didn’t have it all ready for Config.

    MG17
    New Participant
    July 4, 2024

    I am sitting here again trying to find the best solution for multiple elements I wanna wrap for different breakpoints and at the end, I have to do it manually. Well done.

    But hey, Figma is offering Slides now. 😉 What a joke!

    Smileyblond
    New Member
    July 4, 2024

    Keeping this topic alive… genuinely thought they would have picked this feature up already 😦