Prototyping Hover generating bug when used inside nested components

There is a thing currently in the system that make prototyping with component useless.

(quite fun considering last version was to make that better)

Here is how to create the issue:

First, create a button component with a hover effect with variant component property :

Then create an array of button (like a menu) and make that a component.

Finally, develop your many components to also have variants like collapsed and expanded options for certain items.

if you try you will already see that if you made the mistake to only Hide the items in the expanded mode, figma it just will not work, you have to delete the item, you want to hide from thh variants.

Once done, here is what you will get :

_“While hovering” option typically does not work for those Figma do not seem able to detect when the mouse has left. so item gets into hover and stay like this. which overwrite other property for the prototype like if you could click on the item before.

__“mouse enter” “mouse leave” option will work but will also create a thing where for some reason it stop understanding the items in the array are not the same, so I got icons flying over from one button to another on the list as Figma try to populate property for when I expand the menu

1 Like

I want to add additional details. This error concern something with arrays in figma .

it seems that when an overwrite occurs form one screen to another it get kept some how.

My standard component is an array of button

once on the page it gets overwritten with a variant.

now in my prototype, my menu is an accordion.
it expand an collapses and here is example of other state of the menu.

because of this figma in the prototype get’s all confused.
and serve me this :

it moves to the correct page but it overwrites the menu in some sort of way that make the 5 item be consistent with the previous screen somehow.

now my mistake might be due to this.
my arrays has repetitive names

but this is still a very bad unexpected behavior.

is there a way to get help on this ?

Try renaming your instances to something like this: Menu item-1, Menu item-2, …, Menu item-n.

If that doesn’t help, could you share a link to an example file?

1 Like

Indeed this seems to be the solution, it fixed most of the issue. thanks a lot