Figma Support Forum

Layers order + Interactive components in auto layout

I have frequently met this problem earlier, but now I have another good example. When I need to build a form with interactive components, some layers are above the others and my dropdowns can’t open normally. Layers hierarchy is a very logical thing, but very restrictive, especially in auto layout.

11 Likes

yeah auto layout layer order is such a pain! I made a table without autolayout recently and I wanted to allow scrolling, but it causes the rows to overlay the table header when you try to scroll.
I ended. up wrapping all the rows in an auto layout container, and then surrounding the header, footer and this row container in a regular frame. If you need the equivalent of fill container you can just use left+right or top+bottom constraints. So I think you just need to go without auto layout in certain cases, where it makes sense but isn’t essential.

2 Likes

+1

1 Like

Definitely a need, it is the same with tooltips. Having a z-index for those elements would be best.

4 Likes

Here’s a hacky way to reverse the “z-index” ordering of Auto Layout layers:

Not the ideal solution and if you follow the Twitter thread linked from the file above, you can see that there is no easy answer. Figma mentions that a “layer ordering preference” could be a solution.

3 Likes

We really need z-index to be separate from layer order. I find myself detaching layouts frequently for these types of use cases and they’ll be even more common now that component hierarchy is removed from the context of the prototype.

3 Likes

This is why we don’t use overlays in auto-layout frames. We know double 180 hacks, but this causes a lot more problems. Like swapping components with hack and without a hack. Autolayout order in practice and in everyday work makes no sense for us.

2 Likes

Thanks @chudoloo, interesting! But yeah it looks like a hacky way.

1 Like

May not be ideal, but couldn’t you solve this by manually positioning a prototype “overlay” component?

Issue is that overlays aren’t supported so won’t show if you use the component on another page, or via a library. So you have to redo it every time you want a dropdown and lose all the benefits of interactive components