How to set up boolean variables on multiple instances, but only change a single instance on click?

In the component variant, we will easily handle it. But I will check and share it with you.

Do you mean applying variables to the master component instead of the instances?

Currently my work around for this has been setting modes. This way you are able to control a single instance. However, if there is a better way, I’d love to know as well.

I haven’t done much to explore using modes for something like that. But this is for a corporate design system and I’m not sure if this solution will be ideal for this…

Also: the final mockup of the example I showed in my original post will involve 100+ interactive components on a screen. Pretty sure we won’t want to try and manage 100+ unique modes!

@Clara_Leet Another approach, which doesn’t use booleans or variables, is to create a button component with 2 variants (“Default” & “Selected”) and then use an on-click interaction to change between those states. The selected state for each instance will carry over between frames — just make sure to keep the corresponding button names the same across frames.

→ See example Prototype
→ Get example file

This is useful but in cases where I want the boolean variable to affect more than one component e.g. in a list view as well as a grid view, this won’t work 😦

I think Figma should consider this as an improvement to be made as soon as possible because in large teams with large design systems it would save a lot of work and reduce the amount of duplication of components just to show a simple interaction state.

Get the answer Here