Import Claude-Generated Pages to Figma

There are 3 common ways to generate pages with Claude, each with a matching import method:

Method 1: Download an HTML file from a Claude conversation and import it directly

For pages generated directly in a Claude conversation. Download the page code (.html file), then import it from the AI-Generated HTML tab of the plugin:

In the Claude conversation, click the download button to download the generated page code
Open the plugin in Figma and switch to the AI-Generated HTML tab
Drag the downloaded .html file into the plugin
Click the Interactive Import button to check the page preview
Click import — done

For more details (multiple files, Interactive Import, etc.), see Import AI-Generated HTML Pages to Figma.

Method 2: Publish a Claude Artifact, then capture and import

This mode usually generates a complete frontend project, so you cannot obtain a complete HTML file and import it directly with the Refore HTML to Figma plugin. Use the browser extension to capture the page before importing it.

For pages generated with Claude Artifacts. Once published, you get a public page link — capture it with the browser extension and import:

Open Claude Artifacts and generate a page as prompted
When the page is ready, click Publish, then open the published page
Open the Refore HTML to Figma browser extension and capture the page
Open the Refore HTML to Figma plugin in Figma
Import the page you just captured — done

Method 3: Capture a Claude Design preview page and import

For pages generated with Claude Design. Open the preview page in a new tab, then capture it with the browser extension and import:

Open Claude Design and generate a page as prompted
When the page is ready, click New Tab to open the preview page
Open the Refore HTML to Figma browser extension and capture the page
Open the Refore HTML to Figma plugin in Figma and import the captured page