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.
Page 1 / 3
Dear community,
I wanted to ask if anyone else is experiencing issues when trying to use the “change to” action with variant changes in Figma’s conditional interactions. The dropdown with variants displays correctly, but selecting a different variant than the currently chosen one doesn’t seem to have any effect. Additionally, I’m curious if you are able to see the options to apply variables to variant components because I can’t seem to find them.
Any insights or suggestions would be greatly appreciated. Thank you in advance!
I’m experiencing a similar issue. When I set a “change to” action on click, things work well, but if I set the “change to” action within a conditional, the dropdown menu won’t allow me to select anything. I’m assuming this is a bug? Otherwise I’m not sure why I cannot select those variants.
I reported the bug 🙂
Same issue here. At least I was able to make the interaction by dragging from the component / element handles directly and pointing to the variant.
Yes, I can create the interaction by dragging. But cannot do so via the dropdown. Glad I’m not alone 🙂
I having similar issues.
I building a button, if Conditional-X is true the button “Changes to” Variant-A, if else “Changes to” Variant-B.
When I got just one conditional with an if state, the “Change to” works, but when I add an else to make the button go to Variant-B the conditional breaks.
The same happens if I use two conditionals only with an if on each
Ex:(if X is true = A else = empy / if X is false = B else = empy).
Looks that ween I add more than one “Change to”, they start to conflicting with each other.
I’m having similar issues as well. Seems to be a bug, as mentioned in previous comments. Thanks for reporting the issue by the way! Will help plenty of people soon 🙂
I found a work around just now. Did a couple of tests to make sure I was right about it before posting it on here, but the bug is mainly seen whenever you are UPDATING the conditional flow added to your variant. If you remove the conditional flow, and add it again, you will be able to select a different variant in your “change to” dropdown.
As for the “else” portion of the conditional flow, there is no work around yet. Seems that when you add a “change to” in the else, your if condition “change to” will be updated to be the same variant selected in your else condition. Definitely a bug 🙂
Frustrating, wasting hours to understand where is the error and why it’s not working, only to discover it’s actually a bug.
@Terry_Burris nothing specific besides they are aware and they are investigating this problem. Here’s a piece of e’mail I received:
“It appears you have encountered a known issue with our conditional interactions that our engineers are currently investigating.
I’ll be keeping this ticket on hold as we investigate further and will let you know once we have any updates.
We apologize for the inconvenience and thank you for your patience as we work to resolve this.”
Wow, @Terry_Burris the workaround works for me as well, thank you so much! 🙌
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.
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!
Is this how you see it on your end?
Yeah @Terry_Burris I am having the same issue. So frustrating!
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.
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.
Hi @iammai thank you for reporting this to us, I have passed this along to our engineering team.
Thank you!
Definitely a bug. There are other related posts
I’ll attach a screenshot for clarity.
I’ve since discovered that the reason I couldn’t select a variant in my “Change To” dropdown was because I had placed the click action on an already interactive button component (even though there was no existing click action, but that’s another matter). Once I wrapped my button component in another frame and applied the action to that, I was able to set the Change To option. Like everyone else here, however, I’ve been unable to add an Else Change To action or even a second Conditional with a Change To action without it changing and breaking the first Change To action.
A workaround that I’m using until these conditionals get fixed is to create a separate, hardwired button for each of my “conditions” and tie each button to a boolean variable. Then I just need to set true/false for each button-variable on the navigation action that would otherwise set my conditions. I hope that makes sense and helps someone out.