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

+1 this is starting and will continue to cause issues for designers and developers across our product teams

+1 can’t properly use boolean show/hide in complex components

+1

2 years later this has still not been fixed? This is starting to become like the "multiple independent strokes" topic. Still nothing while it's very much needed to prevent us from hacking our way through the application...

Ha, got here by googling why it behaves like it does and wondering if I was doing something wrong.

In my case: I have 2 items (set to fill width) that have booleans for their visibility in vertical auto layout. The hack with including a 0 height rectangle at the bottom in the auto-layout works, so I'm good. It's just that you loose a lot of time/productivity investigating such bugs, hunting for solutions, etc. 

+1 - making a card with booleans to toggle the visibility of items within an auto-layout. When they’re all turned off the height resets as if they were all visibile, instead of collapsing...seems totally counter-intuitive and broken to me?

Hi folks, You can solve this with a little hack – I think its been mentioned here in this post, but I didn’t see a screengrab, so here it is:

1. In Figma, you can set an element to have 0 height (I don’t think this was always the case, but you can do it now).
2. However, an autolayout container has problems collapsing to 0 height, when it is emptied of elements - it does better when it has a containing element to set its height from, even if that element is 0 pixels high.
3. Hence the fix is to put in 0-height stroke that will always be at the bottom of your stack. The Container will now reliably collapse to 0px height when all items are hidden inside it.

Hi folks, You can solve this with a little hack – I think its been mentioned here in this post, but I didn’t see a screengrab, so here it is:

1. In Figma, you can set an element to have 0 height (I don’t think this was always the case, but you can do it now).
2. However, an autolayout container has problems collapsing to 0 height, when it is emptied of elements - it does better when it has a containing element to set its height from, even if that element is 0 pixels high.
3. Hence the fix is to put in 0-height stroke that will always be at the bottom of your stack. The Container will now reliably collapse to 0px height when all items are hidden inside it.

 

I tried this hack but the issue is that the stroke counts as an item so a gap will be created between it and the other elements which will then ruin the size of the frame 😅 so it only works if the frame has 0 gap.

This is a nonissue though, you can still toggle the visibility on in
a) the main component by simply selecting the component (purple dotted bounding box) and toggling the visibility of whatever you hid via the properties panel
b) a component instance by doing the same thing (select component and toggle visibility in the properties panel

Collapsing empty containers in a component instance if all the container children are hidden makes total sense. 

Chiming in to say this is a real bummer for design systems.

Say I can display 1, 2 or zero buttons in a banner. When I toggle off both buttons I expect the autolayout containing them to collapse, since it is, for all intents and purposes, empty. With the current behaviour I have to add another toggle for the button container, which makes the properties panel confusing to designers.

We used to use subcomponents to prevent some of these issues, but since running into major performance issues with our prototypes last year Figma recommended we use fewer nested components. So this is a lose-lose situation unfortunately.

It is now 3 years later and still not fixed. It’s insane. there is no good workaround because even if I add a 0px frame, it will still cause extra space to be taken up due to the parent’s ‘gap’ setting.