Skip to main content
Figma August 2024 3 min read

How to create a button hover effect in Figma

Here's a simple how-to for creating a basic button hover using component sets and prototyping with Smart Animate. This is one of those things that takes 2 minutes once you know the steps, but can feel confusing the first time around.

Try it out

Here's the finished prototype. Hover over the button to see the effect in action.

How to build it

1. Create the default button state

Start with a simple button. A rectangle with rounded corners, a text label, and whatever fill color you want for the default state. Group these into a frame and name it something like "Button / Default".

2. Create the hover state

Duplicate the frame. Change the properties you want to animate on hover. This could be the fill color, a drop shadow, the border radius, the text weight, or even a slight scale change. Name this one "Button / Hover".

3. Turn them into a component set

Select both frames and go to the top menu bar. Click the dropdown arrow next to the component icon and choose "Create component set". Figma will wrap both states into a single purple-dashed frame. You'll see a property called "Property 1" with values "Default" and "Hover". Rename these if you want, but the defaults work fine.

4. Add the prototype interaction

Switch to the Prototype tab. Click on the "Default" variant. Drag the connection noodle to the "Hover" variant. In the interaction settings:

  1. Set the trigger to While hovering
  2. Set the action to Change to (it should auto-select the Hover variant)
  3. Set the animation to Smart Animate
  4. Set easing to Ease in and out and duration to something short, like 200ms

Tip: Smart Animate works by matching layer names between the two variants. If a layer has the same name in both states, Figma will animate the differences. Make sure your layer names match exactly between Default and Hover.

5. Test it

Place an instance of your component set on a frame. Hit the Play button to open the prototype. Hover over the button and you should see the transition.

Where to go from here

Once you have the basic hover working, you can extend it. Add a "Pressed" variant with a darker fill for click states. Add a "Disabled" variant with reduced opacity. The component set pattern scales to as many states as you need.

If you're building charts or data visualizations in Figma, check out Chart Mojo for a faster workflow.

Back to Blog