That happens because all instances of that component are tied to the same exact variables. So interacting with one instance will trigger corresponding action through variables on all instances. That’s something youtubers are not telling you about this approach, because it makes it much less amazing.

If you still want to go this way, you need to create separate set of variables for each instance and connect them manually to each new instance.

Thank you Bart_K for answering my question!

I do have two sets of variables for each dropdown menu, as below:

I can open these menus one by one, which works perfectly. The problem is: They will all remain opened unless I click any one of them to close the clicked one. I do have the same property/variant name for most of the component elements.

John

Figma unfortunately don’t have “on click outside” trigger so you need to fake it. Some people add “mouse leave” trigger to dropdowns to not leave them permanently opened without being clicked on. I found a way to fake “on click outside” action by placing giant invisible layer behind dropdown in opened state which have “change to” action set to closed variant on “on click” trigger.

I have a strong opinion that this is the best you can get, IMO it’s the least realistic way to build such menus. My preference is to use “open overlay” interaction. It does support “close when clicking outside”. You never get more items visible than you need. You will never hate to fight with layers structure to prevent overlapping.

For prototyping purposes I’d create a special dropdown component on the same page where I have my prototype. Which isn’t very different from you have created, but the triggered element and the dropdown overlay are separate instances sitting on the same page.

“Open Overlay” was my choice at the beginning of this project. Considering its lack of interactions I decided to switch to the variable approach. Didn’t know it would become a nightmare lol.

I also agree with Bart that we need more flexible variants of “mouse leave” and “on click outside”. At lease they should work between components/instances and frames.

Thank you guys!