I’m running into a weird issue with interactive components in Figma and I’m not sure if this is a bug or just a limitation of how hover states work.
I have a menu button component with 3 variants:
- Default
- Hovered
- Expanded
Interactions:
- Default → Mouse enter → Hovered
- Hovered → Mouse leave → Default
- Hovered → On click → Expanded
- Expanded → On click → Default
The Expanded variant contains a dropdown slot with submenu buttons.
Problem:
When I click the button, the Expanded state appears for a split second and immediately switches back to Hovered. Then, when I move the cursor away, Expanded appears again and gets “stuck”.
It feels like the hover interaction is overriding the clicked state, even though I’m not using “While hovering” anymore.
Things I already checked:
- No hidden interactions on variants
- No Smart Animate (using Instant)
- Expanded variant does not have a larger bounding box
- Dropdown is placed in a slot below the button
- No nested interactive components with conflicting triggers
Has anyone experienced this before? Is there a reliable pattern for building expandable navigation/dropdown menus with interactive components in Figma?
It starts to drive me nuts, Adobe XD never had so much problems with prototyping as figma has