Skip to main content
Aalok_Trivedi
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

      Show previous replies
      Nathan_Curtis
      Nathan_Curtis
      October 24, 2023

      Agreed, this seems like a very valid use case, and is needed for at least one component in my client’s library.

        vdekkernl
        vdekkernl
        Active Member
        October 24, 2023

        Agreed, a while back I posted a similar request. See my post here:

          Thibault_Serre1
          Thibault_Serre1
          New Participant
          October 25, 2023

          We really need this feature,
          We need to be able to set an element to “X columns” according to the column grid previously set (nb of columns, gutters and margins could be variables)
          we need to be able to set a frame to “X %” of the parent

          These features could help us to design more like dev, and this could be really useful for the devmode, to have a good devmode more close to the reality of HTML/CSS development.

            Karen_Chan
            Karen_Chan
            October 25, 2023

            +1 please.
            It’d be amazing to be able to define how child elements to fill the parent by Fr/Percent units.

              Scout_Digital
              Scout_Digital
              October 27, 2023

              +1. Minimum character count.

              Scout_Digital
              Scout_Digital
              October 27, 2023

              +1. This is one of the last pieces of the puzzle of being able to adequately mimic layouts on the web.

                alexrest
                October 30, 2023

                +1 thanks!

                  Greg_Huntoon1
                  Greg_Huntoon1
                  November 1, 2023

                  This is a pretty urgent need, in my opinion. Honestly, this is one of the main reasons we can’t make truly responsive components that operate and respond the way they do in code.

                  For example, I have a section header component that contains a title and an optional description. When the description is on, I want it to occupy 8 columns and the title to be constrained to 4 columns. But there’s just no way to achieve this in a reasonable (non-plugin / non-hack) manner. I should be able to either set them to 1/3 and 2/3, or to 4 columns and 8 columns, respectively.

                  This will be such a huge unlock when the enhancement makes it to Figma!

                  image

                    Hoby-Van-Hoose
                    Hoby-Van-Hoose
                    New Participant
                    November 2, 2023

                    This indeed would be very nice.

                    It’s something that’s been requested since before Auto-layout and Figma used a different feedback and discussion forum.

                      djv
                      Figmate
                      djv
                      Community Support
                      November 3, 2023

                      Thanks for the feedback!

                      We’ve merged similar topics together, and we’ll pass this onto the Auto Layout team for consideration.

                        Show more replies
                        Terms & ConditionsAccessibility statement