Support "on click outside" or "blur"

@Figma_Support
Do you have any plans to implement this “on click outside” trigger option?
It would be invaluable in creating true to life prototypes.

I’ve wanted this many times- Figma, please do this.

So this is actually a simple fix.

If you have something like an expandable search field that you want to close when you click outside of it. You most likely have this component assigned to a variable. So do something Like this:

Component = String Var Name = (values) default, open

the component opens when you click on it.

Once you have things built. Just add a conditional statement to the screen as an On Click conditional statement that tells open things to close. So you basically just click in the negative space of the screen and anything that is open will change to it’s closed state. The close trigger is the frame. To you don’t add a close trigger to the component because you aren’t clicking on it.

If Component == “open”

• set component to “default”

Great! however I cannot use it. Say to upgrade the plan 😕

do you mind sharing a live example of this? I think it would be very helpful for those not so knowledgeable about this type of conditional logic. I know I would learn a lot from it. Thanks!

While this works on an individual component level, it’s still a huge pain to implement once you have more than one or two components that can be focused/unfocused or open/closed on the same screen.
Say you have a form with 10 inputs and dropdowns. Not only do you need to create a “focus: true/false” variable for each separate input, you also need to both create an on-click event that sets every single one of them to false when clicking in the empty space, and create the same on-click event for every component on screen, so that focusing the next input causes all other inputs to lose focus.
This seems like a very unwieldy workaround simply to avoid having a “click outside” trigger (which already exists for overlays).

same here, I also had the same problem

I came up with a bit of a workaround: inside the component where I’m defining the interaction, I add a transparent frame (around 1600×1600), position it absolutely in the center, and use it as a trigger to detect outside clicks.