Change To option not working

Same issue happening to me. It only works if you wrap the nested component in a new frame/group. Shocking that this bug hasn’t been fixed yet :sweat:

1 Like

Same problem here.

@Figma This issue still persists. Does this get addressed?

same issue :pensive:

Same. Wow, I’ve been yelling at the screen for an hour trying to figure this out. Thank you!

I’ve just made a screen recording of my issue which appears the same as what everyone else here is reporting. I don’t see any response from FIGMA for a fix? In the video I’ve shown the attempted work arounds to make it work… funny how in my case the state variant is shown but not the boolean options???

(https://drive.google.com/file/d/1wMwPi6XhY4oEInjM4lq9ryDwh0HyBERv/view?usp=sharing)

Lets attach that URL link properly eh?? :slight_smile:

Video of the issue

Found my fix ::

OK… so I did a terrible recording of me pulling things apart in my situation, and the issue with the change to for me was trying to get it to work nested in component that had a variant itself… so lesson for me, if you want to use ‘change to’ have it in a simple component!!!

Working out what was going on…

1 Like

I’m experiencing the same issue… I’ve tried some workaround but none of it is working as I want. Any update from Figma please?

same problem here, what was your workaround?

Hey @Gus1 , the fix is not to nest your component in another… after posting my fix, somewhere in this thread I realised that this thread is closed with the solution at the very top…

So the work around was to flatten the nested components and then the variant can be referenced

1 Like

I see, I didn’t wanted to flatten the component, so I ended up creating more nested components on top of the original. it kind of worked but only for a presentation of the concept, it’s not useful for user testing.

my case is also a table, so I have:

  1. A checkbox that changes from checked to unchecked on click
  2. A hover interaction to show a tooltip with the checkbox nested inside the
  3. a cell the row of the table that holds this .

when I hover I can see the tooltip, when I click exactly inside the checkbox I can change to Checked, but it doesn’t change the row state to checked, only if I click on the small empty space that is part of the and it’s not I can trigger the change on the row.

So on the prototype while presenting I have check the checkbox and click again to change the whole row state really fast and nobody notices. hahah

terrible hack but I got to keep all the nested components. :frowning:

Yeah @Gus1 , I felt I was trying to get too ‘big brained’ on it… I finally got it working but it was so flakey… content changing on hover when those triggers shouldn’t even touch the variables… so I’ve reverted to multi screen prototype… not as elegant but very reliable!!!

The issue still persists even for straightforward scenarios. I suspect it has something to do with nested components.

I have found a workaround. If you struggle to add onClick/changeTo on an existing component wrap it into another frame (e.g. auto-layout). It solved it for me.


I wasn’t able to set it for _Tab button base. But when I wrapped it start working.

Same issue, this issue has not been solved

Im having the same issue. i select the change option and nothing happens

Some “on click - change to” actually work, some of them not. Figma, when is this going to be solved?

I have learned that depending on the other interactions (eg Set Variable) + ChangeTo , changeTo needs to be dragged down to be the last interaction in the list