On this page
Quick steps
Build the button as a component
Select the button and create a component. Add a variant so you have two: Default and Hover. Change the fill, shadow or text colour on the Hover variant.
Open the Prototype tab
Press Shift+E to switch from Design to Prototype, then select the component set.
Connect Default to Hover
Hover the Default variant, drag the + handle onto the Hover variant, and release.
Set While hovering and Change to
In the interaction panel choose While hovering as the trigger and Change to as the action. Change to only appears between variants of the same component set.
Pick the animation
Set the animation to Smart animate. Figma's own button tutorial uses Ease in and out at 150 ms.
Place instances and preview
Drop instances of the button into your screens and press Shift+Space to preview. Move the cursor over the button to see the hover state.
How to create hover in Figma with interactive components
Hover effects in Figma are interactive components. You wire the interaction once, on the variants inside the component set, and every instance inherits it. You don't have to connect each button on each screen. Figma's help centre builds exactly this in its interactive button tutorial, and the steps above follow it.
Smart animate tweens the differences between the two variants, so the fill fades and the shadow grows instead of snapping. It matches layers by name, so keep the layer names identical in both variants. The Smart animate guide lists what it can and can't animate.
Why is my Figma hover not working?
Figma documents one cause directly: "When both interactions use the same trigger, Figma will use the prototype interaction and ignore the variant interaction." If an instance of the button has its own While hovering interaction on a screen, the variant's hover is skipped. Remove the interaction on the instance, or give it a different trigger such as On click.
- Change to isn't available. The two states are separate components, not variants of one component set. Combine them first. See component variants in Figma.
- Layer names differ between variants. Smart animate matches layers by name and position in the hierarchy, so renamed layers won't tween between states.
- The font changes on hover. Changing variants can swap a custom font to Inter. Check that both variants use the same font and that it's available.
Why does the hover state stick?
While hovering should revert the moment the cursor leaves the layer. A forum thread titled "Hover state doesn't reset" has about 9.8k views, so plenty of people see it stick. Check that you used While hovering and not Mouse enter. Mouse enter and Mouse leave are separate triggers that fire once, on the first entry or exit (a change Figma made on November 16, 2023), and Figma documents only While hovering and While pressing as reverting on their own.
If you built hover with Mouse enter, add a matching Mouse leave interaction that changes back to Default, or switch to While hovering, which needs only one connection.
Can I change the cursor to a pointer on hover?
Not with any documented setting. "Cursor pointer on hover" is one of the most-viewed prototyping threads on the Figma forum (around 28.6k views), and help.figma.com has no native option for it. The closest built-in option is "Show hints on click" in the prototype options, which points viewers to clickable areas.
Once a button has Size, State and Icon properties, checking that every combination has a working hover gets tedious. Instancer, our plugin, reads a component set's properties and lays out every combination as live instances in a labeled grid, so you can spot the missing Hover variant or the broken one before you wire the prototype.
For the rest of the prototyping basics, see how to prototype in Figma. If other interactions fail too, go through Figma prototype not working.
Ranked listThe best Figma plugins for prototyping in 2026Frequently asked questions
How do I make a hover state in Figma?
Make Default and Hover variants in one component set. In the Prototype tab, connect Default to Hover with While hovering, Change to and Smart animate. Every instance then shows the hover in the prototype.
Why is While hovering not working in Figma?
Most often the instance has its own prototype interaction with the same trigger, and Figma uses that one and ignores the variant interaction. Remove it or change its trigger. Also check the states are variants of one component set, or Change to won't be available.
Do I need to connect the hover state back to default?
No. While hovering reverts automatically when the cursor leaves. You only need a return connection if you used Mouse enter; pair it with Mouse leave.
Can Figma change the cursor to a pointer on hover?
There's no documented setting for it on help.figma.com. It's a long-running request on the Figma forum.
More in Prototyping
- How to Make Flow Arrows in FigmaFigma Design has no connector tool, but you can still draw flow arrows that stick to frames. The native options, the FigJam copy trick, and plugins, explained.
- Why Is "Fixed" Greyed Out in My Figma Prototype?Fixed (stay in place) is disabled when the layer sits in an auto layout frame. Turn on Ignore auto layout or remove auto layout, then set the layer to Fixed.
- Figma Prototype Not Working? Why It Happens and How to Fix ItMost broken Figma prototypes come down to structure: designs outside frames, frames with no connections, nested targets. Fix On click, After delay and more.
- How to Make a Frame Scroll in a Figma PrototypeFigma scrolling only works when content is bigger than the frame. Set Overflow, clip the content, and fix horizontal, vertical and Scroll to that won't work.
- How to View a Figma Prototype on Your PhoneOpen a Figma prototype on a phone with the mobile app, a shared link or Mirror. Plus how to fix a zoomed-in prototype, set the device, and fit it to any screen.
- How to Make a Prototype in FigmaPress Shift+E, drag the + from a layer to a frame, and pick a trigger, action and animation. How to add overlays, flows and share a Figma prototype link.
- How to Animate in Figma with Smart AnimateSmart animate tweens layers with matching names between two frames. What it animates, what it skips, and why Figma Smart animate isn't working for you.
- How to Add Video to a Figma PrototypePlace an MP4, MOV or WebM up to 300MB with Shift+Cmd+K. Which plans can upload video, how GIFs play in Figma prototypes, and what to do about sound.
- How to Make a Skeleton Loader in FigmaHow to design a skeleton loader in Figma: grey blocks with auto layout, a component with variants, a Smart Animate shimmer, and a plugin that converts frames.
- How to make a GIF in FigmaMake a GIF in Figma from frames with a plugin, export a Figma Motion animation as GIF, or record a prototype. Steps, loop and timing settings, and trade-offs.
- How to Export Figma Variables to JSON (and CSS, Tailwind or CSV)Export Figma variables to JSON natively, convert them to CSS or Tailwind with Style Dictionary, and move variables between files with Variable Master.
- How to Make Design Specs in FigmaWhat a Figma design spec should include, how to build a component spec template by hand, what Dev Mode already covers, and how to generate specs with Autospec.