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.
Added this to the other post, adding here as well in case it helps:
Not sure if this is a solution for you, but Figma sent me a workaround recently via email that didn’t work, so I had to implement the following workaround:
The following is my update, I’m unsuccessful with the workaround on child components, no matter where I create the change to, I can never create two that don’t mimic each other.
My fix was the following:
I made a copy of my main component (instead of working with a child component).
Since the main component you see the variant with the arrows going to and from in prototype design, I simply set the variable of interest the value I wanted depending on whether or not the variant was visible.
The con of course, is that I will have to make a copy of the main component and do step #2 every time I have a particular variable I’m trying to flip on and off, so basically my assets will have all these one offs instead of 1 asset I can keep reusing and modifying with a conditional statement.
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 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
Has there been any updates since you reported it @Ilona_Czerwinska?
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
@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.”
