When should I use html2design for Claude to Figma?

Use html2design when you want a lossless Pixel reference, a best-effort editable capture from a public preview URL, or manual import from a complete HTML document that contains the styles and assets it needs.

Can I import a private Claude Code project without publishing it?

Yes. Figma's official Claude Code workflow can capture local interfaces. With html2design, use manual input from a complete HTML file or self-contained export. Do not paste isolated outerHTML unless the styling is already inline or included with the document.

Claude Design to Figma: HTML Export or Figma MCP

Q: Does Figma have an official Claude Code to Figma workflow?

Yes. Figma documents a Claude Code integration through its Figma MCP server and official Claude plugin. It can send live web interfaces to Figma as editable layers and supports a broader code-to-canvas workflow.

Q: Does Copy outerHTML include computed CSS?

No. Copy outerHTML preserves markup and inline style attributes, but it does not embed styles from external stylesheets, CSS-in-JS runtime sheets, or the browser's computed-style panel. Use public URL capture or export a self-contained HTML document with the required CSS.

Q: Are Claude to Figma results editable?

It depends on the workflow. Figma's official code-to-canvas flow and html2design Editable mode produce editable content where supported. html2design Pixel mode produces lossless raster tiles for visual reference. Fonts, media, complex SVG, canvas, WebGL, and browser-only effects may need cleanup or raster fallback.

Claude Design to Figma:
HTML Export or Figma MCP

Claude Design can export a standalone HTML file. Load that complete file in html2design for best-effort editable layers, capture a public preview when you need Pixel mode, or use Figma's official MCP workflow when the source lives in Claude Code.

What is "Claude to Figma"?

Claude to Figma means moving a Claude-built interface onto the Figma canvas. Claude Design supports exporting a standalone HTML file, which can be loaded into html2design as a complete document. Claude Code has a separate official path through Figma's MCP server, which Figma documents for sending live web interfaces to editable Figma layers.

The important distinction is the input contract. Public URL capture lets a remote browser load the page and record resolved visual output. Manual import only sees the HTML and CSS you supply. Copying an isolated element's outerHTML does not embed external stylesheets or computed CSS values.

Which Claude to Figma method should you use?

Choose by source access and the result you need, not by a promise that every browser feature maps one-to-one.

Method 1 · Claude Design

Export standalone HTML, then load the file

Claude's official Design help lists standalone HTML as an export format. Open the export first and verify that it still renders with its CSS and assets, then load the complete file in html2design. Manual HTML input creates best-effort editable output; Pixel mode is available through public URL capture.

Claude Design export documentation →

Method 2 · Claude Code

Figma MCP with Claude Code

Use Figma's supported integration when the project already lives in Claude Code and you want the official code-to-canvas path. Figma recommends its remote MCP server for the broadest feature set and documents sending a live web interface to Figma as editable layers.

Figma MCP setup documentation →

Method 3 · Public Preview

html2design public URL capture

Use a publicly reachable preview URL when you want html2design's Pixel or Editable modes. Pixel mode imports lossless raster tiles for visual comparison. Editable mode maps supported browser content to native Figma nodes and can rasterize browser-only media or complex visual regions.

Public URL workflow and limits →

How to export Claude Design to Figma with html2design

Validate the source and output mode before importing. This avoids the common unstyled-text failure.

Step 01

Export standalone HTML from Claude Design

In Claude Design, open Export and choose standalone HTML. Keep the exported document and any assets together. For a Claude Code project, use Figma's official MCP workflow instead or publish a preview URL for html2design.

Step 02

Open the export and verify its styles

Open the exported HTML file in a browser. Confirm that typography, colors, images, and layout still render outside Claude Design. If anything is missing, package the required CSS and reachable assets before importing; isolated outerHTML with class names is not a complete visual export.

Step 03

Load the HTML file in html2design

Run html2design in Figma and load the complete HTML file. Manual input creates best-effort editable layers. If the Claude result is publicly hosted and visual matching matters more than editing, use URL Pixel mode instead.

Step 04

Compare and clean up the result

Check typography, image crops, fixed elements, overflow, effects, and responsive state. Treat an editable import as a measured baseline, then align it to your Figma components and design tokens.

What you get in Figma

The result depends on the selected method. Pixel mode is a raster reference; editable workflows map supported content to native nodes.

Supported text layers

Editable mode can create real Figma text layers. Unavailable fonts and differences between browser and Figma text metrics can change wrapping or spacing.

Supported colors & styling

Compatible backgrounds, borders, shadows, gradients, and opacity map to Figma properties. Advanced filters and browser-only effects may need cleanup.

Images and complex media

Images are preserved where accessible. Complex SVG, canvas, video, and WebGL may be rasterized so visible output is not silently dropped.

Measured frame structure

Editable mode recreates supported positions and dimensions as measured frames. Compare the result with the source before using it as a production design artifact.

Frequently asked questions

How do I export Claude Design to Figma?

In Claude Design, choose Export and download standalone HTML. Verify the file in a browser, then load the complete document in html2design. If it is already hosted publicly, URL capture also provides Pixel and best-effort Editable modes.

Does Figma have an official Claude Code to Figma workflow?

Yes. Figma documents an official Claude Code integration through its Figma MCP server and Claude plugin. It can send live interfaces to Figma as editable layers and supports a broader code-to-canvas workflow.

When should I use html2design instead?

Use html2design when you want a lossless Pixel reference, public URL capture inside a Figma plugin, or manual import from a complete HTML document that includes the styles and assets it needs.

Does Copy outerHTML include computed CSS?

No. It preserves markup and inline style attributes, but it does not embed external stylesheets, CSS-in-JS runtime sheets, or values shown in the Computed panel. Use public URL capture or export a self-contained HTML document with the required CSS.

Are Claude to Figma results editable?

Figma's official code-to-canvas flow and html2design Editable mode create editable content where supported. html2design Pixel mode creates raster tiles for visual fidelity.

Can I keep a Claude Code project private?

Yes. Figma's official workflow supports local interfaces. With html2design, manual import stays separate from public URL capture, but the supplied HTML must include the CSS required to render it.