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.