How to Change the Cursor in a Figma Prototype

Because hover alone doesn't make a layer clickable. In the long-running feature request for variable cursors, the behaviour is summed up as: the cursor is either the arrow for everything, or the hand "if a click interaction set up on an element". A button wired only with While hovering shows the arrow, even though it changes to its hover state.

Figma's help center doesn't describe this rule, so treat it as observed behaviour. It matches what people report in the pointer hand on hover thread, where the hand appeared once the layer also had a click action with a destination.

1. Build the hover state first. Use a component with Default and Hover variants and a While hovering connection. How to add a hover effect in Figma walks through it.
2. Add a click interaction to the same layer. Select the instance in your screen and add an On click interaction that goes somewhere, like the next screen or an overlay.
3. Keep the triggers different. While hovering on the variant and On click on the instance don't clash, because they're different triggers.
4. Preview. Press Shift+Space for inline preview or present the prototype, then move over the button. You should see the hand.

Not natively. None of the 12 prototype triggers change the cursor, and the Options menu in presentation view only offers Enable Figma shortcuts, Show hints on click, Make available offline, Accessibility settings and Hide UI. A layer that follows the mouse isn't possible either, because no trigger reads the cursor's position.

What people do instead depends on why they want the cursor:

• For a screen recording or demo video. Change the cursor outside Figma. Forum users suggest the Chrome extension Cursor Helper (upload a transparent PNG as the cursor) or, on a Mac, Mousecape, which replaces the system arrow and hand. One user reports that Cursor Helper only shows over clickable buttons, so test it before you record.
• For a touch-style dot on mobile demos. Community members report that setting a phone as the prototype device shows a round touch cursor instead of the arrow. Figma doesn't document this, so check it in your own file. Device settings are covered in viewing a Figma prototype on your phone.
• For a static mockup or screenshot. Draw the cursor as a layer on the frame. It won't move, and viewers will see it alongside their real cursor, so only use it for still images.
• For a real website. Build it in Figma Sites, which has a native cursor effect. See below.

Figma Sites (not Figma Design) has a Cursor effect. Select an element, open the Interaction tab in the right sidebar, click Add interaction and choose Cursor effect. It swaps the mouse cursor for an image, vector or frame while the visitor is over that element. The hotspot defaults to Top left, and you can type your own X and Y to move the click point.

Two limits: blend modes on the cursor element don't show on the published page, and the effect doesn't appear on mobile. It's available on all plans with edit access to the site.

Some people asking about cursors really want to stop the blue boxes. Those are hotspot hints: when a viewer clicks outside a hotspot, Figma highlights every clickable area. Turn them off with Show hints on click in the prototype's Options menu. That's handy for user testing, where the hints would give away the answer.

If interactions don't fire at all, the cursor is the least of your problems. Start with Figma prototype not working, and see how to prototype in Figma for the basics. Recording the prototype for a video is covered in how to download video from Figma.