Skip to main content

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?

Same here, we shared our struggle as Design System team to Figma France.

We try to align Dev & Design, this is very… annoying.

Happens all the time on every component. So we create “fake boolean property” on the upper container.


It complexifies the property panel / API and requests designers to do stuff manually.


Hope it will come soon 🙂


Just +1 ing this to keep it relevant and boost the request. The way this is working today doesn’t align with how it works in code and is causing confusion for our developers and designers.


This bug breaks my expectation of how Auto layout set to “Hug” should behave, and it forces me to implement a workaround when creating flexible components that can toggle layers on and off.


This is making design of layout components with collapsible sections 100x harder than it should be. Instead of simply hiding a top section and having it collapse/disappear completely, I now have to add complicated workarounds to get the layout to behave as it logically should-- not holding any space or padding if no layer in it is visible. Please fix this.


Does anyone have a hack/fix for this issue when using a negative gap for the items in the container that won’t collapse? The 0px fix doesn’t work.


+1 ran into the same issue


In my opinion this feature limitation is a direct contradiction to what Auto Layout is supposed to do? Why would you intentionally add a feature limitation that makes the handover to developers so unneccessarily complicated?


In the Figma Learn article on Auto Layout it says: “Use auto layout to create responsive designs that grow to fill, shrink to fit, and reflow contents” and “Build lists that adapt as items are added, removed, or hidden” but it does not do that due to your feature limitation.


This issue is costing me and my team precious time not only during design, but also when collaborating with developers.


To everyone else following this topic: our workaround is creating sub-components. Let’s say you are building a card with an optional header, and this header is an Auto Layout containing a couple of different things (like an avatar and a time/date slot, for example, that are shown next to each other). Building the header as a separate sub component allows you to toggle it on/off in the card component. Exposing the sub component in the card component then gives you all the options you need (in this example, hiding either the avatar or the time/date slot independently from each other).


This is not ideal as you, theoretically, can turn on the header boolean and then turn off the two header booleans, which will replicate the bug that is being discussed here - but it does allow you to turn off the entire header.


+1 please fix 


Reply