Skip to main content
Question

States: Default, Hover, Pressed, Selected

sqott

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?

5 replies

tank666
  • tank666
  • 4858 replies
  • March 2, 2021

Hi! You can see my file in Figma Community:

Figma

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

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
sqott
  • sqott
  • Author
  • 3 replies
  • March 2, 2021

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

Shane
  • Shane
  • 74 replies
  • March 2, 2021

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

image

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 🙂

Casey4
Jackson_Latka
ntfromchicago
3 people like this
  • Casey4
    Casey4
  • Jackson_Latka
    Jackson_Latka
  • ntfromchicago
    ntfromchicago
sqott
  • sqott
  • Author
  • 3 replies
  • March 2, 2021

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

Shane
  • Shane
  • 74 replies
  • March 3, 2021

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.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings