What a hotspot is and why you'd use one

A hotspot in Figma is an invisible clickable area you place on top of an image or design element. When someone viewing your prototype clicks that area, it can jump to another page, open a link, or trigger an interaction. Hotspots let you turn a static image into something interactive without redrawing or slicing it up.

The most common use is adding clickable regions to a photograph or screenshot. You might place hotspots on different parts of a product photo so clicking the handle jumps to one page and clicking the blade jumps to another. Or you could add hotspots to a map image so each region links somewhere different. Hotspots are also useful when you're prototyping a website mockup and want certain image areas to behave like buttons.

Key Takeaways

  • Hotspots in Figma are invisible rectangles you draw on top of images and connect to interactions using the prototype panel.
  • You create a hotspot by drawing a rectangle, removing its fill and stroke, then adding an interaction to it in the design panel.
  • The rectangle must be on top of your image in the layers panel, or clicks will register on the image instead of the hotspot.
  • Hotspots work in Figma's prototype viewer and shared links, but the person viewing needs to be in prototype mode, not edit mode.

Drawing the rectangle that becomes your hotspot

Start by selecting the rectangle tool from the toolbar on the left side of Figma. You can also press R on your keyboard. Click and drag to draw a rectangle over the area of your image where you want the hotspot to be. It doesn't matter what color or stroke it has right now — you'll remove those in the next step.

Make the rectangle cover the exact region you want to be clickable. If you're adding a hotspot to a product photo, draw the rectangle around the part someone should click. If you're making a map interactive, draw one rectangle per region. You can draw as many rectangles as you need; each one becomes a separate hotspot.

Making the rectangle invisible

With your rectangle still selected, look at the design panel on the right side. Find the Fill section and click the color swatch to open the color picker. Set the fill to none by clicking the X icon or the "none" option at the top of the color menu. The rectangle will disappear from view.

Next, find the Stroke section just below Fill. Click the stroke color swatch and set that to none as well. Now your rectangle is completely invisible — it has no fill and no border. The rectangle still exists in your layers panel and is still selectable, but viewers won't see it on the canvas.

Connecting the hotspot to an action

Make sure your invisible rectangle is selected on the canvas. In the design panel on the right, scroll down until you see the Interactions section. Click the plus icon next to "Interactions" to add a new interaction.

A menu will appear asking what should trigger the interaction. Choose On click from the dropdown. Then choose what happens when someone clicks: you can navigate to another frame, open an external link, go back to the previous screen, or trigger other actions depending on your Figma plan. Select the action that matches what you want the hotspot to do.

If you're navigating to another frame, a second dropdown will appear asking which frame to jump to. Select the frame from your list. If you're opening a link, paste the URL into the text field. Once you've set the action, the interaction is live — your hotspot will now perform that action when clicked in prototype mode.

Checking that the hotspot is on top of the image

Open your layers panel on the left side of Figma. Look at the stacking order of your elements. Your invisible rectangle hotspot must be listed above your image in the layers list. If the image is on top, clicks will land on the image instead of the hotspot, and the interaction won't trigger.

If your hotspot is below the image, click and drag it above the image in the layers panel. You can also right-click the rectangle and choose Arrange > Bring to front to move it to the top of the stack. Once the hotspot is above the image, clicks will register on the hotspot first.

Testing your hotspot in prototype mode

Click the play button in the top right corner of Figma, or press Shift + Command + Return on Mac or Shift + Ctrl + Return on Windows. This opens the prototype viewer. Your design will appear, and you should be able to click the hotspot area — even though you can't see it — and jump to the connected frame or link.

If the click doesn't work, go back to edit mode and check two things: first, make sure the rectangle is actually above the image in the layers panel. Second, make sure the interaction is set up in the interactions panel. If you're sharing the prototype with someone else, send them the share link and make sure they open it in a browser — hotspots only work in prototype mode, not in edit mode.

Adding multiple hotspots to one image

You can place as many hotspots as you need on a single image. Draw a new rectangle for each clickable area, remove its fill and stroke, and add an interaction to each one. Each hotspot can link to a different frame or URL. In the layers panel, all your invisible rectangles will stack on top of the image, and each one will have its own interaction.

If you have many hotspots, consider naming them clearly in the layers panel so you can find them later. Right-click a rectangle and choose Rename, then type something like "hotspot-handle" or "hotspot-blade" so you know what each one does. This makes it much easier to edit or delete a hotspot weeks later without guessing which rectangle is which.

Frequently Asked Questions

Can I see my hotspots while I'm designing?

Yes. While you're editing, your invisible rectangles are still visible in the layers panel and selectable on the canvas — you just can't see their outline. If you want to see where they are, temporarily add a fill color or stroke to the rectangle, then remove it before sharing. Alternatively, click the rectangle in the layers panel to select it and see its bounds on the canvas.

What happens if someone clicks outside a hotspot?

Nothing. If there's no hotspot in that area, the click does nothing. The image itself won't be clickable unless you've added a hotspot to it. This is useful because it means you can have an image with only certain regions interactive.

Can I make a hotspot a different shape, like a circle?

Hotspots in Figma are always rectangles. If you need a circular clickable area, draw a rectangle that covers the circle, make it invisible, and add the interaction. The hotspot will be rectangular, but as long as the circle is inside it, clicks on the circle will work.

Do hotspots work if I share the design file with someone?

Hotspots only work in prototype mode. If you share the file and someone opens it in edit mode, they'll see the design but won't be able to click the hotspots. Share the prototype link instead — you can get this by clicking the share button in the top right and selecting "prototype link".

Can I add a hotspot to text or a button instead of an image?

Yes. You can draw an invisible rectangle over any element — text, buttons, icons, or shapes — and add an interaction to it. This is useful if you want to make something clickable without changing how it looks.