Support "on click outside" or "blur"

I really like that too :smiley:

Yes! +1

1 Like

This would be very useful!

Is there anything like this? However I found a good alternative option is “Mouse leave” instead of “Click”

1 Like

Big +1 from me. I’m running into an issue with a prototype I’m building now and “tap outside” would help.

It would also be nice if we could be more explicit, with “tap other instance”, where a user tapping a different instance of the same component would trigger something, because it’s not so much that someone tapped anything else that I care about, but that somebody specifically tapped another of the same component.

2 Likes

+1
Yes please! Prototyping complex software would be so much easier. And I am not forced to switch the Software for implementing things like “when clicking this, change other component variant to that”.

1 Like

This in combination with variants can allow us to make an accordion that automatically collapses all other list items except for the one clicked on - having to make the same number of copies as the number of list items is just very time-consuming

+1 to this

+1 to this! Being able to have a component switch from Focused > Not Focused when you click outside somewhere would be awesome, especially for text boxes.

Yes please! This would be very helpful. Right now I’m using “Mouse Leave” but “Click Outside” would feel much more natural.

+1 Absolutely crucial when it comes to hi-fi prototyping.

@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.

1 Like

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 :confused: