Note: Initially, I posted this as a question within “Ask the Community” category here: Element visibility issue with nested component instances | Figma Forum. However, now I’m pretty sure what I experienced is a bug. I rewrote the problems below.
---
I have a component named "Popover Item". On that component I applied a hovered interaction. The layer structures in the component variants are already the same. After that, I inserted the instance of that component into another component named "Popover". Then, I inserted the instance of the Popover component into a "Navigation" component.
The prototype runs normally and as expected when I use the instance of the Navigation component on the "Homepage" page. The hovered interaction also works as I imagined. Even when I convert the Homepage page into a component, the interaction from Navigation still runs normally.
The problem arises when I create a prototype from the instance of that Homepage component. What's strange is that the icon on the Popover Item instance that I had already overridden to be hidden in the Navigation component, suddenly appears after being hovered. I have checked and I think this is not a layer structure problem. However, of course I can be wrong and miss something.
The reason I think this is a bug is that the other elements, like text and badge, keep their overrides. The texts use the overridden content and the badges remain hidden.
I'm including a video for better clarity, check it here: https://drive.google.com/file/d/1QGE375G_nrHPU5JD6ogJj1_9DuGxWM54/view?usp=sharing
And this is a link to my file: https://www.figma.com/design/yYBOqrqAJroMYvybtwpdnu/-UI-UX--Cahayu-Website?node-id=7206-12936
Thank you for everyone who can help me solving this issue.
Question
Issue with element visibility in nested instances
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
