How to Add Hotspot to an Image in Figma

{ "@context": "https://schema.org", "@type": "HowTo", "name": "How to Add Hotspot to an Image in Figma", "description": "Add interactive hotspots to images in Figma by syncing frames with the Arcade plugin. Install the plugin, connect your free Arcade account, and start adding hotspots.", "step": [ { "@type": "HowToStep", "name": "Open Your Figma File", "text": "Launch Figma and open the design where you want to add hotspots." }, { "@type": "HowToStep", "name": "Place Your Image Inside a Frame", "text": "Insert your image with File → Place Image. Make sure the image is inside a Figma Frame—the Arcade plugin will only sync frames, not loose images.", "url": "https://www.figma.com/community/plugin/1428419310515420089/arcade-turn-designs-into-interactive-demos" }, { "@type": "HowToStep", "name": "Install the Arcade Plugin", "text": "Click the Figma icon (☰) in the top-left corner, then go to Plugins → Manage Plugins. In the search bar, type Arcade Demo and click Install." }, { "@type": "HowToStep", "name": "Launch the Arcade Plugin", "text": "Return to the Figma menu, click Plugins → Arcade Demo to open it." }, { "@type": "HowToStep", "name": "Sign Up or Log In to Arcade", "text": "The plugin will prompt you to connect with an Arcade account. Signing up is free and only takes a few seconds." }, { "@type": "HowToStep", "name": "Sync Your Frame to Arcade", "text": "With your frame selected, click Sync in the plugin to push the image into your Arcade workspace for editing." }, { "@type": "HowToStep", "name": "Add a Hotspot in Arcade", "text": "Once your frame loads in Arcade, double-click anywhere on the image to place a hotspot. Drag to size the hotspot and add a link, tooltip, or call-to-action." }, { "@type": "HowToStep", "name": "Preview and Share", "text": "Use Arcade’s Preview mode to test your hotspots, then copy the share link or embed code to publish your interactive image." } ] }