Interactive components not working when nested inside a main component

This happened to me. The fix was to use the instance of the master that contains the nested interactive component.

Basically if this is done inside a master, and that master shows an interactive component’s instance, the instance refuses to react.

Not sure I do understand the fix. Can you elaborate more? Can you give an example?

@Marko_Kosovic I just went through something similar, I think I can help explain.

Interactive components seem to work as expected when they are within an instance of a component but not when they are within a main (master) component. So if your prototype includes instances of components instead of main components, they should work.

@Jayna_Moloney Thank you for clarifying. That goes without saying.
Playing prototypes doesn’t work without having regular frames, so you have to use instance any way.

But seems like it doesn’t work in some specific pages in the way you described either…
And I was experiencing the same issue with library import.

When I create a new file, it does work!
But as mentioned before by @Constantine_Zuev , it’s buggy and unpredictable.
Even if you turn on/off “Enable interactive components” some pages have the same bug.

I have come across a similar issue. I have made an interactive dropdown. It works fine when it’s not a component, but as soon as I make it in to a component, and then make an instance of that component, the interactive behaviour causes the Figma prototype to crash.

As a tip for anyone else reading here, I have managed to work around it for now by making the master component have a non-interactive variant of the interactive component in it, then switching to the interactive variant in the instance. But this is not ideal!

Try moving your components and screens to new page. This worked for me.

Exactly the answer I needed! Thanks, it worked!

Same issue for me, giving me “nested instance is swapped with its parent instance” error when playing the prototype, if they aren’t parent/child then prototyping between them specifically - change “on tap”/“on click” does work, but if they are connected it does not. I wish there was a fix for this. I don’t want to have to change every button variant individually, I like them linked so when I make mass changes it changes everywhere cause I auto-layout all of my designs. Frustrating. Moving to another page did not help.

This is a separate issue, if you pasted it from another file, try checking if they have nested variants other then original. As described here:

Parent component - the original component you made - the very first one, before you copied it and created a component out of that it (the child component).

When you inspect the layers you will see the single blue diamond outline icon inside a component (4 mini diamond in diamond shape) you made, meaning you did not detach the instance. The new component you made has the parent inside of it (since it’s copy of a parents that has been turned into component without detaching instance).

So what you want to do is keep the parent (the original component) on it’s own, do not combine it as a variant. Instead copy it as many versions as you need to make - make modifications and turn them each into a component and then combine “the child” components. You can not combine parent with child (parent inside child), so all variants need to be children, combine child (parent inside) with child (parents inside). Does that make sense? Take a look at the link in this file at the layers construction (one is the issue and the other is the solution): Figma