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

    Paul_Panfalone
    New Member
    July 6, 2024

    Add my name to the LOOOOOOOOOONG list. Can’t believe this isn’t a thing already. Should’ve been included day one.

    70/30 and 60/40 splits are so common that I can’t believe we have to ask for this as a ‘feature request’. Like what??

    domwashburn
    New Member
    July 9, 2024

    Maybe a better solution would be to add support for native css measurement units… IDK how to accomplish this in a designer friendly way, but as a former designer turned developer turned designer again this has been a HUGE pain point for me

    domwashburn
    New Member
    July 9, 2024

    Pretty basic CSS scenario TBH

    Joe12
    July 10, 2024

    Agree this functionality is over and over requested by users and ignored for novelty functions.

    https://forum.figma.com/t/use-percent-for-min-and-max-width/46333/60

    ahainen
    Active Member
    July 10, 2024

    Any updates on this?

    domwashburn
    New Member
    July 11, 2024

    Hey @Bennett_Frazier! I sorted out a workaround using a group instead of a frame as the parent container. I’m not entirely sure why it works, but if you wrap rectangles or frames in a group (and set the constraints properly) you can get that scaling working. Then you can set that group to fill container inside of a frame with auto-layout…

    One caveat though is that it’s is a bit of a manual process to re-size the sections since groups don’t support auto layout 😕 … but they will scale proportionally once you get them set. 🤷

    I’m starting to think this might be a good candidate for a plugin… 🧑‍💻

    July 12, 2024

    Would I plugin like this be possible? I don’t know much about the plugin api.

    domwashburn
    New Member
    July 12, 2024

    I haven’t looked into it too deeply, but the plugin presentations from Config this year made it seem like a fairly simple process, at least for something like this.

    smallmultiplier
    July 22, 2024

    Amongst everyone I - and my eng team, as they keep requesting - would love to be able to use percentage widths to correspond better to how our code is written.

    Timofey_Tulin
    July 23, 2024

    +1 max-min for width\height best need