Hey i am trying to make multiple instances of a component change on all frames when interacting with one of the instances. Haven’t been able to find much help on this topic myself so giving it a shot here.
Every instance has its own state.
As for now, there is no way to trigger component from outside of it.
So I guess it’s not possible.
Yes you can! The straight forward way is to simply make the changes in the main component but in case you made the changes in one of the instance, then you can do this - Select the instance, click the meatballs menu (three dots) next to the instance name, click push changes to main component. This will change all instances of the component on all frames without you having to go back to the main component to make the changes. I hope it helps.
Thanks for the reply. I think you’re misunderstanding what im asking. Im uploading some photos that might help explain it.
I am trying to make a prototype where you can switch between colors of different motorcycle models:
The problem is when i switch from the view with the map to the “overview” tab the color of the motorcycle model changes to which ever color it was on previously in that frame.
So in this case i changed to color from black to the multicolored model but when i switch to the overview tab its still the black model showing.
I want to find a solution that changes the color on both frames.
While I don’t think it’s possible to make several instances be affected from one interaction, I thought it might be possible to achieve the desired effect. But it’s kinda complicated to explain so here’s a test prototype that I threw together real quick.
Figma – 19 May 22The problem with it is that it’s a stupid setup. It looks like this:
The gist of it is to make things interactive components so interactions stay independent.
Oh I see, as someone already mentioned every instance has its own state, this effect cannot directly achieved by interacting with instances. It’s more in the domain of prototype logic, which Figma does not directly support.
You can have a work around by duplicating your entire screen and instead of changing the instance by using interactive component, you can simply change the entire screen leading to a different prototype path with the updated colour.
I understand that that would lead to a lot of duplicates to address all the permutations, so you can do that or you can simply add a note to your developers mentioning how this is supposed to work.
Thanks for the response. I will probably end up doing the latter 😀
Probably late to this party, but now it should be possible with variables. You can “Link” a certain property of all instances to a variable and then change the value of that variable when you interact with any of the instances. All you need to ensure if that the value of the variable and the name of the variant matches.
So, if I understood this correctly,
Let’s say you have a component called “Bike Images” with 4 variants “Black”, “Blue”, “Red” and “Gray”. Let’s also assume the name of the property is “color”.
You can then create a variable called, let’s say “Selected color” and set its default value to black.
Then, go to all instances of this component that you want to see impacted, and link the property to that variable. You can do this by clicking on the small gear icon that appears besides the property selector for an instance. Below is an example.
Then, add a “Set Variable on click” interaction of any element that a user would click to change the color. It should change it on all instances.
As an example, let’s say you have 4 frames with fills set to “Black”, “Blue”, “Red” and “Gray” respectively. On the blue frame, you can use “set variable” to change the value of the variable “Selected color” to “Blue”. This could change the property of instances that had this variable linked to that property.
All you need to ensure is that the variant name (or property value) which is “Blue” in this case matches the value you set the variable to. So, if you had a variant Blue123 then you need to set the variable as well to Blue123.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.