Hi all.
I’m fairly new to Figma and have loved it up until the last couple of days.
I am trying to get my head around variants. I have several components with variants in my design. Most work. But some of my buttons are not protoyping correctly. (hover, click, loading). The weird thing is that when I make an instance of my button component and just place it in a new empty frame it works perfectly. But when I place it into one of my page designs it does nothing.
I even asked someone I consider having advanced Figma skills to take a look at my file. And they couldn’t figure out the issue either. They thought it had to do with another component conflicting with it? I’ve tried removing everything on the page and adding back everything one item at a time. The button works fine until I add in either my main navigation header component or the footer component. All bets are off after that. Buttons simply don’t work. Connecting buttons to their rightful page also does not work.
So bummed. Hours and hours wasted trying to figure this out. Unbillable hours. 
I’ve finally decided to just move ahead and finish the project without working buttons. I’ll just have to talk through their interactions with the developer.
Has anyone else experienced this? Could it a bug related to the new release? Or did I do something dumb?
Many thanks in advance for any help!
Could you share this part of the file so that anyone can study in more detail?
I’m sorry, I’m not quite sure how to go about that? Mine is a free plan.
Duplicate your original file, remove everything else from this duplicate (leave only those elements that cause a problem), then share a link to this file.
Don’t forget to check the file’s permissions (should be: “Anyone with the link” › “Can view”).
Thanks for the links.
If I understand correctly, you mean the “Contact +” button.
So I looked at your file and noticed that you use the “Mouse leave” trigger on almost all menu items (both header and footer) and on the left arrow (Large_CarrotLeft layer). That is, when the prototype is played, the “Mouse leave” trigger with the “Close overlay” action immediately fires, and it does this all the time. Most likely this blocks other interactions.
Remove this interaction from the above elements and play the prototype.
Thanks for getting back to me tank666!
I don’t quite follow. Am I simply removing all interactions of “mouse leave” ? Or does “mouse enter” need to go as well? I’ve tried replacing “enter” with “hover” but it doesn’t work right. When you go to click the sub menu, the whole thing disappears.
Is there a preferred way to set prototyping for this menu design?
Dang, I feel so dumb!!
All that was needed was to remove the “Mouse leave” interactions from the menu items in the header and footer (in all menu items or almost all), as well as from the left arrow on the slider.
Just try reverting everything back (to the version of the file I saw yesterday), and remove those interactions on the duplicate page of the file (use it as a testbed).
Once you remove these interactions from the elements I mentioned above, your prototype should work as expected.
I see that you have developed a prototype using overlays as a way to change the states of some elements. But I would build this prototype using interactive components. So faster and less garbage in the file. And I would use interactions with the opening of overlays only for modal windows.
I FINALLY figured it out! Basically I completely reset all of my protoype actions to use hover state and eliminated all “mouse leave” connections. Now all of the buttons and navigation dropdowns work.
What a huge mess I had going. With ZERO way of knowing it! Thanks to you @tank666, I eventually got things cleaned up enough to work.
I still don’t understand why mouse leave blows everything up.
I also wish I could make my hover states with drop downs collapse back to their default state as a user navigates onward to other navigation titles. (they just stay dropped down even after you move over to another item). I know no other way to do that other than “mouse leave”.
Here’s a link to the repaired page.
You used this trigger in the wrong place. If used correctly, your prototype would work as expected.
That’s right, use the “Mouse leave” trigger for the “Dropdown” variant. That is, Mouse leaves the Dropdown variant › Change to the Default variant.
