Skip to main content

Hey all! I’m working on getting an interactive prototype working correctly.


It’s a side-nav for a dashboard. When you hover over the closed version, the nav expands to show the names of the sections. When I initially hover, it looks and works perfectly. Then when I mouse out, and mouse back in, the text is gone. I know I’m just doing something silly but can’t figure out what’s wrong.


VEED

Also, here’s a screenshot of my components. I made the sections a component with hovering variant when you mouse over. The nav has open and closed variants, they change to each other when you mouse in and mouse out. Screenshot 2022 09 20 115021 — Postimages


I just tested that when I hover over a section, but not the others, only that section I hovered over turns invisible on a second opening of the nav. Somehow the act of hovering is making it not show up when I leave the nav and re-enter it. I tried changing the individual section component from hover>change to>variant, and instead changing the interactivity to “mouse enter>change to>variant 2” and “mouse leave>change to>variant 1” but no luck.


Any help is appreciated!

Could you share a link to an example file?

Sorry, I don’t think I am allowed to. This is for work and I don’t think I have the proper permissions or authority to share the work atm.


If there are any other questions I’d be happy to answer them, or provide more screenshots of particular settings.

It’s very difficult to guess what could have caused this. I can only suggest that you look at other working examples and check with your structure and settings. For example:

Figma – 28 Nov 21

But it would be great if you could create a draft independent of your file (a similar example that has nothing extra and doesn’t violate the NDA) so that anyone can look at and help you deal with this problem.

You’re right, I copied over some elements to a draft. Your link is perfect, it’s doing exactly what I want mine to do and I honestly can’t tell what it’s doing different than me–it looks like it’s set up identically.


Here’s my file: https://www.figma.com/file/VcUhtTPqT5o7zbFxHdAao4/testing-navigation-bug?node-id=0%3A1

I’ve edited your file and it works as expected.

And from your example, you can get into the library file.

Woaah, you’re a genius! Thank you so much, that is such a help.


Would you mind explaining what you changed and what settings I had wrong so I know how to be mindful of this in the future? I’d love to know how you fixed it so I can be better at this sort of build in the future.



  1. Component set “XSection (closed)”.

    Removed because instances of this component were not used in the example.




  2. Component set “XSection (open)”.

    Renamed to “XSection”.

    Duplicated the variants and changed them (hid the label layers, resized).

    Added an additional property “Opened=True/False”.




  3. Component set “XNav”.

    Selected all instances of the “XSection” component and reset almost all overrides.

    Changed the “Opened” property from “True” to “False” for “XSection” instances in the “Closed” variant of the “XNav” component set.



Such a help, thanks for the assistance and explanation. Still trying to understand the complexity of component properties when it comes to interactions.

Terms & ConditionsCookie settings