Skip to main content
Question

Reset another component when closing an overlay


Raphael_M

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.

This topic has been closed for replies.

2 replies

uipastel
  • New Member
  • 30 replies
  • January 9, 2024

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.

Raphael_M
  • Author
  • Power Member
  • 394 replies
  • January 9, 2024

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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings