Interactive components not working when nested inside a main component

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.

This GIF shows the issue in real time. The nested component interactions are still present, but are hidden/disabled when nested inside a parent component. Detaching the instance of the parent shows that the interactions are still there.

This has to be a bug, right?

Hey All, thank you for your feedback! 

To be transparent, I flagged this to our team and they confirmed that this is expected behavior. We don’t support interactive components inside of main components that are directly integrated into frames. 

The team is now aware of this feature request and will continue to monitor it for future consideration.

Please use the temporary solutions as suggested by the community within in this topic to initially troubleshoot your specific issue, but if you’d like additional help, please feel free to reach out to our support team directly here: Submit a ticket

For those of you struggling to understand the workarounds like I was... 

The simplest solution I found was to wrap the nested components that have the interactions in another frame.

 

Something else I just discovered for anyone not wanting to read 4 pages of valid complaints…

You can override some of the weirdness that seems to be present when it uses hidden interactions you specifically have removed from instances, you can set the interaction to just be None for that same interaction type.
 

This seemed to stop it from executing the child interaction every other click.

EDIT: Just kidding this worked randomly for a little but now it still just steps through each interaction on the child even though I removed it from the instance.