I’ve set up a navigation component that I use as an exposed left-nav in my laptop & desktop screen size prototypes, but use as a hidden nav drawer in my other mobile prototypes. When I open it (as a dropdown), the hover states activate as my mouse moves over them (which isn’t appropriate considering the cursor appearance is that of a ghost finger, and a ghost finger currently doesn’t trigger hovers when moving above but not on the screen).
Prototype Fix Proposal: For Touch-first devices (iPhone, Android Phone, Tablet), have a setting of whether the frame and/or all frames are a touch-first device. Frames that start as iPhone/Android phone should have this enabled by default no matter how much the user updates the width & height of the frame. Touch-first devices will automatically remove or hide any nested hover interactions applied from the original interactive component.
Is there ever a use case on a touch-first device where a hover state is desired and shouldn’t be automatically disabled or removed?
If so, an alternate approach would be to allow/disable hover states across any frame in a selection through a right click while in prototype mode or by pressing ⌘+/ and typing Remove Nested Hover Interactions.
Disabling/removing these interactions on these types of devices should also speed up the prototype because there’s less states for the application to be listening for during viewing/interaction.