Skip to main content
Question

Components won't resize if they're in an auto layout frame

Jack_Dickson

I’m trying to combine auto layout components with frame resizing, however I can’t seem to get them to work together. If I have a series of component in an auto layout frame, they won’t resize even if I set the constraints of every component to “Left and Right”. If anything, when I have my elements in a Frame then add auto layout to that frame, the “Left and Right” constraints disappear. I also re-checked all of my component’s parent components & variants and set their constraints as well.

I tried to solve this by setting the resizing value to “Hug” or “Fill Container” up in the coordinates panel, but as soon as I resize the “parent frame” the components & auto layout frames automatically revert to “Fixed” and don’t hug or fill the resized container.

The end result is that it feels like I can’t use auto layout if I’m trying to have my screen resize automatically. Other designers I work with are also running into this problem.

Any ideas on what could be happening?

    7 replies

    Klesus
    • Klesus
    • 237 replies
    • June 24, 2022

    Children of autolayout frames don’t normally constrain, they have resizing behavior. That’s why the constraints panel disappear. Recently they’ve added absolute positioning inside autolayout frames though which switches the behavior back from resizing to constraints and positioning, but I’m fairly certain that this isn’t what you want.

    Autolayout frames and its children’s behavior are somewhat codependent of each other. Unless both parent and children are all being set to hug (besides one useless exception), at least one of them has to be set to fixed. So if the children of an autolayout frame are set to fill, the frame containing the children has to be set to fixed.

    The purpose and main benefit of autolayout is that the frame and/or it’s children’s size adapts automatically. If you manually change the size of either a child or an autolayout frame, it will change it’s resizing behavior to fixed because otherwise there wouldn’t be any point to it.

    It’s difficult to tell which setup you should have without knowing which result you’re after. Instead I encourage you to read up about autolayout in their help section.

    Michael_Staton
    IraX
    2 people like this
    • Michael_Staton
      Michael_Staton
    • IraX
      IraX
    McKinley
    • McKinley
    • 10 replies
    • February 23, 2023

    I am also having this issue. Makes it impossible to demonstrate an expanding form on a variety of screen widths. Would be extremely helpful to have this capability.

    Janine
    1 person likes this
    • Janine
      Janine
    Amanda_Stauffer

    Same here; I’ve been through three Figma tutorials and still can not get the elements inside the frame to resize no matter what I try. It’s enormously frustrating.

    Michael_Staton
    KennLucas
    2 people like this
    • Michael_Staton
      Michael_Staton
    • KennLucas
      KennLucas
    S

    Same here too, I wanted to have my datagrid rows with an horizontal auto-layout inside a page with a vertical auto layout (to have the title of the page, description and table) with specific margins, but it does not work…

    Michael_Staton
    1 person likes this
    • Michael_Staton
      Michael_Staton
    Ceetheg
    • Ceetheg
    • 1 reply
    • September 19, 2024

    I was having a similar issue and was able to fix it by adding horizontal padding. It was set as a default of 0 which was why when expanded it wasn’t adjusting the size of the frame.

    Michael_Staton
    Klesus wrote:
     

    It’s difficult to tell which setup you should have without knowing which result you’re after. Instead I encourage you to read up about autolayout in their help section.

     

    This is the problem though.  I’ve been using Figma for four years, and at least once a day I run into some ridiculous behavioral issue with autolayout.  I have read the documentation.  I have watched YouTube videos.  Yet, it still is a constant problem.  

    Michael_Staton
    Solene_Carbonel wrote:

    Same here too, I wanted to have my datagrid rows with an horizontal auto-layout inside a page with a vertical auto layout (to have the title of the page, description and table) with specific margins, but it does not work…

     

    Don’t even get me started on how Figma deals with Tables and Grids -- THEY DON’T.  You have to go horizontal or vertical autolayout and then deal with the chaos.  

    Reply


    Terms & ConditionsCookie settings

    Cookie policy

    We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

     
    Cookie settings