How to create hover and press interactions in Figma
Introduction
Users expect feedback when they interact with a UI. Buttons should darken on hover and press down on click. In Figma, you don't need dozens of duplicate frames to show this; you can build it directly into the component.
This guide shows you how to use Interactive Components to create self-contained micro-interactions.
Prerequisites
- •A component set with variants (Default, Hover, Pressed)
Guide Steps
Enter Prototype mode for components
You can prototype inside the component set itself. Select the 'Default' variant.
Create the hover interaction
Drag a connection line from the 'Default' variant to the 'Hover' variant. Set the trigger to 'While hovering'. Set the animation to 'Smart Animate' (fast, ~100ms) or 'Instant'.
Create the press interaction
Drag a connection from the 'Hover' variant to the 'Pressed' variant. Set the trigger to 'While pressing'. This ensures the button reacts when the mouse is clicked down.
Test with an instance
Place an instance of the component on a regular frame. Play the prototype. You interact with that single button without needing to link between entire page frames.
Common Mistakes to Avoid
- ×Using 'Mouse enter' instead of 'While hovering' (Mouse enter is a one-way trigger).
- ×Forgetting to change the button style significantly enough to be noticeable.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.