Are the imported Claude designs editable in Figma?

Yes. The import produces native Figma layers, not a screenshot or a flat image: editable text layers with the correct font, size and weight; vector paths for SVG icons; image fills; and frames with measured dimensions and spacing. You can refine everything in Figma immediately after import.

Claude to Figma — Turn Claude-Generated UI Into Figma Layers

Q: How do I convert a Claude-generated design to Figma?

Open the UI Claude produced in a browser — the live Artifact preview on claude.ai, or a Claude Code project running on a local dev server. Open DevTools (F12), go to the Elements panel, right-click the root element, and choose Copy > Copy outerHTML. Paste that HTML into the html2design Figma plugin and click Generate. Claude writes standard HTML and CSS, so the browser resolves every style to a computed value that the plugin converts to native, editable Figma layers — text, fills, and measured frames.

Q: Does this work with Claude Artifacts?

Yes. A Claude Artifact is a live, rendered HTML/React preview. Open the Artifact, open browser DevTools, and copy the outerHTML of the rendered preview (or use the Artifact's built-in option to open it in a new tab, then copy from there). Paste it into html2design. Because the Artifact is already rendered by the browser, all of its computed CSS — colors, spacing, typography — transfers accurately to Figma.

Q: Does this work with Claude Code output?

Yes. Claude Code typically scaffolds a real web project (HTML, React, Vue, or plain CSS). Run the project locally with its dev command, open the page in a browser, and copy the rendered HTML from DevTools. html2design reads the browser-computed result, so the framework Claude used does not matter — only the rendered output does.

Q: Why convert Claude output to Figma instead of keeping it as code?

Claude is excellent at generating a first working UI, but design refinement, design-system alignment, stakeholder review, and handoff still happen in Figma. Bringing Claude's HTML into Figma as editable layers lets a team iterate on the AI-generated starting point with their existing design tooling instead of rebuilding it by hand.

Claude to Figma —
AI Design, Made Editable

Claude just designed your UI. Artifacts, Claude Code, and Claude in your IDE all produce real HTML & CSS — and the browser resolves it to computed styles before html2design ever reads it. Copy the rendered HTML, paste into the plugin, and get native, editable Figma layers in under two minutes.

What is "Claude to Figma"?

"Claude to Figma" is the workflow of taking UI that Anthropic's Claude generated — an interactive Artifact on claude.ai, a project built with Claude Code, or markup produced by Claude inside an editor — and importing it into Figma as editable design layers. Claude writes ordinary HTML, CSS, and (often) React. Whatever the framework, the browser compiles it to computed styles before rendering. html2design reads those computed styles, so the import is completely model- and framework-agnostic.

This is the bridge between the AI design era and your existing design tooling: Claude produces a strong first version fast, and html2design brings it into Figma so a team can refine, review, and ship it with the tools they already use — instead of rebuilding the AI output by hand.

Why Claude output imports cleanly

Claude's output is standard web markup, which is exactly what the browser-based import approach is built for.

Claude writes real HTML & CSS, not a proprietary format

Whether Claude returns plain HTML, Tailwind classes, or a React component, the result is rendered by the browser into a standard DOM with computed styles. html2design reads those resolved values — colors, font metrics, spacing, dimensions — and rebuilds them as Figma layers. There is no AI-specific integration to maintain.

Artifacts are already rendered — copy and go

A Claude Artifact is a live preview the browser has already painted. That means every style is computed and ready: open DevTools on the Artifact, copy the outerHTML, and paste. No build step, no export pipeline.

SVG icons import as vector paths

Claude frequently inlines SVG icons and illustrations. html2design imports inline SVG as native Figma vector paths — not rasterized images — so the AI-generated iconography stays crisp and editable at any size.

Private by design — your code is parsed locally

The plugin parses your pasted HTML/CSS locally inside Figma. Your Claude-generated code is not uploaded to a server for conversion — useful when the UI is an unreleased product or internal tool.

The Claude to Figma workflow

Four steps, under two minutes. Works for Artifacts, Claude Code, and Claude-in-IDE output.

Step 01

Render the Claude UI in a browser

For an Artifact: open it on claude.ai (or use the Artifact's "open in new tab" option) so it is fully rendered. For Claude Code output: run the project's dev command (npm run dev or equivalent) and open the page. For a single HTML file Claude produced, just open the file in a browser.

Step 02

Copy the rendered HTML from DevTools

Open DevTools (F12), switch to the Elements panel, right-click the <body> or the top-level wrapper of the design, and choose Copy > Copy outerHTML. Wait until fonts and images have finished loading so the captured render is complete.

Step 03

Paste into html2design and generate

In Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. The plugin reads each element's computed style and creates native Figma objects: text layers with the right typeface and size, fills with exact colors, vector paths for SVGs, and frames with measured dimensions and spacing.

Step 04

Refine the AI starting point in Figma

You now have an editable, pixel-accurate frame of Claude's design. Adjust copy, restyle, align it to your design system, register recurring colors as Figma styles, and prepare it for review and handoff — all with your existing Figma workflow, on top of the AI-generated draft.

What you get in Figma

Every import creates native Figma objects that mirror the rendered Claude output — not a screenshot.

Editable text layers

Every piece of Claude-generated copy becomes a real Figma text layer with the computed font family, size, weight, line height, and color — ready to edit, not flattened into an image.

Exact colors & styling

Backgrounds, borders, shadows, and gradients resolve to the precise computed values Claude's CSS produced, applied as Figma fills, strokes, and effects.

SVG icons as vector paths

Inline SVGs Claude generated import as editable Figma vector paths, staying sharp and recolorable at any scale.

Pixel-accurate frame structure

Layout, spacing, and sizing are recreated as measured Figma frames that match exactly what the browser rendered from Claude's markup.

Frequently asked questions

How do I convert a Claude-generated design to Figma?

Open the UI Claude produced in a browser (the live Artifact, or a Claude Code project on a dev server), open DevTools, right-click the root element, choose Copy > Copy outerHTML, and paste into the html2design Figma plugin. Claude writes standard HTML/CSS, so it transfers as pixel-accurate, editable Figma layers.

Does this work with Claude Artifacts?

Yes. An Artifact is a live, browser-rendered preview. Copy its outerHTML from DevTools and paste it into html2design — every computed style transfers because the browser has already rendered it.

Does this work with Claude Code output?

Yes. Run the Claude Code project locally, open the page, and copy the rendered HTML. html2design reads the browser-computed result, so the framework Claude chose does not matter.

Are the imported designs editable in Figma?

Yes — native editable text layers, vector paths for SVGs, image fills, and measured frames. It is not a screenshot or a flat image.

Why convert Claude output to Figma instead of keeping it as code?

Claude generates a strong first version; design refinement, design-system alignment, review, and handoff still happen in Figma. Importing the AI output as editable layers lets your team iterate on it with existing tooling instead of rebuilding by hand.