Interactive components not working when nested inside a main component

I used some interactive components and now all of a sudden the option from the sidebar is gone and i am not able to prototipe correctly

Having the same issue as others above with a navigation bar. Adding buttons with no fill on top of the nested component to change the other component’s variant states was an easy fix, but not ideal.

facing same issue.

I’ve got this too. Can’t select options in the ‘change to’ menu, which is plain baffling and I’ve wasted the past hour trying to fix…

Having an issue that may be related. It seems like making complex swappable interactive components with autolayout leads to problems. The prototypes don’t match the how the components look in the frame.

Yup, just run into this myself, definitely not solved.

It’s annoying to put so much time into combining instances / adding variants / building interactions between them, to only find out later none of that works when needed.

Please fix.

I had the same issue, but it was fixed after I discovered two variants with the same name (I forgot to update the new variant name), and that fixed the issue when clicking the variants in the interaction pane wouldn’t actually update the variant. Check your variant names!

Absolutely not fixed @Figma_Support

Thank you for the fantastic answer! Honestly didn’t even actually read at first— your Figma solution link is so clear and self-explanatory that it made me instantly realize how to solve this.

Yes, giving my thumbs up for this post. 🥲

Nesting interactive components is still broken and mess up the prototype when used that way.

As I found, the only solution to get it working is to restrain from using by removing the interactions from the nested component and instead create additional variants for the parent component.

Depending on your number of nested components, their variants and resulting count of combinations, it is simply not reasonable to recreate them as single parent variants.

So currently, this takes away a big chunk of the Figma prototyping capabilities.

Oh, so I am not the only one and Figma keeps not debugging basic things : /
Just tried to put a checkbox within a list component… unfortunately, results in an error.
“Cannot read properties of null (‘fileUpdateRequired’)” - of course the design system file is updated and published and the design file is updated… OMFG…

I’m having the same issue.

I have a dropdown overlay which works on its own, but when nested into another component, fails to work.

What’s the workaround?

Actually I fixed the problem.
The issue is that I had the overlay on a literally separate page. So this meant that I could see the overlay in the dropdown menu on one figma page, but not when I used a component instance in another page.

This may be helpful to know, you guys should put some sort of warning somewhere, because I lost a few hours of my life trying to figure out wtf was going on 😂✌️

Users should know that this is an issue somehow within Figma, like a warning.

Hopefully this doesn’t happen to other users.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Nesting interactions still do not work. I have a nested component in a component. If I create an instance of the main component (with the other component nested inside) the change interaction of the inner component lets me only select variants of the main component, not variants of the component I attach the interaction to).

I faced the same issue today. Any plans to address that?

Often this is an issue of the composition of the component itself.

If you mind to share the faulty components we can check 🙂

i have the same problem, my components didnt work on nested instances

Been trying to figure this one out for a long time- I thought it had to do with how my nested components were named or something, but the only thing that fixes it is detaching the parent instance and then the nested instance works as expected…

This seriously needs to be resolved before any additional features or enhancements.

I detached instance and it solved the problem for me

It is nearly 2025 and this is still an issue.

We have FigPals (which I love) but we still have this same issue.

I have a dropdown component and an overlay menu component. When the dropdown component is clicked, it shows the overlay menu component. I added these to a toolbar component that is then nested inside a page component.

The interaction doesn’t work if any of these components are on different Figma pages. That is obviously a problem since design systems are typically organized into separate pages. I don’t want to detach instances because we lose the benefit of cascading updates.

ChatGPT says that the lack of inherited interactions is by design:

Components are encapsulated — child components can’t inherit or override parent interactions unless explicitly configured. If you want the child to respond, add the interaction directly inside the child component definition, not in the parent.

Unfortunately, to make interactions work in prototypes, all relevant components and frames must be placed on the same Figma page, especially the frame you're using as the prototype starting point.

I would like to see Figma change this so that interactions like dropdowns with overlays and button state interactions would be inherited. For now, it’s required to keep all elements that use interactions on the same page, and add interactions only on the final instance.