Import HTML File/Code 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.

Please choose the appropriate method based on your situation:

1. If All Code is in a Single HTML File

Your content might look like this: Or, here’s a simple way to check: Place the HTML file in a separate folder and double-click it. If it opens correctly in a browser with images and styles intact, this indicates all code is in a single HTML file.

In this case, you don’t need to install the HTML to Figma browser plugin. Simply open the HTML to Figma plugin in Figma’s workspace and follow the prompts to drag in your HTML file. You can also directly paste the code into the text box to import.

2. If the HTML File Has Associated .css/.js Files

Your content might look like this:

In this case, you have two options:

Ask AI to Generate a Single HTML File

For example: Ask the AI to “Please put all the generated code into a single .html file,” or add a similar request in your initial prompt like “Please write all the code in a single .html file.”

Or Follow the Solution in “3. If Import Results Are Not Ideal”

3. If Import Results Are Not Ideal

While dragging HTML files directly into the plugin is convenient, browser security restrictions may cause issues like slow imports, lag, or incomplete content restoration in certain cases. Don’t worry - these issues can be resolved.

Follow these two steps:

1. Start an HTTP server for your generated web code (this step is simple, don’t worry)

   • If you’re using an editor with AI capabilities, you can simply ask the AI to start an HTTP server by saying “Please start a server for this page” or “Please serve this page locally”

   • Alternatively, refer to the end of this article: Start an HTTP Server for Your Local HTML Pages

2. Open the corresponding page in your browser, use the HTML to Figma browser plugin to record it, then import it into Figma

   The page address will typically be a local address like localhost or 127.0.0.1

If you still have issues Talk to us on Discord

Appendix: Start an HTTP Server for Your Local HTML Pages

1. Download and install Rebex Tiny Web Server (Windows) or Simple Web Server (Mac/Windows)
2. Place the HTML file in the website root directory, like: C:\temp\web\wwwroot (as shown in the image below)
3. Access the file via http://localhost:1180/filename.html (the goal is to make the page accessible via a URL)
4. Use the HTML to Figma browser plugin to record the page and import it