Figma Support Forum

Closing multiple overlays?

Hi, this is a use case I’ve had to find many ways to try and address, but never a good solution.

If I have an overlay, open another overlay, I would like a way to have the previous overlays close. In my example, the typical use case is a tooltip that gets shown on Hover, which opens another overlay like a menu. From that menu, I might open a dialog.

Unfortunately, the previous overlays stay stuck on the screen until I close all of them manually. Is there a solution in terms of prototype triggers/interactions that can solve the issue of the tooltip and menu (previous overlays) from doing this?

Would Interactive Components solve this issue? I get that you can bake-in interactions, the issue is with getting the prototype to understand the Close Overlay. I’ve even added Close Overlay on Mouse Leave, and that doesn’t make them go away after I open the next overlay.

See my video attached, thanks.

Did you try to use Navigate to Frame, instead of Close Overlay?

Did you try to use Navigate to Frame, instead of Close Overlay?

What frame would I navigate to? There is a “hacky” work around where I can duplicate the base screen/frame I start from, and point to that I guess. But that doesn’t solve the issue of the tooltip and the menu from staying visible. I don’t want to have to use a screen/frame for every interaction like these. Again, I know that Interactive Components will help solve some of this, but not all.

Is not exactly what I said in my last message, but here is a possible solution:

Sorry for the late reply. Can I get edit access to the file to see this in more detail? You can put it in your Drafts to keep it in a safe place, and not worry about permissions then. Thanks for the example!

You should be able to duplicate the file even if you have view only access. :thinking:

Anyway, I changed the access. :blush:

1 Like

Thanks! It was pointing directly to the prototype, not the file.

Okay, your Solution #1 is really interesting and clever, with the transparent frame background! I’ll keep that in mind. It still doesn’t solve the limitation I believe, but this is a potential way of solving it. Thanks again!

P.S. Going to keep this post open in case anyone else from @Figma can answer.

There are also other solutions, but is a bit tricky without knowing the layer structures you used.

It’s basically what you had. Main frame/screen with the UI, button in that frame points to an overlay, object in the first overlay opens a second overlay.