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
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
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.
@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.
I am currently experiencing this kind of problem where in changing the component variant the instance that it was changed into becomes not interactable despite the component prototype having one. I am asking if you managed to find a work around on this matter.
I absolutely agree with all of this. If Figma wasn’t required for so many jobs, I would never use it again. I do EVERYTHING I am supposed to do SO MANY times and it just. doesn’t. work. It is WAY too complicated, not intuitive at all, and the bane of my UI existence. Right now, I’m trying to get a prototype to change on click between variants in a component set. Set the interactions on the main component, no results. Set the interactions on the instance on the screen being “played,” no results. This is RIDICULOUS. Who the heck wants frames inside frame sets inside component sets with variants and who knows what else; it’s a HORRIBLE way to work and I can not BELIEVE this is a tool meant for designing user experiences. Figma, please fix this nonsense. You’re getting a very bad reputation for being unusable, but more than that, adding piles of frustration to people’s lives.
Simple on click button state change doesn’t work in latest Safari, but does work in Chrome. does anyone know if there is a way to fix this or can I only use ‘in browser’ Figma in Chrome browser to preview component button state changes - maybe I’m missing something?
