When based on a conditional I want the component variant to change to another one (depending on the conditional), it doesn’t let me choose it to go to two different change-tos. If I change one of them, it changes the other one immediately. I would upload image or video but I can’t as I am a new user. But basically to replicate this: Create 3 variants of a component (eg a number 1, 2, and 3 in a frame, and make them into component variants, let’s say the prop is either 1, 2, or 3) Create a variable (eg. next that is 3) From variant 2, create an on click interaction that has a conditional: if (next == 3){ change to props = 3 } else{ change to props = 1 } What you will see is that when you create the second change to, it is automatically set to props = 3, and if you try to update the second one to props = 1, it will change the first one to props =1 as well.

Question

'Change to' with conditional action not working

Forum|Forum|3 years ago
June 22, 2023
66 replies
7357 views

When based on a conditional I want the component variant to change to another one (depending on the conditional), it doesn’t let me choose it to go to two different change-tos. If I change one of them, it changes the other one immediately.

I would upload image or video but I can’t as I am a new user. But basically to replicate this:

Create 3 variants of a component (eg a number 1, 2, and 3 in a frame, and make them into component variants, let’s say the prop is either 1, 2, or 3)
Create a variable (eg. next that is 3)
From variant 2, create an on click interaction that has a conditional:

if (next == 3){
change to props = 3
}
else{
change to props = 1
}

What you will see is that when you create the second change to, it is automatically set to props = 3, and if you try to update the second one to props = 1, it will change the first one to props =1 as well.

Components, variants and instances

This topic has been closed for replies.

Show previous replies

Ilona_Czerwinska

New Participant

Wow, @Terry_Burris the workaround works for me as well, thank you so much! 🙌

Michael_Persson

Hello,

I am trying to create a primitive “event listener” component state-based system as follows:

Variant 1 and Variant 2 loops in between each other with a “After delay” conditional to check a boolean state, which if true changes to Variant 3, which has a longer delay, and then sets the boolean to false and switches back to the Variant 1-2 loop. I have a button in the prototype bound to set the boolean to true. The purpose of this functionality is to handle toast visibility/animations in an easily reusable component that will continuously look for state changes in the boolean.

My intuition tells me that this should work, but Figma won’t let me select the variants in the Change to-action inside a conditional, even though they exist in the list and aren’t grayed or crossed out.

Does anyone know why?

Haroll

Power Member

Hi @Michael_Persson

You’re not the only one experiencing this bug, it has been reported but not fixed yet tho’ Trouble with Figma's Conditional Interactions - 'Change To' Action - #9

Michael_Persson

Thanks. That is exactly the issue I am having.

Michael_Persson

The workaround “works” although without a way to evaluate and differentiate the else logic I struggle to imagine use cases for conditional actions 🫠

Hoping this gets patched soon!

Ellaine_Gabotero

Is this how you see it on your end?

Best,

Greg_Saxton

New Member

Yeah @Terry_Burris I am having the same issue. So frustrating!

Prameshwar_Kumar

I feel there is bug with conditional variant interaction. I am having a Boolean variant which i am trying to set with conditional“If something true change this Boolean value to true else change to false ” But when i am changing in “else” the same reflecting to if condition as well . Hope many of them same issue.

Katelyn_Barth

New Member

I’m also having a difficult time with this. Not only is it hard to change the interactions, but it makes interactions with multiple conditionals really hard to read.