How to Convert HTML to Figma: The Complete 2026 Guide

Every design team eventually hits the same wall: the thing you need to work on exists as HTML in a browser, but the place you want to work on it is Figma. Maybe it's a client's live site before a redesign, a staging build a developer just shipped, or a landing page an AI tool generated in seconds. Rebuilding it by hand takes hours. Pasting a screenshot gives you something you can look at but not edit.

This guide covers how to convert HTML to Figma as real, editable layers — frames, text, vectors and images — using the HTML to Frames plugin. You'll learn the five ways to bring a page in, how to choose screens, which options to turn on, what converts cleanly and what doesn't, and how to fix the most common problem: missing fonts.

Why convert HTML to Figma at all?

A browser and a design tool solve different problems. The browser is the source of truth for what ships; Figma is where you explore, annotate, compare and hand off. Converting moves the current reality into the place where you make decisions.

Common reasons teams do it:

• Redesigns. Start from the existing site instead of a blank canvas, so you can see what's actually there before changing it. Our website-to-Figma redesign guide goes deeper on this.
• Audits. Inspect spacing, type scale and color usage layer by layer instead of guessing from DevTools.
• Design–code drift. Pull the shipped version back into Figma to compare it with the original mockup.
• Developer handoff in reverse. A front-end developer builds on localhost, and the designer reviews and refines it in Figma.
• AI-generated UI. Tools like Claude or Cursor produce HTML quickly; Figma is where you make it production-ready.
• Learning. Students and junior designers can study well-built sites one layer at a time.

The key word in all of these is editable. A bitmap only shows you the page. Layers let you change it.

The 5 ways to bring HTML into Figma

HTML to Frames accepts web pages from five kinds of sources. Pick the one that matches where your HTML lives.

1. Link (a single public URL)

Paste any public web page URL into the Link tab. The page is rendered in an isolated browser, measured, and rebuilt as Figma layers. This is the fastest route when the page is publicly reachable. See URL to Figma for more on this flow.

2. Multiple (up to 10 links)

The Multiple tab takes up to 10 links in one go. They're processed one after another, and each page becomes one row on the canvas, so a home page, pricing page and blog post line up side by side for comparison. Multiple import is available on every plan, including Free.

3. Local file, folder, .zip or pasted code

If the HTML isn't online yet, use the Local file tab:

• a single HTML file,
• a whole site folder (drag and drop it, then choose which pages to import),
• a .zip archive, or
• Paste code — raw HTML and CSS.

Uploads can be up to 30 MB. Files are opened from memory inside an isolated browser (never via file://) and deleted as soon as the import finishes. Abandoned uploads are removed after 2 minutes. The security page has the full details.

4. Browser (the free Chrome extension)

Some pages can't be reached by a server: logged-in dashboards, localhost, private networks, or a page in a specific state — an open menu, a filled form, a cart with items. For those, install the free HTML to Frames Chrome extension.

You can capture the whole page or select a single element (hover to highlight, use the arrow keys to move to the parent or child, press Enter to capture, Esc to cancel). The result goes to your clipboard, or a .h2f file, and you paste it into the plugin's Browser tab. Even simpler: connect the extension to the plugin once with a one-time code and use Send to Figma, so captures go straight into the open plugin.

5. AI tools via MCP

If you build UI with an AI assistant, connect Claude Code, Claude Desktop, Cursor or any MCP client from the plugin's AI tab. It gives you a token and copy-paste setup. The assistant can then call import_html (HTML up to 2 MB), import_url or import_status, and the page lands in your open plugin, imported with your own plan. Web connectors for claude.ai aren't supported yet. Read more on AI to Figma.

Which method should you use?

Step by step: converting a page with HTML to Frames

Here's the full flow for a typical public page.

1. Open the plugin in a Figma design file and choose the Link tab.
2. Paste the URL of the page you want to convert.
3. Choose your screens — Desktop (Site width), Laptop, Tablet, Mobile, or the one-click Responsive set.
4. Review options such as Auto Layout, Full page, Images and Hide cookie banners & popups.
5. Start the import. If the page uses fonts you don't have installed, a Missing fonts screen appears before anything is built.
6. Pick replacements for any missing fonts (or accept the suggestions).
7. Check the results screen. It lists frames, layers, the Auto Layout share, missing fonts and warnings.
8. Start editing. Your page is now a set of nested Figma frames with real text, vectors and images.

Each screen becomes its own frame, named like example.com/pricing — Desktop (1920) — no protocol, no www, and capped at 60 characters — so large imports stay easy to scan in the layers panel.

Choosing screens: Site width explained

The screen choice matters more than it looks. A page rendered at the wrong width either stretches awkwardly or squeezes into a layout the designer never intended.

Desktop = Site width

HTML to Frames doesn't just pick 1440 and hope. It measures the page's real design width at import time:

• Full-bleed designs (backgrounds that run edge to edge) come in at 1920, with the content box centred.
• Truly boxed sites come in at their box width — for example 1200, 1280 or 1440.
• Fluid sites without a fixed container come in at 1440.

Measured, not guessed. In a multi-page import, one site gets one width across all its pages, so the frames line up.

Other screens

• Laptop — 1280
• Tablet — 768
• Mobile — 390
• Custom width — any width you need (Pro)

The Responsive set gives you Desktop, Tablet and Mobile in one click. Screens of the same page are captured in parallel.

On Free, each import includes one screen. Pro and Team allow up to four screens per import. Importantly, one import = one page with all its screens, so a responsive set of one page counts as a single import. See pricing for plan details.

Options worth knowing

The defaults work for most pages, but these options are worth understanding:

• Auto Layout — infers stacks, gaps, padding and alignment from the browser's geometry, and verifies the result before keeping it. The Auto Layout explainer covers how this works.
• Styles & variables (Pro) — creates color variables, text styles and shadow styles, and reuses ones that already exist in your file.
• Snap to my file's styles (Pro) — when there's no exact match, snaps colors and text to the closest styles in your own design system.
• Full page — captures the whole scrolling page rather than just the first viewport.
• Images — include or skip image fills.
• Hide cookie banners & popups — captures the page as a normal visitor sees it without overlays.
• Color scheme — Light, Dark, or Light + Dark (Pro), which builds one variable collection with both modes.
• Detailed layers (Pro), Reference screenshot (Pro, a hidden locked layer for comparison) and Extra wait (Pro, for slow-loading pages).
• Accordion text as notes — off by default; turns collapsed <details> text into Figma annotations.
• Page language — 15 languages, useful for multilingual sites.

What converts — and what doesn't

The goal is a design file you can actually work in, so it's worth knowing exactly what comes across.

What converts to editable layers

• Layout as nested frames, with Auto Layout where it can be verified
• Text with mixed styles, links, letter-spacing, line-height and text-transform
• Colors and gradients — linear, radial and conic, including px stops and repeating gradients
• Images with object-fit, background-size, tiling and high-res srcset
• SVG as editable vectors
• Borders (including a single side in a different color), corner radius and shadows (inner, outer and text-shadow)
• Opacity, blend modes, blur and backdrop-blur
• CSS rotation and scale, filter: grayscale/opacity
• ::before and ::after, clip-path, mask-image
• Form fields, list markers drawn like Chrome, CSS counters, superscript and subscript
• Shadow DOM and correct z-index order

What comes in as an image

Some content can't be represented as layers. Iframes (such as embedded maps), videos without a poster, WebGL or 3D canvases and object/embed elements are captured as a screenshot of that box only. The rest of the page stays editable. The HTML to canvas comparison explains why.

Not supported yet

• Skew and 3D transforms
• path() clip-paths
• Multi-layer masks
• Display-P3 colors

Tips for clean results

A few habits make a noticeable difference:

1. Turn on "Hide cookie banners & popups" for marketing sites. Otherwise a consent dialog may sit on top of your hero section.
2. Use the Chrome extension for authenticated pages. A server can't log in as you; your browser already is.
3. Capture states deliberately. Open the menu or fill the form in your browser first, then capture with the extension.
4. Select a single element when you only need a component, such as a pricing card or navigation bar. Smaller captures are faster to clean up.
5. Use Extra wait (Pro) on pages that load content late.
6. Add a Reference screenshot (Pro) when you need to prove the import matches the live page — it's a hidden, locked layer you can toggle on to compare.
7. Import a responsive set instead of three separate imports. It's one import, and the frames sit together.
8. Use Import linked pages after the first import to pick other pages from the same site — they come in as a Multiple import.
9. Re-import with one click when the live page changes. The source URL is stored on the frame.

Fixing missing fonts

Missing fonts are the most common reason an imported page looks "off." The site might use a licensed typeface or a webfont you don't have installed locally.

HTML to Frames handles this before building the layers:

1. After capture, a Missing fonts screen lists every family the page uses that Figma can't find.
2. For each one, the plugin suggests a replacement. You can accept it or pick a different font.
3. Your choices are remembered per site — or for every site, if you prefer — so the next import from the same domain doesn't ask again.

Font mapping is available on every plan. Fonts are listed locally only; the plugin doesn't read the content of your Figma file. If you plan to keep working on the design long term, installing the actual typeface the site uses is still the most accurate option.

Where to go next

Converting HTML to Figma is the first step. What you do with the layers is where the value is:

• Planning a redesign? Read the HTML to design workflow.
• Working with AI-generated pages? See AI to Figma and our guide to AI-generated UI to Figma via MCP.
• Need localhost or logged-in pages? Start with the Chrome extension.
• Comparing tools? Our alternatives page lays out the options fairly.

When you're ready, get the plugin and try it on the page you're working on right now. The docs cover every option in detail.