"Empty" Auto Layout Frame keeps the size of last hidden child

Hi, I’m not sure if this is new since the May update, but I wonder why “empty” (all elements hidden) Auto Layout Frames keep the size of the last hidden child (and I do not mean last in the list, but the last element to have been toggled out of view by the user), making them not-0px high even with nothing in them.

See here a file with a Frame with three hidden rectangle: the Frame keeps the size of the last child rectangle to have been hidden. When adding a 0-px Frame to the AL frame, and toggling this 0-px Frame off last, the container goes 0-px.

In my opinion, empty AL Frames should have a height of 0. What do you think?

8 Likes

I don’t know Figma’s reasoning, but to me it makes sense not to collapse empty autolayout frames because if they become size 0 then it would be tedious to put things inside them.

I agree, it makes sense, although the logic is hard to understand. The actual issue I have is related but not the same exactly: when this “empty” Frame is made into a component, it will keep its maximum size even with no displayed content.

It’s an issue when implementing component toggle properties in a component. Say your component has three possible zones: A, B and C, but B and C are wrapped in a Frame in the overall structure. You can’t create toggle properties for B and C without having their wrapper keep its maximum size (and thus the overall component not hugging only A, for instance). The only way to go is to add a fourth toggle property for the wrapper, not ideal.

I think I understand.

A possible workaround might be to put a 0 size frame between B and C. Or at least somewhere in the same frame as B and C, but assuming there’s paddings involved, putting it in-between IMO seems the easiest, but might not be viable if you have more than 2 children. Either way, after that you might have to make adjustments to make it look nice but it could work.
The problem is because a component with autolayout resets it’s size when all it’s children are hidden, but if you put a 0 size frame inside, which isn’t visible either way because it’s so small, it still counts because it’s not hidden, and the component will hug it.

2 Likes

I think am having the same issue:

I have a component with a horizontal Auto-Layout frame with 2 elements that have boolean properties. If I turn off both elements what I want to happen is for the container to collapse.

It makes sense why it doesn’t, technically, but when we were just using variants I could manually hide the container itself when I had a variant with both internal elements hidden. Now if I’m just using the boolean properties I can’t do that.

1 Like

Yeah im getting this too, the auto layout frames should completely collapse, it makes boolean visibility probs useless in some cases where it should be used

1 Like

Like to have it the way it is. Hunting zero size frame somewhere buried in layers would be a nightmare

Having this issue to when building a component. Placing a 0px shape does work but not ideal, would much rather have the whole autolayout object collapse to 0.

It also keeps it’s padding even when using the 0px hack which for me causes unnecessary padding/spacing. If the whole thing collapsed then the spacing would go away between the items and not have the extra padding.

I absolutely agree that the frame should collapse in that case.

3 Likes

I understand not wanting the container to collapse. However, logically it should - assuming we expect the design to behave as it would in code.

Additionally, it makes it tremendously difficult to effectively utilize auto-layout with many of the new component prop features - notably boolean show/hide.

3 Likes

I’m also having this issue, building components with boolean visibility. If there are two components in a “wrapper” auto layout frame, even if both children are hidden, the layout would not collapse. One workaround is to use another boolean just for the wrapper, but it’s just one more property to manage. The 0 height frame approach doesn’t work either, because the padding still doesn’t collapse as @Adam_Diestelkamp said.

This makes the new boolean property quite unusable in complex components.