While Hovering/Pressing
Create hover states and button press interactions that revert when the user stops interacting.
Prototyping
No shortcutIntermediate7 min readQuick Reference
While Hovering/Pressing
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Intermediate⏱ 30–60 minutes to master
Key Settings
Hover:Press:Return:
While Hovering/Pressing triggers let you create interactions that activate while the user hovers or presses, and revert when they stop. They are perfect for button hover effects and micro-interactions.
Where to Find It
In the Prototype panel, set the trigger to 'While hovering' or 'While pressing'.
How to Use
- Hover: Set trigger to 'While hovering' and navigate to a hover variant of the component.
- Press: Set trigger to 'While pressing' and navigate to a pressed variant.
- Return: The interaction automatically reverses when the user moves the cursor away or releases.
Pro Tips
- Use interactive components with variants for seamless hover/press effects without separate screens.
- Combine with Smart Animate for smooth transitions between states.