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!!