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 the page code and import 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:

1. In the Claude conversation, click the download button to download the generated page code
2. Open the plugin in Figma and switch to the AI-Generated HTML tab
3. Drag the downloaded .html file into the plugin
4. Click the purple primary button to check the page preview
5. 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

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

1. Open Claude Artifacts and generate a page as prompted
2. When the page is ready, click Publish, then open the published page
3. Open the Refore HTML to Figma browser extension and capture the page
4. Open the HTML to Figma by Refore plugin in Figma
5. 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:

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