Issues with "Set variable" and toggling through variable modes

Please search for existing topics before posting! Press :mag: at the upper right to search.

Having this pesky issue with the “Set variable” option when prototyping. Not sure if I’m missing something or if a known issue.
(Also apologies, this is my first post so I’m limited to just one image upload :slightly_frowning_face: , but if anyone needs any more for context I can provide :saluting_face: )

The premise:

I am trying to cycle a component between three different states (modes): Some starting point (Mode 1), display some form (Mode 2), confirm some form submission (Mode 3).

The setup:

My variables

The prototype:

I’m using the Set variable method in my prototype to try to cycle through each mode. I’m having success except when I get to my Cancel button… When I apply the Set variable properties to switch all my variables back to my Mode 1 states, the prototype stops completely. At first I thought I had a bad setup. So I then created a faux step.

The Faux Step:
I made a Mode F that mimics all the settings of Mode 1 and created a separate Faux Cancel button to trigger it, et voilà!

So, this is starting to smell like there’s some issue setting these variables back to the first mode? Has anyone else encountered this issue, or am I missing something completely? :thinking:

Thank you!

Having a quite similar problem here. Trying to switch modes by clicking a button, but it does not work, nothing happens. Even in edit view nothing is happening when I change modes from light to dark for example.

Hi, I am having the same problem, but this is the only thread I have found so far about it. Which leads me to believe I’m not understanding something about variables properly. Did either of you get to the bottom of this?

Hi! I had the same issue and it was because I was using the colors in the components from color styles instead of the libraries. Hope this helps!

So, this is starting to smell like there’s some issue setting these variables back to the first mode ?

Yes, I am experiencing the same problem. I don’t know if this is intended functionality, but it doesn’t seem to be possible to set a variable back to the initial value/mode.

I’ve tried this using separate variables, as well as a single variable with multiple modes with no luck.

I’ll create a simple prototype to showcase the issue and share with the Figma team.

Hi, I am having the same issue to - anyone have any success?

Hi all,

Thanks for flagging this issue! I am checking internally to see if there is an issue about this. I will get back to you when I have anything I can share.

Thanks,
Toku

1 Like

Thank you, to expand on what I am trying to do: I change the value of one variable to change a variant of a component ( in this case its a kebab menu to an active state). This works. But when a second action navigates away from the kebab’s menu I want to change a variable on the kebab icon, which is a separate component to the menu, back to its unclicked state, which is the original variant. All the variant names are set up as options, but it seems there is a problem either changing a variable twice, or changing it between different components. All the components are in a section though I don’t think that matters.

I did some more experimentation today and it seems like variables modes can’t be set back to default/initial value in prototypes.

The use-case I tested was a set of buttons to change the frame size between laptop and desktop.

I created a variables for “width” and “height” with a mode for “laptop” and desktop.

“Laptop” mode is the first in the list in the variables panel, and therefore the default.

In the prototype, I can click a button to switch the width/height variables to “desktop” mode, but clicking the other button doesn’t revert them back to “laptop” mode.

However, if I create a third mode called “laptop2”, I can successfully switch my variables between “desktop” and “laptop2” modes.

For now, I’m renaming the first mode to “default” so I know not to use it. That helps avoid the issue, but it still seems like a bug that you can’t set variable mode back to “default.”