Reset another component when closing an overlay

Hi, everyone. I’m quite new to prototyping and would like to hear some suggestions or advice from you.

Is there another way to reset another component’s state when an overlay was closed?
image

I was looking through the condition properties to see if I can find something like if [overlaying-frame] is closed then set variable [clicked_item] to false. This is only if that frame is opened through Open overlay effect.

Thank you.

While Figma doesn’t currently have a built-in condition for directly detecting when an overlaying frame is closed, here are a few workarounds you can use to achieve a similar effect:

  • Set a variable when opening the overlay: When the overlay is opened using the “Open overlay” effect, create a variable (e.g., “overlay_open”) and set it to “true.”
  • Reset the variable on external clicks: Use the “When clicking outside” trigger to create an interaction that sets “overlay_open” back to “false.” This effectively indicates that the overlay is likely closed.
  • Conditionally change clicked_item: Use the conditional visibility options to check the value of “overlay_open.” If it’s “false,” set “clicked_item” to “false” as well.
1 Like

Thank you for the advice but may I know how to use the “when clicking outside” trigger in the conditions? From what i see, all it has is click, hover, mouse enter, leave…; and the if’s for the variables.

Ideally, I want to use the scrim created using the “add background” in the overlay settings and then just use the “close when clicking outside” to close the overlay, remove the scrim, and reset another component back to default.

I did create a work around by adding a scrim manually like this image on the overlay frame:

and using the true false condition to reset the other components while closing the overlay. But, the scrim follows the animation of the overlay because it’s basically inside of it albeit I want a different effect on it.