States: Default, Hover, Pressed, Selected

Interactive Components Questions
1

I’m building an interactive component and have defined 4 variants: default, hovered, pressed, and selected. However, I’m unable to properly switch between them to create a truly interactive component.

Example:

I hover on default and it changes to hovered.
I press on hovered and it changes to pressed
However when I release pressed I’m not sure how to change to selected. Tried having onClick from hovered to no avail, there’s no onRelease state.

Additionally noticing this is a problem when a component with a default and selected state share a hover state - how does the system know which is on or off to switch to when hovered?

2

Hi! You can see my file in Figma Community:

You can simulate the selected state by the “Mouse Up” trigger.

3

Nice, and wow I’m dumb I totally missed mouseUp lol.

Only issue I have now is how to go backwards.

default to hovered to pressed to selected and then in reverse so I can make a selected component go back to default

4

Hah, serendipity - here’s something I prepared yesterday :slight_smile: (sorry, haven’t made it digital as yet)

image
image1439×1079 241 KB

PS Not sure if the mouse leave events are actually necessary, Figma may remove the mouse down if you move outside the component anyway. Again haven’t built this yet :slight_smile:

3 Likes
5

haha was hoping it wouldn’t have to come to that but I think this is the correct approach - thanks

6

Have a look here, secondary button (a bit messy but should still make sense): Figma

My diagram, but with a few learnings:

  • mouse up from pressed needs to go to selected+hover rather than selected, otherwise you get a little flash of selected and then the the hover kicks in (same thing applies from selected+pressed to default, should instead go to hover)
  • if you hold down the mouse button and then move off the component, it stays stuck in the pressed state, with or without the mouse leave also present. Minor “bug”? I’m not sure. Resets as soon as you hover again anyway.