Interaction to Change of component variants does not work. Tried three workarounds. Figma became unusable

First of all: What is going on with Figma? It has become absolute shit and not usable. There are just tons of bugs and nothing gets fixed. Weren’t you guys acquired by Adobe?? The mobile app always crashes as soon as my phone falls asleep. Variables aren’t working as they should. Interactions don’t work. What the heck? This is a product you want people to pay for?

The current bug
I have a component with three buttons. One is “selected” or dark. I’m building an interaction where a user clicks on one button and then this button is turning dark and the other one bright again. So I created a component with three variants, one for each selected button.

Now I try to add a “change to” interaction on the buttons. The idea is: When a user clicks on Button 2, the component changes to “Active=Button2”. The problem: The selected variant in the interaction is not saved. So it always stays at “change to: None”. This has been reported already here: Trying to use Change To, but can't select a component variant - #5 by Aygyun_Gyul

Screenshot 2023-12-04 at 17.59.44

So I tried the workaround mentioned in the other thread: Drag a line from the button to the component first. This works, but only for the first interaction. Once the variant has changed after the first click, all other interactions are gone. What the heck?

Alright, let’s try this: I create a string variable for the variant. I use this variable to set the variant when I use the component in the design. When the user clicks on one of the buttons, I set the variable to eg “Button2”. This also does not work. In the prototype the button is clickable, but nothing happens. When I change the variable manually, the design updates :roll_eyes:

Ok, next try: The buttons itself are components. So the main component consists of instances of button components. Maybe this is an issue. And it turns out it was. Nested components seem to break interactions. As soon as I detached the buttons in the component from the button component, the solution with the variables worked.

But wow. Figma, get your shit together. This is embarassing. I’m using the software since two months and I have already reported 3 confirmed and 2 unconfirmed bugs.

Hi @OleBerlin sorry to hear this is happening! I’ve tested this setup from my end and there is an issue the engineering team is aware of where if you are trying to create a interaction from a nested instance inside a component set its not set.

However I was able to set the “change to” interactions when manually dragging out a connection between each component set as a workaround. I would suggest making sure you do not have extra interactions on the variants to ensure the connections are set. You can also try connecting the text layer itself between variants to see if that helps.

If you are still seeing issues, please reach out to the support team directly via this form for help: https://help.figma.com/hc/en-us/requests/new

1 Like

@Ryan_52 Thank you for your fast reply. I tried the workaround. The first interaction works. But as soon as the component variant was changed, the other interactions are not available anymore (they are not clickable and not marked as hotspots). The base button components don’t have any interactions on them.