Import AI-Generated HTML Pages to Figma

html file in cursor, import into figma

This feature is for HTML pages generated by AI tools like Claude, Codex, Cursor, Lovable, Google AI Studio, etc. (sometimes called “AI-generated designs,” but they are really HTML pages). Such output comes in one of two forms, and each has its own way to import:

Plain HTML files you can just double-click to open — no build step or local server needed. This can be a single .html file, or a whole folder or zip (the .html plus its css/js/image assets). Its path looks like file:///… or C:\…\index.html. Import the file or folder directly with the Refore HTML to Figma plugin in Figma.
A frontend project (React, Vue, etc.) that has to be installed, built, and started with a local dev server before it opens — its address looks like http://localhost:3000 or http://127.0.0.1:5173. This is just a regular website, so capture it with the browser extension and then import.

Here we’ll focus on importing an .html file directly. Open the Refore HTML to Figma plugin, click AI-Generated HTML Pages and follow the prompts, as shown below:

Interface for importing AI-generated HTML pages

If there are .css, .js, images, or other files alongside the HTML file

What you see might look like this: HTML file with css and js files

In this case, click the Select Folder button and choose the appropriate folder.

If the HTML page is a standalone .html file

What you see might look like this: In this case, click the Select File button and choose the appropriate .html file. Or, as suggested in the previous interface, you can directly drag the HTML file into the plugin to import it.

Then, you’ll see a popup where you can choose the viewport width for the imported page and whether to use Interactive Import.

Import settings interface

Interactive Import

Please use capture by Refore HTML to Figma browser extension or Interactive Import in the following 2 situations:

When the page content you need to import requires clicking to view, such as popups
When the page content you need to import requires mouse hover to view, such as menus, button hover styles

For specific usage, please see the video below:

Import all sub-pages in one click

An AI-generated page is rarely just one screen. Behind it sit sub-pages that only appear after a click — modals, dropdown or side menus, multi-tab content, and the pages it links to. Previously you had to open each of these in the preview and import them one by one.

Now, in the import flow, just click Import All. The AI automatically discovers every page and its sub-pages — modals, menus, tabs, and linked pages — opens and imports each one as a separate frame, and wires up the click prototype connections between them. Progress is shown the whole time, and you can cancel anytime.

Import every page and sub-page of your AI-generated HTML in one click

In the demo, two pages import in a single click into 8 frames (6 sub-states) with 4 click prototype connections — every sub-page becomes its own editable, clickable frame.

The imported result on the Figma canvas: sub-state frames wired with click prototype connections

The blue lines are the auto-generated click prototype (Flow 1), so the imported frames are a working prototype — not just static screenshots.

Common Issues

Interactive Import stuck in “Page preparing” status

Open this HTML file in the same browser that’s running the Refore HTML to Figma plugin. If it doesn’t open properly, it means the page depends on resources that your current browser environment cannot request. Please check your network connection or try using a VPN.

If you still have issues, please talk to us