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. Import its static HTML and CSS for best-effort editable layers, use Pro URL capture for a preview that renders while signed out, or use Figma's official MCP workflow for a Claude Code project.

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 renders static HTML and CSS without executing source scripts. 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. Manual import needs visible content in the markup, included CSS, and embedded or reachable absolute asset URLs; source scripts do not run. It creates best-effort editable layers, with 10 manual HTML trial conversions.

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

URL capture requires Pro. Open the preview in a signed-out browser first. If Claude asks you to sign in, use static HTML export or a separately hosted public preview instead. Choose Pixel for a raster reference or Editable for best-effort native layers, enter the public HTTP(S) URL, then click Fetch; it imports directly. Signed-out access is a prerequisite, not a guarantee of capture fidelity.

A shared Claude link is not necessarily public. See Claude's official sharing and sign-in requirements.

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. Use the HTML file, not a project ZIP or folder. For a JavaScript-rendered Claude Code project, export a static snapshot, use Figma's official MCP workflow, or host a signed-out public preview.

Step 02

Verify static content, CSS, and assets

Visible content must already be in the HTML; html2design does not execute source scripts. Include CSS in the document or at reachable absolute URLs; embed images or use reachable absolute image URLs. Selecting the HTML file does not upload neighboring assets. A correct browser preview alone is not enough.

Step 03

Load the HTML file in html2design

Run html2design in Figma. Use Choose File for a .html/.htm file or paste the static HTML, then click Import. The trial includes 10 manual HTML conversions with best-effort editable layers. Pixel capture is available only through the Pro URL path and its Fetch button.

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 that visible content is in the markup, with CSS included or at reachable absolute URLs and images embedded or at reachable absolute URLs. Source scripts are not executed, and neighboring files are not uploaded. In html2design, use Choose File, then Import; the trial includes 10 manual HTML conversions. Pro URL capture uses Fetch with Pixel or Editable mode after checking signed-out access.

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 Pro URL capture for a Pixel raster reference or best-effort editable layers from a page that renders while signed out. Use manual import for static HTML with its CSS and embedded or reachable absolute asset URLs; the trial includes 10 manual HTML conversions.

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, import static HTML with embedded CSS and assets, or use reachable absolute asset URLs. Source scripts are not executed, and selecting the HTML file does not upload neighboring files. A sign-in-protected Claude share link is not a public capture URL.