What if my HTML is a local file (file://) not at a URL?

Two options. (1) Drag the file into Chrome — it opens via file:// and the extension can capture it directly. Works for self-contained HTML with inline or linked CSS. (2) Start a local dev server (npx serve, python -m http.server, vite dev) and open the localhost URL in Chrome. The extension captures localhost URLs the same way it captures public ones. The second option is required if your HTML imports modules or has any dependencies that file:// can't resolve.

Can I convert HTML code from a CodeSandbox or StackBlitz to Figma?

Yes — every code sandbox tool exposes a standalone preview URL. Open the preview URL in Chrome (most tools have a 'open in new tab' button on the preview pane) and capture as normal. This is often the cleanest way because the sandbox handles all the dependency / build complexity.

What about AI-generated HTML (ChatGPT, Claude artifacts, etc.)?

Same as any HTML. Save the AI-generated code to a file and open in Chrome, or paste into a CodePen/StackBlitz preview, or render in a dev environment. The extension captures the rendered output. If you're using an AI app builder (Lovable, Bolt, v0, Cursor) that gives you a live preview URL, capture that URL directly — see the dedicated Lovable & Claude Code use case.

Does CSS Grid translate to Figma auto-layout?

Partially. Simple grids (uniform columns, uniform gaps) translate well to Figma auto-layout. Complex grids with named template areas, dynamic span declarations, or grid-template-areas need manual cleanup after capture. Figma's auto-layout is closer to flexbox in expressiveness than to CSS Grid's full capability.

Can I capture HTML behind a login or paywall?

Yes — the extension uses your existing Chrome session. If you're already signed in to the site serving the HTML, the captured page reflects your logged-in view. This is the case that breaks every server-side capture tool, including Figma plugins that paste URLs.

What's the difference between 'HTML to Figma' and 'URL to Figma' on this site?

Mechanically the same workflow — the extension captures whatever Chrome renders. The page distinction is about how you arrive at the workflow: 'HTML to Figma' implies you have raw HTML/CSS code; 'URL to Figma' implies you already have a live URL. The first step in 'HTML to Figma' is to render the HTML somewhere (browser, dev server, sandbox preview). After that, both workflows are identical.

Can the extension handle Tailwind, ShadCN, or other utility-first CSS?

Yes. The CSS framework doesn't matter — by the time the page renders in Chrome, classes have resolved to applied styles. Tailwind sites, ShadCN component pages, vanilla CSS, BEM-named CSS, CSS-in-JS — all produce the same kind of rendered DOM that the extension reads.

Convert HTML to Figma — Capture Any Web Page as Editable Layers

What this is

A focused workflow for developers and designers working with HTML/CSS code: convert any HTML page — live URL, local file, dev server, code sandbox — into editable Figma layers.

Export to Figma is a Chrome extension. The mechanism is identical regardless of where your HTML lives: render it in Chrome, click the extension, paste into Figma. You get real Figma layers — selectable text, recolorable shapes, named hierarchy — not a flat image.

The four ways HTML reaches Figma

Each starts with rendering the HTML in Chrome, then captures the same way.

1. Live URL (the simplest case)

Your HTML is already hosted somewhere — your own site, a competitor's, a staging environment, a CodeSandbox preview URL. Just open it in Chrome.

yoursite.com → Chrome → extension → Figma

Wall-clock time: under 30 seconds including the extension install.

2. Local HTML file (file://)

You have a single .html file with inline or linked CSS, no external dependencies, no module imports. Drag it into Chrome — it opens via file://.

example.html → Chrome (file://) → extension → Figma

This works for static demos, downloaded examples, and brand designers' deliverables. It breaks for anything with ES modules, fetch calls to relative paths, or dependencies that need to be resolved relative to a server root.

3. Local dev server (the general-purpose option)

For HTML that's part of a larger project — multiple files, ES module imports, build pipelines, fetch calls — run a local dev server and capture the localhost URL.

Common dev server commands:

Plain HTML/CSS folder: npx serve (no install required, runs once)
Python: python3 -m http.server 8000
Vite project: npm run dev or pnpm dev
Next.js / Nuxt / Astro / Remix: their own dev command
Storybook: npm run storybook (great for capturing individual components)

Then open http://localhost:[port] in Chrome and capture as normal.

4. Code sandbox (CodePen, CodeSandbox, StackBlitz, Replit)

Open the sandbox's preview URL — every code sandbox tool exposes a standalone preview pane that can be opened in a new tab. Capture from that URL.

This is often the cleanest path because the sandbox handles all the build/dependency complexity for you.

Quick comparison: HTML to Figma vs the alternatives

Approach	Result	When to use
Export to Figma (Chrome extension)	Editable Figma layers	Almost always — covers all 4 source types above
Drag a screenshot into Figma	Flat image	Only when the URL is gone and you can't run the code
AI image-to-code tools	HTML/CSS code (not Figma)	When you want code, not Figma layers
Free "HTML to Figma" Figma plugins	Often flat images on modern stacks	Static-only HTML, simple cases
Manual rebuild in Figma	Slow but deterministic	When you can't render the HTML anywhere

When this workflow shines

AI-generated HTML you want to design over

ChatGPT, Claude, or another AI generated an HTML page for you. The output looks decent but needs design polish — typography, spacing, color palette adjustments. Render it in Chrome (paste into a CodePen or save to a file), capture, and design in Figma.

Pre-production refinement

Engineering built a quick HTML/CSS prototype. The design team wants to polish it before the final implementation pass. Run the prototype in dev, capture the rendered version into Figma, iterate, hand back specs.

Storybook component capture

Storybook is everywhere in modern frontend codebases. Each story is a small isolated component preview at its own URL. Capture each Storybook story into Figma to build a Figma library that matches what's already in code — without manually rebuilding each component.

Tailwind / ShadCN / utility-CSS sites

Tailwind, ShadCN, and other utility-first frameworks produce styles that are inline in the HTML class attributes. Server-side capture tools sometimes mis-resolve these. The extension reads the applied styles after browser rendering, so utility CSS captures cleanly.

HTML/CSS demos and code playgrounds

CodePen demos, MDN examples, freecodecamp solutions, dev tutorial outputs — all of them can be opened in Chrome and captured. Useful for designers studying specific implementation patterns alongside the rendered output.

What gets preserved

Element	Preserved?
Typography (font-family, size, weight, line-height)
Colors (background, text, borders, gradients)
Box shadows, filters, effects
Images at original resolution
Layout (flex → Figma auto-layout)
Layout (CSS Grid)	Partial — simple grids translate, complex grid-template-areas may need cleanup
Inline SVG
Editable text content
Layer hierarchy
Animations and transitions
`:hover` / `:focus` (without manual trigger)
JavaScript-driven runtime behavior	(visual state at capture time only)

A real workflow: Storybook → Figma component library

A designer working with an engineering team had a Storybook for their design system — about 80 components, each with a few variants. The design team had been working in Figma but their Figma library had fallen behind the actual code: components changed in the codebase weren't reflected in Figma.

Old workflow: a designer manually rebuilt the changed Figma components based on the Storybook output. Constant maintenance lag.

New workflow with Export to Figma:

Open Storybook in Chrome.
For each changed component: navigate to the story, click the extension, paste into a Figma page named for that component.
Convert the captured layers into a Figma component with variants.

Total time per component: 2–3 minutes. For an 80-component sync, about 3–4 hours instead of 2–3 days of manual rebuild.

How to get started

Install Export to Figma from the Chrome Web Store.
Render your HTML in Chrome (URL, file://, dev server, or sandbox preview).
Click the extension icon. Paste into Figma.

Pricing

Free: 10 conversions/month. No card. Forever.
Pro: $1/month (launch promo) for unlimited.