Close all overlays and open target overlay

One more upvote for this. You can call it “Close underlying overlay” or “Swap underlying overlay”

My use case is when I have to change the content of an overlay, based on the dropdown option in it, to lock/unlock or change various other dropdowns or input fields.

1 Like

It’s not the best solution but here is the workaround I use for toasts displaying:

  • Create a component set with all your toasts
  • Add this component into your main frame
  • Create two variables such as “is_toast_visible” (boolean) and “toast_variant” (string)
  • Assign the boolean variable to your component layer visibility and the string variable to the component variant
  • Based on your interactions, you can use the “Set variable” feature to display/hide the component and change the string variable so it matches the toast to display

For example with a “Publish news” workflow, I open an overlay with a form. This overlay contains a CTA that itself contains a click interaction. On click, I set two variables: boolean to true and string to “Published” (which is the variant name of my published toast).

The only issue with this approach is that I don’t know how to hide again the toast because the main frame is never reloaded nor is the toast component so you cannot use a delay to hide again the toast. It would require a new interaction.

Hope it helps, but Figma definitely needs to improve the multiple overlays behavior.

1 Like

When I first posted this variables weren’t a thing. That is a great workaround Leks.

1 Like

Thanks, glad to help :slight_smile:

1 Like

I don’t know if something changed, but today I was able to add stacked interactions to a click interaction – first to close the current overlay (i.e. the dropdown menu) and then open overlay (a full-screen modal). Was this an official update or in release notes? All I can say is that it’s working!!

6 Likes

Ah yes, that is certainly the solution I was looking for. This has probably been in place since the update that made it possible to create multiple interactions per interaction. Thanks for sharing. @Figma_Support you can close the ticket, yeah!

1 Like

An additional note that I was even able to open an overlay on top of another overlay and then close it without closing the underlying overlay, making me think that there is some logical layering to it. I know this sounds sacrilege, but it was just a loading indicator that was the second overlay.

3 Likes

Great news! Works like a charm. Exactly what I need for months :slight_smile:

2 Likes