Skip to main content
Jairo
May 19, 2021

Interactive components not working when nested inside a main component

  • May 19, 2021
  • 79 replies
  • 26999 views

Hello, I found out that if i create an interactive component (ex: Button), and place it inside a a main component (obsiously as an instance), the interactions are no longer working.
But if you create an instance of the parent component, then it all works as expected.

79 replies

Kevin_Allauca
August 29, 2022

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

Jon_Cook
September 2, 2022

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.

Dawid_Prazak
New Member
September 6, 2022

facing same issue.

CHRIS_DAVIES
September 9, 2022

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…

Adrian19
September 30, 2022

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.

Rob_Corradi
October 10, 2022

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.

Lauren_Golembiewski
October 18, 2022

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!

Sayo_Bittencourt
October 24, 2022

Absolutely not fixed @Figma_Support

Eren_Gazioglu
November 10, 2022

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.

tben
New Member
November 17, 2022

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.