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

    David_Simpson
    New Participant
    August 15, 2024

    +1 on every previous comment. big ongoing frustration point.

    MG17
    New Participant
    August 19, 2024

    Push.

    It’s annoying that you didn’t present such an elementary function this year. Just like Margins …

    A_Brandberg
    New Participant
    August 19, 2024

    Piping in to share another example of a use case here. I can achieve a somewhat desired result of the shape’s proportions adjusting based on its size, using Constraints (with both vectors within it set to Scale) — but this unfortunately means I can no longer use Autolayout… which I do want to use, since I want the component to adapt to the amount of text within it. 😕

    Ideally, I’d love to just be able to set the bottom vector’s height to e.g. 10% of the parent component’s height, and let autolayout handle the rest.


    Paulito
    August 26, 2024

    +1
    As a developer, I’m significantly impacted by the inability to set widths as percentages in Figma. When designers create mockups intended for development, defining the width of an element as a percentage of its parent element is a fundamental requirement. This functionality is a staple in CSS, so I’m curious as to why it isn’t available in Figma’s width or max-width settings. Can anyone shed some light on this or suggest a workaround?

    KellyK
    Active Member
    August 29, 2024

    +1 this would be huge! it’s very very common for us to need to specify different percentage widths for two resizable sections. it’s so difficult to do this manually without the help of auto layout.

    Melasios
    New Member
    August 30, 2024

    This is long overdue.
    Figma, are you listening?

    j_mssnr
    September 7, 2024

    Bringing AI and UI3 before a key feature like this to build responsive layouts is a desaster. The communication with developers is a torture without this feature.

    dennsi
    Active Member
    September 10, 2024

    This is the logical next step to significantly improve layout creation.
    Come on Figma… please don’t make us wait until Config 2025.

    Michael_Reddington
    New Member
    September 16, 2024

    I was hoping percentage widths would get announced at Config 24… but instead we got Figma AI 🤨

    Dave58
    September 20, 2024

    Please, please add this feature! Setting % width on a child div is commonly used in front-end web development and will cut down time spent translating between designing in Figma and actual dev. In short it’ll make Figma very intuitive to use for any front-end developer.