How to Create Hover State Prototype in Figma

To create a hover state prototype in Figma, use Interactive Components by designing the default and hover states as component variants, then add an While Hovering interaction between them. This lets you preview hover effects directly in prototype mode without extra frames.

Syntax

In Figma, hover states are created using Interactive Components. The syntax involves:

• Component Variants: Different visual states like default and hover.
• Interaction: Set to While Hovering to switch between variants.
• Animation: Choose Smart Animate or Instant for smooth transitions.

text

1. Create a component with two variants: Default and Hover.
2. Select the Default variant.
3. Add an interaction:
   - Trigger: While Hovering
   - Action: Change to Hover variant
   - Animation: Smart Animate or Instant

Example

This example shows how to create a button with a hover color change using interactive components.

text

1. Draw a rectangle and add text "Button".
2. Select both and create a component (Ctrl+Alt+K).
3. Add a variant to this component (click '+' in Variants panel).
4. In the second variant, change the rectangle fill color to a lighter shade.
5. Select the first variant, click the Prototype tab.
6. Add an interaction:
   - Trigger: While Hovering
   - Action: Change to variant 2
   - Animation: Smart Animate
7. Preview the prototype and hover over the button to see the color change.

Output

When you hover over the button in prototype mode, the button's color smoothly changes to the lighter shade, simulating a hover effect.

Common Pitfalls

• Not using component variants: Hover states require variants inside a single component.
• Using On Click instead of While Hovering: This won't create a hover effect.
• Forgetting to set animation to Smart Animate for smooth transitions.
• Not previewing in prototype mode: Hover states only work in prototype preview, not in design view.

text

Wrong:
- Interaction trigger set to "On Click" instead of "While Hovering".

Right:
- Interaction trigger set to "While Hovering" with component variants.

Quick Reference

Step	Action	Details
1	Create Component	Select elements and create a component
2	Add Variant	Add a second variant for hover state
3	Design Hover State	Change styles in the hover variant
4	Add Interaction	Set trigger to While Hovering
5	Set Animation	Choose Smart Animate or Instant
6	Preview	Test hover effect in prototype mode

Key Takeaways

Use component variants to define default and hover states.

Set interaction trigger to While Hovering for hover effects.

Apply Smart Animate for smooth visual transitions.

Hover states only work in prototype preview mode.

Avoid using On Click trigger for hover interactions.