Chapter 5 › Lesson 23

23. Prototype: While Hovering and While Pressing Interactions

Skills: Component variants for Default, Hover, Pressed; While hovering → Change to Hover variant; While pressing → Change to Pressed variant; Test in prototype with mouse

Figma's prototyping supports hover and press triggers. When a user hovers over a button, it changes to a Hover variant. When they press down, it changes to a Pressed variant. This creates tactile, responsive UI.

23. Prototype: While Hovering and While Pressing Interactions
Figure: A button with three variants: Default (#1a56db), While Hovering (#1e6fe8), and While Pressing (#154ba1).

Step-by-step

  1. Create a button component with 3 variants: "Default", "Hover", "Pressed"
  2. Default: normal brand colour (#1a56db). Hover: slightly lighter (#1e6fe8). Pressed: darker (#154ba1)
  3. Add a subtle scale change if you want: Pressed variant could be 0.96 scale to simulate a press
  4. Switch to Prototype mode
  5. Select the Default variant of the button component (this auto-selects all instances)
  6. In the Interactions panel, click the + icon
  7. Set trigger to While hovering. Set action to Change to → Hover variant. Transition: Instant or 0ms
  8. Add another interaction: trigger: While pressing → Change to Pressed variant. Transition: Instant
  9. Add a third interaction (for mouse leave): trigger: Mouse leave → Change to Default variant
  10. Test by pressing Present and hovering / clicking the button

Pro tip

While hovering and While pressing are prototype-level interactions, not component properties. Set them on the component itself in Prototype mode — they apply to all instances automatically.