Import AI-Generated HTML Pages to Figma

Read Before Use

This feature is primarily designed for HTML pages generated by AI tools like Cursor, Trae, Cline, Claude Sonnet, etc. (sometimes referred to as AI-generated designs, but they are actually HTML pages). It’s rare for people to write such pages manually nowadays.

Two methods to import AI-Generated HTML pages

• Method 1: Directly import HTML files using the HTML to Figma plugin in Figma
• Method 2: Capture by HTML to Figma browser extension, then import it using the HTML to Figma plugin in Figma

For content that requires clicking to view, please use Method 2

Method 1 (importing .html files) currently only imports the default homepage. If you need to import other content that requires clicking to view, please use the HTML to Figma browser extension to capture and import.

Here we’ll focus on the first method. Open the HTML to Figma plugin, click AI-Generated HTML Pages and follow the prompts, as shown below:

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

What you see might look like this:

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.

Interactive Import

Please use capture by 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:

Common Issues

Interactive Import stuck in “Page preparing” status

Open this HTML file in the same browser that’s running the 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