I created a component set which is a card that can change in size, used placeholder images on the variants.
for each instance i override the images of both variants, and switching between them works as expected while editing and on prototype if I do it manually or with an on click.
In my specific case i need it to be switched using variables, and, although it works on edit mode and on prototype if i flip the variable manually, when flipping the variable using a button the component overrides the image to the placeholder one.
Steps to recrate:
create two rectangles each if an image as itās fill;
2)make the rectangles into a component set;
3)for simplicity set one variant as true and the other as false;
4)create an instance of the component;
5)override the image on both variants of the component;
in this state both on edit mode or prototype changing the variant keeps the images as the ones chosen in step 5;
create a Boolean variable;
7)attach the variable to the variant control of the component instance;
in this state manually changing the variable to true or false correctly updates the variants to use the images chosen in step 5, both in edit or prototype.
8)crate another rectangle, to use as a button, set an on click on it to set the variable created to ānot variable nameā, so it will switch between true and false each click;
9)test it on prototype;
now, on prototype view, changing the variable using the button will override the image chosen in step 5 to the original image of the component set, the variant that the prototype starts in will keep the expected image, but the other one will be reset to the original.
I really think thatās a bug on the way Figma handles the prototype view, changing the value of the variable manually on the global variables menu works as expected but changing it with set variable doesnāt, which, to me, makes 0 sense.
Itās hard to be sure whatās happening without seeing your file. Are you able to share a link so that we here in the community can take a closer look?
Using global variables to change the variant states of instances seems to reset any individual overrides of the variants made in the editor. In my case I want to change some details on a card from an empty state to filled.
I observed that linking the variants property of instances to a global variable disables the option to manually switch between the variants in the editor as well. This already hints to a āhidden weird feature/bugā. At this point my working theory is that using global variables in this case completely disables the possibility for instance based individual content and only the standard content of the component is ever used.
This is really not how I would expect it to work and is throwing a major wrench into my prototyping endeavours. Currently controlling instances via a click somewhere else in the prototype is only possible via the global variables - and this then breaks all those instances and makes it impossible to alter content individually.
Hey @jiitikka and @CarolineZ, sorry for the issues! I am happy to take a look at this and investigate. Are you able to share a screen recording with me so I can share this internally with the team to double check if this is a known bug.
Also, are you able to provide a direct link to the file here, and invite support-share@figma.com with ācan editā permission so we can look into this further? Note that users with @figma.com emails on your team do not count towards your billing.
I have a similar issue which I used a variable to swap a variant of a nested instance, and then it doesnāt work as expected .
In my case, A complex component of the Fruit Accordion has some instances of Apple and Mango which have their own variant to swap.
Please help to check out my file.
Here is the demonstration of my issue for the Fruit Accordion component which not preserved the childās instance state which the swapping the childās variant using variable.
Hey, it was a long time ago, but from memory i found the solution some time after i posted.
In my case, on the step 1 of the example case i originaly posted, if you make sure both rectangles have the same name it works as intended.
When making a component set itās advised to make sure all parts of variants have the same name.
Lets say you have a card that is made out of a frame, an image and a caption, and you make two variants, one for dark mode and another for light mode, if, for example, the image is named ācard imageā on dark mode it should be also named ācard imageā on light mode, the same for teh frame and the caption.
Not sure it is the case for you, but try checking the names of the variants to see if that fixes it.
I have read and understand this preserve overrides, thank you.
All layers of each variant of a component have exact same name. You may inspect my file here.