I’m creating a grid of multiple instances of a single component that can be clicked to toggle their appearance. The state of these should ideally carry over into other screens in a prototype.
As shown in the screenshot below, I want to set it up so that only the one instance is changed upon click. I have a Boolean variable “Selected” applied to each instance, and my prototype is set that “Upon Click”, the boolean will be toggled.
However, what actually happens is because all instances have the same Boolean applied, clicking one ends up toggling all of them.
How should I set up and apply variables and prototype settings to these instances to get my desired outcome?
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