No Hotspot Hints on Components with States

[VelyanaYurukova]

Hi everyone!

Great work on the new features, love the hover effect! Still working with it to figure out how to use it in more complicated situations, but for icons and buttons it works well.

One major bummer though. Can't seem to use Hotspot Hints when sharing prototypes, that include components with states. No hints display on them, no matter that they have a tab action, connecting them to another artboard.

Am I missing something or it's a bug?

Thanks!

[VelyanaYurukova · Accepted solution]

Hello all! I figured it out.

You just have to add two actions to the Default State and one action to the Hover State.
Default State: 1 that triggers the Hover State and another that triggers a Tab Action.

Hover State: add 1 Tab Action to the Hover State as well, that will actually send you to another Artboard.

The first Tab Action will trigger the Hotspot Hint.

Done! 🙂

[AClapper183]

So, you MUST link the UI component to another artboard in order to see the interaction while sharing?

I have a bunch of hover states on an artboard and can only see them in my own preview mode / not sharing. BUT I don't necessarily need to link these to other artboards - does the system require that?

[VelyanaYurukova · Accepted solution]

Hello AClapper183,

Not sure if I understand your exact question, but I'll try to clarify. You can have components with hover states, add a hover interactions in prototype mode and NOT link them to artboards (in other words, not add any other interactions to them, besides the hover one) - it is OK like that and you'll see the hover interaction in both preview and share mode.

In my question I asked exclusively for Hotspot Hints in Share mode (the hint you can enable in sharing > view setting). If you have a "hover interaction" (trigger and destination: hovet state), it will work in both preview and sharing mode, BUT you wouldn't see a HOTSPOT HINT in sharing mode if the "tab interaction" is added only to the hover state.

To see a HOTSPOT HINT, you're gonna have to have a "tab interaction" to the default state (or the state, that is initially enabled in the artboard). And I also realized you don't need two "tab interactions" (linked to the same artboard), because the hover state inherits the tab from the default state, if there isn't a different one exclusively for the hover. If you have a "tab interaction" on the default state it is enough, the link will work on hover as well and the HOTSPOT HINT in sharing will show.

Hope that I haven't confused you more, than I've helped with this answer.  😄

[David Alcala - Adobe]

When Sharing a file with states for Design Review, make sure to set a Home artboard in Prototype mode.  That will enable hover states to work in the browser.

Hope this helps,

David