How to add hotspots to an image in Figma (and a better way).

Figma's prototyping tab does support hotspot-style interactions on top of an image, and it's genuinely useful for testing a flow with your team before anything ships:

1. Place your image on the frame in Figma.
2. Draw an invisible rectangle over the area you want to be clickable.
3. Open the Prototype tab and drag a connection from the rectangle to another frame or page.
4. Repeat for every clickable area, and set the interaction trigger (usually "On click").
5. Click "Present" to play the prototype. Your rectangles are now hotspots inside Figma's viewer.

This works well for usability testing and client review calls where everyone already has a Figma link. It does not produce anything you can drop into a website.

Figma prototype interactions live inside Figma's viewer. They are not exported as HTML, they cannot be embedded on a marketing site, and clients cannot experience them without a Figma link. If you want a picture with clickable hotspots on a real website, you need a hosted hotspot tool that publishes a live iframe.

In Figma, select the frame, artboard, or group you want to make interactive, then open the Export panel in the right sidebar:

1. Click the frame to select it, then scroll to "Export" at the bottom of the right panel.
2. Click the "+" to add an export setting, and set the scale to 2x — this keeps text and fine details sharp once the image is embedded on a real screen.
3. Choose PNG for UI screenshots, dashboards, or anything with text and hard edges. Choose JPG for photographic renders or large lifestyle images where file size matters more than pixel-perfect edges.
4. Click "Export [frame name]" and save the file.

This flattens every layer in the frame into one static image — exactly what you want as the base for real, embeddable hotspots.

Interactive Image is a hotspot maker built for the open web. Upload the export you just made, place hotspots visually, and paste one iframe into Wix, Webflow, WordPress, Shopify, Squarespace, Notion, HubSpot, or Framer. The hotspots stay responsive and clickable for every visitor — no Figma link required.

1. Create a new interactive image and upload the PNG or JPG you exported from Figma.
2. Click anywhere on the image to drop a hotspot, then drag it into position.
3. Write the popup content — text, an image, a link, or a video — for each hotspot.
4. Publish and copy the iframe snippet from the Embed panel.
5. Paste the snippet into your website's embed or HTML block and publish the page.

Because hotspots are stored as percentages of the image, they stay aligned on desktop, tablet, and mobile without any extra work. For the full walkthrough, see the interactive image maker.

Figma is a design tool, and its prototype hotspots exist to help teams review a flow before it ships — not to power a public website. Once a design is approved, the artwork needs to leave Figma's environment and become a plain image, because that's what browsers, CMSs, and page builders can actually embed. Exporting the frame at 2x and adding hotspots in a purpose-built tool is the step that turns a Figma mockup into something a visitor can click on your live site. Compare this approach with other hotspot methods on the comparison page, or read what is an interactive image for the broader concept.