How to
How to add hotspots to an image in Figma (and a better way).
Figma prototype hotspots work inside Figma. For a real website, you need a hotspot tool that publishes a live embed.
Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace
Adding hotspots to an image inside Figma
- Place your image on the frame in Figma.
- Draw an invisible rectangle over the area you want to be clickable.
- Open the Prototype tab and drag a connection from the rectangle to another frame or page.
- Play the prototype. Your rectangle is now a hotspot inside Figma.
Why Figma hotspots do not work on your 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.
The alternative: real embeddable hotspots
Interactive Image is a hotspot maker built for the open web. Upload the same image you have in Figma, place hotspots visually, and paste one iframe into Wix, Webflow, WordPress, Shopify, or Squarespace. The hotspots stay responsive and clickable for every visitor — no Figma link required.
Frequently asked questions
Is Interactive Image free?
Yes. The free plan lets you publish one interactive image with unlimited hotspots.
Can I use my Figma image?
Yes. Export the image from Figma as PNG or JPG and upload it to Interactive Image.
Turn any image into a guided experience.
Free forever plan. Paste one iframe into your site and ship.
Create your interactive image