Interactive components not working when nested inside a main component

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

Thank you for this detailed reply!

Thanks, Kevin, this workaround works.

Hey @Anastasia_Stallcop, thanks for your comment. It looks like it is the right way to go. In my case, however, the combined components (variants) never worked on the page I have the components. What I had to do was to duplicate the design page where I had the issue and then it worked. I am happy I found a way to fix the issue but the fact that I dont understand why it doest not work really annoys me
.

It is been a while since i started this topic, and at this moment my workflow switched around this problem.

Main thing i understood is that there is no much reason to use main components in your production pages.

In my average wroflow. i created components nested with other components as needed, and then store them in pages following the Atomic Design theory.

Then i grab instances of whatever i need and use them in the layout pages (where i put all the pieces of the screen toghether)

That way i make sure everything is an instance (so main components are safe), and also that everything is interactive.

It also helps into some popular interaction bugs, but that is for another topic.

But to put a solution on this topic: “For some reason, no, Interactive instances does not work inside a main component. They work when the main component is an instance as well. Try figuring out another workflow, that not requires main components to be inside production pages. (which in my oipinion is also a bit dangerous)”

This issue has not been solved. I created an auto layout that expands out. This works fine on its own and also when I turn it into a component. As soon as I create an instance of that component, the interaction of the expanding auto layout DOES NOT WORK. This bug has been around for a really long time apparently and it’s still not fixed??

this is really annoying. please fix.

example file?

https://file.io/6Nk9xO5gjn5o

sample file that shows the bug
open overlay doesnt work in variant2, when opened

other file host

The solution doesn’t work for me. I’m still having this problem when trying to apply interactions to nested instances? My product card is an instance of a component with 8 variants and instances of components inside it, like buttons etc.

I can’t set the “change to” interaction on those buttons unless I detach them inside the card component - you can see in the GIF it won’t accept any changes to the properties, it just instantly reverts back to its original state

I’m having similar yet different issues. In any case, all are caused by nesting interactive components.
How come there’s no official answer or solution to this? It’s incredibly frustrating to work for hours on something only to find out that it’ll never work due to bugs. It’s also annoying that this forum tells me that this issue is resolved when it’s not…

@Figma_Support This issue isn’t resolved

Same issue! This topic is NOT solved

I’m having this same issue.

I have the same problem. So I tried something.
My case: a nav bar, with links to sections, each section icon is highlighted. Creating a variant for the nav bar breaks and linked interactions, within the component.
Instead of clicking the + button, I did a duplicate.
That duplicate becomes a variant and preserves linked interactions.

It still needs fixing please Figma.

Adding to the growing list of people experiencing this issue.

Same issue here.

Same issue, not beign able to prototype correctly in nested components

Same issue, just happened today. Please fix!!

same issue