Variant switching using variables behaves differently on prototype

Ask the community
1

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:

  1. 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;

  1. 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.

2

Hey there, thanks for reaching out!

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?

3

I have the exact same issue.

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.

2 Likes
5

Yep, and the same issue still clearly persists. This is really annoying and pretty much makes the variables unusable.

6

I’m encountering the same issue well. Hope this issue resolves soon…

7

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.

Thanks in advance!