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

Ask the community
1

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?

2 Likes
2

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.

1 Like
3

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.

1 Like
4

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.

1 Like
5

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…

6

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.