How to import an HTML file into Figma as editable layers

You have an .html file, often a page ChatGPT or Claude made, and you want it in Figma as layers you can edit: frames, text, and images, not a screenshot. Figma's own import doesn't take the file, so the work is done by a plugin, by Figma's Chrome extension, or by an AI agent connected to Figma. This guide says what each one takes, what it costs, and where a link works better than the file.

The Figma help pages and plugin docs quoted here were read on November 15, 2026. We didn't run these imports ourselves, so a label in your Figma may differ.

Some of these routes start from a web address, not a file. If yours does, drop the file into the upload box at the top of this page for a preview link without an account, then keep and publish the page as in When a link works better than the file.

What Figma imports on its own

Figma's help article on importing lists what the file browser takes: “Sketch files (.sketch)”, “Figma Design files (.fig)”, “FigJam files (.jam)”, “Figma Slides files (.deck)”, “Figma Buzz files (.buzz)”, “Figma Sites files (.site)”, “Figma Make files( .make)”, “PNG and JPG files”, and “PowerPoint files (.pptx)”. HTML isn't on the list.

Figma does have its own ways to turn a coded page into layers. Its article “Turn coded screens into editable design layers” names them:

The extension's own article says capture “turns on automatically once you're signed in to a paid plan”, and that the capture lands “as Figma layers, such as frames, text, images, and shapes”.

For an HTML file, Figma's MCP server has one more tool, html_to_figma: it “Converts an HTML document into design layers in a Figma Design file.” Figma's limits for it: “The HTML must be self-contained, with CSS and images included in the document. External links aren't loaded. The document can be up to 50 MB.” It needs an AI agent connected to Figma's remote MCP server. Figma doesn't say on that page which plans can use this tool.

Plugins and tools that convert HTML, compared

What the two plugins say about themselves:

• html.to.design renders the file: “These are standard HTML files. The plugin will render these HTML files and import them into Figma.” Its imports count against the free allowance whichever tab you use. Bulk imports, high-resolution images, and one-click re-import are PRO.
• html2figma says it runs “100% local — nothing uploaded”, and that “the plugin never runs page JavaScript.” Its site warns that a page that loads Tailwind from a CDN script “imports unstyled”.

Import the file with html.to.design in 4 steps

These are html.to.design's own steps, from its docs.

1. Make the file stand alone

The plugin's File tab warns: “Your HTML files may contain references to external resources like images, CSS or JavaScript. The plugin will try to import these resources as well, but may not always be successful if they are not present or not available publicly.” Put the CSS inside the file, and give images full https:// addresses. If the page has a folder of CSS and images, zip the folder: the plugin takes “a .zip file containing all HTML, CSS, images and JavaScript”, which “must contain at least one .html file and be smaller than 256 MB.”

2. Open the plugin in Figma

In Figma's bottom toolbar, open the Actions menu (⌘K on a Mac, Ctrl+K on Windows) and go to Plugins & widgets. Search for html.to.design and click html.to.design — by ‹div›RIOTS.

3. Drop the file on the File tab

Select the File tab. Drag the file into the drop zone, or click the drop zone to choose it. Check the import options and click Proceed. To paste code instead, open the Editor tab, paste the HTML and CSS, and click Create.

4. Fix the fonts

If the page uses a font you don't have, the Import completed window lists it under Missing font mapping. Map it to a font in Figma and click Update fonts. html.to.design's docs say “The fallback is Inter.”

When a link works better than the file

One self-contained file needs no link: steps 1 to 4 cover it. A link helps in these cases.

• You'd rather paste an address. html.to.design's Web tab: “paste the URL of any public website and click Import.” From a URL, it can import the page “in several viewports, themes and languages at once”.
• You use Figma's Chrome extension. It captures a page open in Chrome. Figma's help doesn't say whether a file opened from your computer can be captured.
• Someone else does the import. A link shows the designer the live page, with its scripts running, beside the layers.
• The file imports wrong. A page that builds its layout with scripts, or whose images and CSS didn't load from the file, may import better from an address where it's already running.

To put the file at an address on Convika:

1. Drop it into the upload box at the top of this page, or paste the code, and click Get my preview link. This preview works for 3 minutes, with scripts and forms off and a notice across the top. It's for checking the layout, not for importing.
2. Click Keep this page — free, no card and sign up. The page moves into your account.
3. Click Publish page. Under Who can open this page?, choose Public and click Next. The first time, click Publish free. The page goes live at an address like yourpage.convika.page.

Convika serves one .html or .htm file up to 2 MB, or pasted code. If the page's CSS and images sit in a folder next to it, drop that folder, or a zip of it, and the box puts them inside the file.

Three things to know before you import that address:

• The Convika bar comes with it. A page published free carries a small Convika bar at the bottom. An import takes the page as it renders, so expect the bar among the layers, and delete it in Figma. Publish without the Convika bar opens an order for Pro monthly ($12 a month).
• We haven't tested this. We haven't imported a convika.page address into Figma with any of these tools. html.to.design says “The plugin opens URLs from html.to.design's servers”, and that a site protected against bots can return “the human verification popup as a result, instead of the webpage.” Its fix is its browser extension, which “captures the page from your own browser session”. If the Web tab fails on your page, use the extension or the File tab.
• A password stops a URL import. html.to.design: “Pages behind a log-in, local pages, Figma Make and Claude pages can't be imported via URL; capture them with the browser extension instead.” A Convika page behind a password shows a server only the password screen.

A Convika page can't be shown in a frame on another site. html.to.design's docs describe its servers opening the URL and its extension capturing your browser tab. They don't describe a frame.

What converts badly

• Animations. html.to.design: “Complex animations don't transfer (Figma doesn't support CSS animations)”.
• Canvas and heavy scripts. Figma, on its own capture: “Pages that use heavy JavaScript animation, <canvas> rendering, or virtualized lists may not translate cleanly.” A game or a chart drawn on a canvas won't become layers.
• Fonts. html.to.design: “Custom fonts require manual installation in Figma”.
• Files the page loads from elsewhere. html.to.design's File tab “may not always be successful” with them, and Figma's html_to_figma doesn't load them at all: “External links aren't loaded.” Why an HTML file is missing its images and styles shows how to put them inside the file.
• Pages built by a script. html2figma “never runs page JavaScript”, so a page styled by a script arrives unstyled.
• Your design system. Figma: “Captures come in as plain Figma layers with variables bound if any are available. They are not automatically mapped to your library components or styles.”

Figma to HTML, the other direction

Going from a Figma design to a web page is a different job with different tools. Figma's help describes Dev Mode as “a developer-focused workspace for inspecting designs, viewing properties and generated code”, on Professional, Education, Organization, Government, and Enterprise plans, and lists Figma Sites, in beta, to “Publish fully responsive websites”. If your route ends in a single HTML file, share it as a link the same way as any other.

Frequently asked questions

Can you upload an HTML file to Figma?

Not through Figma's own import: its file browser takes Sketch files, Figma's own formats, PNG, JPG, and PowerPoint, and no .html. A community plugin does it. In html.to.design, select the File tab, drop the .html file, and click Proceed. With an AI agent connected to Figma's MCP server, the html_to_figma tool converts a self-contained HTML document up to 50 MB.

How do I convert HTML to Figma for free?

Use a plugin's free allowance. html.to.design gives “10 free imports, then 10 free imports every month when you sign in with a free ‹div›RIOTS ONE account.” html2figma's site says “Free” and “No signup”, and takes a dropped .html file. Figma's own Chrome extension captures pages only on a paid Figma plan.

Is html.to.design free?

To start, yes. Its docs say: “html.to.design is free to start: 10 free imports, then 10 free imports every month when you sign in with a free ‹div›RIOTS ONE account.” PRO is “$18 per user/month, or $12 billed yearly” and removes the limit under a fair use policy of 1,000 imports per 30 days.

Can Figma import a website from a URL?

Not by itself from a pasted URL. Figma's Chrome extension captures the page you have open in Chrome, on paid plans. html.to.design's Web tab takes “the URL of any public website”. Pages behind a log-in or on your own computer need its browser extension instead.

Why does my HTML look wrong after importing it into Figma?

Usually because something the page needs didn't load or doesn't exist in Figma. Images and CSS kept in separate files may not import, fonts you don't have fall back to another font, CSS animations don't transfer, and anything drawn on a <canvas> doesn't become layers. Put the CSS and images inside the file and import again.

Can I import HTML from ChatGPT or Claude into Figma?

Yes. Save the page as one .html file and drop it on html.to.design's File tab, or paste the code into its Editor tab and click Create. html.to.design's extension also captures an AI tool's preview in the browser. With Claude Code or Codex connected to Figma's MCP server, the agent sends the HTML with html_to_figma.

Do I need a URL to import HTML into Figma?

No, not for one self-contained file: html.to.design and html2figma both take the file. You need a public URL for html.to.design's Web tab, and a page open in Chrome for Figma's extension. To get one, publish the file on a host. We haven't tested importing a Convika page's address with these tools.

Can I turn a Figma design back into HTML?

That's a separate route. Figma's Dev Mode shows “properties and generated code” for a design, and Figma Sites, in beta, publishes websites from Figma. Neither is an import, and both are Figma features with their own plans.

Sources

• Import files to the file browser (Figma Help Center) (no date on the page; read on November 15, 2026)
• Turn coded screens into editable design layers (Figma Help Center) and Figma Chrome extension (Figma Help Center) (no date on the pages; read on November 15, 2026)
• Code to canvas and Tools and prompts (Figma Developer Docs; no date on the pages; read on November 15, 2026)
• Guide to Dev Mode in Figma (Figma Help Center) (no date on the page; read on November 15, 2026)
• html.to.design on Figma Community (version 427, November 13, 2026; read on November 15, 2026)
• html.to.design docs: Import local files and Import any page from the Web (last updated November 11, 2026), Import HTML/CSS code, Launch the Figma plugin, PRO plan, Missing fonts, and Bot-protected sites (last updated October 29, 2026), What is the browser extension? (last updated November 11, 2026), and All the ways to import from Claude AI to Figma (last updated November 5, 2026); read on November 15, 2026
• html2figma and its author's post on the Figma Forum (August 13, 2026); read on November 15, 2026