Skip to main content
Question

Switching states + seamless hover + suitability for all devices

  • May 4, 2026
  • 0 replies
  • 10 views

Марина

I'm relatively new to Figma, and I look for the best way to do this:

 

A button has states like checked/unchecked (an option in a filtering bar of a web shop or "add to favorites" button that changes from only stroke to a filled shape and back) and also has a hover effect that changes its shade, and when you switch its state (by clicking/pressing it), hover remains there until you move away the cursor, seamlessly, without that blink/flicker when it turns into the default version of new state and only then to a hovered one.

So the full cycle (of pressing it twice) is "1 → 1 hover → 2 hover → 2 → 2 hover → 1 hover → 1".

But it's on PCs/laptops. On phones/tablets, the hover is shown while you touch the button, and after removing your finger, it goes straight to a new state without hover.

Full cycle: "1 → 1 hover → 2 → 2 hover → 1".

 

I want it to take as few components as possible. I tried something, but "on click" and "mouse up" interactions (for the states) leading to different variants of a component conflicted and the pc/laptop version didn't work properly.