Can I paste HTML directly into Figma?

Not as editable layers — Figma doesn't natively parse HTML. The bridge is to render the HTML in a browser first (open a URL, file://, dev server, or sandbox preview), then capture with a Chrome extension that reads the DOM and outputs Figma layers. Export to Figma does this in one step.

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

Every code sandbox tool exposes a standalone preview URL. Open the preview URL in Chrome (most tools have an 'open in new tab' button), then capture with the extension. This is often the cleanest path because the sandbox handles the build/dependency complexity for you.

Does CSS Grid translate to Figma auto-layout?

Partially. Simple uniform grids (3-column feature grids, 12-column page layouts with consistent gaps) translate cleanly because they're effectively flexbox-equivalent. Complex CSS Grid with named template areas, dynamic spans, or overlapping cells doesn't have a direct Figma equivalent and needs manual cleanup after capture.

Can I convert a local HTML file (file://) to Figma?

Yes — drag the .html file into Chrome to open it via file://. The extension can capture it. Works for self-contained HTML with inline or linked CSS. For multi-file projects with ES modules, fetch calls, or relative paths, you'll need a local dev server (npx serve, vite, etc.) instead.

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

Same as any HTML — render it in Chrome (save to a file, paste into CodeSandbox, etc.), then capture. If you're using a full AI app builder like Lovable, Bolt, v0, or Cursor, they give you live preview URLs; capture those URLs directly. See the dedicated Lovable & Claude Code use case.

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 first step in 'HTML to Figma' is to render the HTML somewhere (browser, dev server, sandbox preview). After that, both workflows are identical. The category split is just about which starting point you're at.

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

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

Convert HTML/CSS to Editable Figma Frames (2026 Guide)

TL;DR

Converting HTML/CSS into editable Figma frames is a two-step process:

Render the HTML in a browser. A URL, a local file via file://, a local dev server (npx serve, vite, etc.), or a sandbox preview (CodePen, CodeSandbox, StackBlitz).
Capture the rendered page with a Chrome extension that reads the DOM and outputs Figma layers.

Export to Figma is the free Chrome extension for step 2. Don't use a screenshot — that produces a flat image, not editable frames.

The methods, ranked by case

1. Live URL → Chrome extension → Figma (fastest)

If your HTML/CSS is already deployed at a URL, this is the path:

Open the URL in Chrome.
Install Export to Figma (free Chrome extension).
Click the extension icon.
Paste into Figma.

Total time: under a minute including the extension install. Output: editable Figma frames with typography, colors, layout, and auto-layout preserved.

2. Local HTML → dev server → Chrome extension → Figma

If your HTML is local code, run a local dev server and capture the localhost URL:

# Standalone HTML folder
npx serve

# Python (simple HTTP server)
python3 -m http.server

# Vite / Next.js / framework project
pnpm dev  # or npm run dev

# Storybook
pnpm storybook  # for capturing individual components

Open the local URL in Chrome (typically http://localhost:3000 or similar), then capture as usual. This works because Export to Figma captures whatever Chrome renders, regardless of whether the source is on the public web or localhost.

3. Single HTML file → file:// in Chrome → capture

For a standalone HTML file with inline or linked CSS:

Open the file directly in Chrome — drag it into the address bar or use File → Open.
Capture with Export to Figma → paste into Figma.

This works for self-contained HTML. For projects with ES module imports, fetch calls to relative paths, or external dependencies, use a dev server instead (option 2 above).

4. Sandboxed HTML → preview URL → capture

If your HTML is in CodeSandbox, StackBlitz, JSFiddle, CodePen, or similar:

Open the preview pane / preview URL (most sandboxes have an "open in new tab" button on the preview).
Capture that URL with Export to Figma.

Sandbox tools expose a standalone preview URL — use that for the cleanest capture. This is often the easiest path because the sandbox handles dependencies and build complexity for you.

5. AI-generated HTML → render it → capture

ChatGPT or Claude generated an HTML page for you. The output is a code snippet, not a rendered page.

Save the generated HTML to a file (.html extension).
Open it in Chrome via file://.
Capture.

Or paste the HTML into a CodePen / StackBlitz, get a preview URL, and capture from there.

For full AI app builders (Lovable, Bolt.new, v0.dev, Cursor, Claude Code), they already give you a preview URL. Capture that URL directly — see the Lovable & Claude Code use case.

What gets preserved

Element	Preserved?
Typography (font-family, size, weight)
Colors (background, text, borders, gradients)
Box shadows and filters
Images at original resolution
Layout (flex → Figma auto-layout)
Layout (CSS Grid)	Partial — simple grids translate, complex template areas need cleanup
Editable text content
Layer hierarchy with semantic naming
Inline SVG icons and graphics
Animations and CSS transitions
`:hover` / `:focus` states (without manual trigger)
JavaScript-driven behavior

Common workflows

Designer reviewing engineering's HTML build

Engineering shipped a prototype as HTML/CSS. You want to polish it in Figma before final implementation.

Render the HTML in Chrome (URL, file://, or dev server).
Capture with Export to Figma.
Iterate the design in Figma.
Hand the polished design back to engineering.

This saves the alternative of either (a) screenshotting and rebuilding manually in Figma or (b) editing CSS in DevTools without a proper design tool.

Developer-built Figma library from a React component library

You wrote a React component library. You want a Figma version for designer collaboration.

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

End result: a Figma library that matches your code library exactly — without manually rebuilding every component in Figma.

Studying open-source CSS examples

A CodePen demonstrates a beautiful UI pattern. You want the structure in Figma (minus the animations, which Figma can't represent).

Open the CodePen preview URL in Chrome.
Capture with Export to Figma.
Study the resulting Figma file — sample colors, measure spacing, examine the layer hierarchy.

Converting an AI-generated HTML mockup to Figma

You asked ChatGPT to generate an HTML landing page. The output is reasonable but needs design polish.

Save the AI's HTML to a file.
Render in Chrome.
Capture to Figma.
Polish in Figma (typography, brand colors, spacing).
Hand off the polished Figma to engineering.

The AI got you the first draft fast. Capturing gets it into Figma where the real design work happens.

Why not just paste HTML as an image into Figma?

You can paste HTML into Figma using "Paste as image" — and the result will be a screenshot of the rendered HTML. Useful for reference. Useless for editing.

To get editable Figma frames, you need a tool that reads the DOM and outputs Figma layers, not pixels. That's the difference Export to Figma makes.

For the longer argument, see why screenshots fail as Figma source material.

Pricing for Export to Figma

Free: 10 captures per month, forever.
Pro: $1/month (launch promo) for unlimited.