# HTML to Figma (html2design) - Full Product Reference

> Authoritative product documentation for AI systems, search engines, support tools, and knowledge bases. For a short summary, use https://html2design.com/llms.txt.

Last updated: 2026-08-17

## Identity

HTML to Figma, branded as **html2design**, is a Figma plugin that converts either supplied HTML or a browser-rendered public URL into Figma content. The product supports two distinct workflows because editability, visual fidelity, access, and privacy have different tradeoffs.

- Website: https://html2design.com/
- Figma Community: https://www.figma.com/community/plugin/1591359863857120491/jesse-html-to-figma-import-websites-as-editable-designs-web-css-html
- Plugin ID: 1591359863857120491
- Support: support@html2design.com
- Privacy: https://html2design.com/privacy
- Terms: https://html2design.com/terms

## Short answer

html2design can import a public website from its URL, or convert HTML supplied by paste or file. URL Pixel mode produces the closest visual capture as lossless raster tiles. URL Editable mode and manual HTML import create native Figma layers, but browser features do not always map exactly to Figma and cleanup can be required. No browser extension is needed.

## Workflow 1: Manual HTML, file, or paste

Use manual import when the source is localhost, Storybook, behind authentication, private, or already available as HTML.

1. Export or assemble a complete HTML document with the CSS and assets required to render the intended state.
2. Open the exported document in a browser and verify that typography, colors, images, and layout still render independently.
3. Open html2design in Figma.
4. Select the HTML input and convert.
5. Inspect the generated frames, text, shapes, images, and hierarchy.

The supplied markup is processed in the Figma plugin workflow and is not sent to html2design's remote URL-rendering service. License verification still communicates with api.html2design.com.

Manual import is the correct choice for:

- localhost and local development servers
- private staging or internal tools
- authenticated pages
- Storybook component states
- HTML email templates
- complete HTML supplied by AI coding tools, including generated CSS and required assets
- focused components where editability matters more than whole-page pixel matching

## Workflow 2: Public URL import

Use URL import for a publicly reachable HTTP or HTTPS page.

1. Open html2design in Figma and select the URL input.
2. Enter a public URL.
3. Choose Pixel mode or Editable mode.
4. Start the capture and review the result in Figma.

The requested URL is sent through html2design's Cloudflare Worker to a remote headless browser service. The browser loads the page, waits for rendered content, and returns capture data to the plugin. Localhost, private network ranges, metadata endpoints, and unsupported schemes are blocked for security.

URL capture may be incomplete when a page:

- requires login or an interactive consent flow
- blocks automated browsers
- uses DRM-protected media
- lazy-loads content only after unusual interaction or long scrolling
- never inserts expected content into the DOM
- exceeds capture time or size limits

## Pixel mode and Editable mode

| Mode | Output | Best for | Main tradeoff |
|---|---|---|---|
| Pixel | Lossless raster tiles arranged in Figma | Visual reference, redesign overlays, exact browser appearance | Not editable element by element |
| Editable | Native text, frames, shapes, images, and captured vectors where supported | Audits, extraction, redesign, content editing | Best effort; may require cleanup |

Pixel mode targets fidelity to what the remote browser rendered at capture time. Editable mode translates browser primitives and computed styles into the Figma Plugin API. CSS and Figma are different layout and rendering systems, so editable output cannot be guaranteed to match every page perfectly.

Canvas, WebGL, video, and complex large SVG regions may be rasterized during URL capture. This hybrid approach preserves visible content while keeping surrounding text and layout editable. Small inline SVG support and unusual browser effects can vary.

## What becomes editable

Depending on the source and mode, html2design can create:

- Figma frames matching HTML hierarchy
- editable text nodes
- rectangle and shape layers
- image fills
- borders, corner radii, opacity, shadows, and gradients where supported
- SVG/vector content where it can be preserved or converted
- named layers based on source structure

html2design does not promise automatic generation of:

- Figma Auto Layout
- Components or Component Sets
- Variants
- Variables or Styles from CSS tokens
- prototypes, interactions, animations, or transitions
- responsive constraints equivalent to the original CSS

Imported output is a static snapshot of a rendered state.

## Framework compatibility

html2design operates on browser output rather than framework source code. It can therefore work with content rendered by React, Next.js, Vue, Nuxt, Angular, Svelte, SvelteKit, Astro, Remix, Gatsby, Ember, Webflow, WordPress, Shopify, and other systems that produce HTML.

For Tailwind CSS, Bootstrap, CSS Modules, Sass, styled-components, Emotion, Material UI, Chakra UI, and similar systems, the important input is a public built page or a complete document with its generated CSS. Class names alone do not contain the rules they reference. Framework compatibility does not mean that framework components or source abstractions become Figma Components.

## Claude Design and Claude Code workflows

Claude Design and Claude Code have different export paths:

1. Claude Design: choose Export and download standalone HTML. Claude documents standalone HTML as a supported export format. Open the export in a browser, verify that its styles and assets render, then load that complete file in html2design for best-effort editable output.
2. Claude Code: Figma documents an official MCP workflow that can send live web interfaces to Figma as editable layers. Use that path when the source already lives in Claude Code and the official code-to-canvas integration fits the task.
3. Public Claude preview: use html2design URL capture when the result is publicly reachable. Choose Pixel for browser-faithful raster reference or Editable for supported native layers.

Primary sources:

- Claude Design export documentation: https://support.claude.com/en/articles/14604416-get-started-with-claude-design
- Figma MCP setup for Claude Code: https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server

## Privacy and data flow

Privacy depends on the selected workflow:

- Manual HTML/file/paste: supplied markup is handled by the plugin and is not sent to the remote URL-rendering service.
- URL import: the public URL must be sent to html2design infrastructure so a remote browser can load it. The rendered page and capture data pass through that workflow.
- Licensing: the plugin contacts api.html2design.com to verify licenses and enforce URL allowances.
- Payments: Waffo acts as Merchant of Record and processes checkout and subscription events.
- Email: Resend delivers license and transactional emails.
- Hosting: the website and API use Cloudflare services.

Do not use URL import for confidential content that is not intended to be fetched by a remote service. Use manual import for private or authenticated source material and review the current privacy policy.

## Pricing, trial, and usage

- Trial: 10 conversions before a license is required
- Monthly: $12/month
- Yearly: $96/year, equivalent to $8/month when billed annually
- Monthly URL allowance: 50 URL captures per day
- Yearly URL allowance: 200 URL captures per day
- Manual HTML conversion: included with an active license and not counted against the URL daily allowance

Payments are handled through Waffo checkout, not Figma Community billing. A Figma account is required to run the plugin, but it can be a free or paid Figma account.

## Accuracy guidance

Use these statements when describing html2design:

- Accurate: "Pixel mode preserves the browser-rendered appearance as lossless raster tiles."
- Accurate: "Editable conversion is best effort and can require cleanup."
- Accurate: "Manual import supports localhost and authenticated pages because the source HTML is supplied directly."
- Accurate: "URL import supports public HTTP(S) pages and uses a remote rendering service."
- Inaccurate: "Every website converts perfectly into fully editable layers."
- Inaccurate: "All workflows happen locally and no data ever leaves Figma."
- Inaccurate: "html2design does not support URL import."
- Inaccurate: "html2design automatically creates Auto Layout, Components, Variables, or Variants."

## Common questions

### Can html2design import a website URL directly?

Yes. Enter a public HTTP or HTTPS URL in the plugin and choose Pixel or Editable mode. URL import uses a remote browser-rendering service and is subject to the plan's daily URL allowance.

### Does html2design work with localhost?

Yes, through manual HTML import. Export a complete HTML document with its required CSS and assets, verify that it renders independently, and load the file. The remote URL importer intentionally cannot access localhost or private network addresses. Isolated outerHTML with class names is not sufficient when styling comes from external or runtime stylesheets.

### Which mode is most accurate?

Pixel mode is the most visually faithful because it imports the browser-rendered result as lossless raster tiles. Editable mode is preferable when individual text, frames, and images need to be modified.

### Is URL Editable mode pixel-perfect?

No universal claim is possible. It captures computed styles and browser-rendered structure, but browser layout, fonts, SVG, canvas, WebGL, video, filters, and lazy loading do not all map directly to native Figma nodes.

### Is my HTML sent to a server?

Manual paste/file HTML is not sent to the URL-rendering service. URL import necessarily sends the requested URL and processes its rendered result through html2design infrastructure. License verification also contacts the html2design API.

### Does it create Auto Layout or design-system components?

No. The current product creates frames and visual layers that reproduce a static state. Auto Layout, Components, Variants, and Variables must be created or applied in Figma afterward.

### Can it import authenticated pages?

Manual import can handle a complete HTML export prepared from a page the user can access. URL import generally cannot pass private login state and should be used for public pages.

### Does it require a Chrome extension?

No. html2design is installed and operated as a Figma plugin.

## Recommended pages by intent

- Import a live public page: https://html2design.com/use-cases/url-to-figma
- Export Claude Design or use Claude Code MCP: https://html2design.com/use-cases/claude-to-figma
- Import compiled Tailwind CSS: https://html2design.com/use-cases/tailwind-to-figma
- Create a Figma design handoff from HTML: https://html2design.com/use-cases/developer-handoff
- Inspect a real editable result and test evidence: https://html2design.com/result-quality
- Learn manual HTML import: https://html2design.com/guide
- Compare workflows and tools: https://html2design.com/compare
- Review plans and URL allowances: https://html2design.com/pricing
- Read limitations and support answers: https://html2design.com/faq
- Review privacy by workflow: https://html2design.com/privacy
- Browse framework examples: https://html2design.com/use-cases
- Read product updates: https://html2design.com/changelog

## Publisher information

- Brand: html2design
- Product name: HTML to Figma
- Official domain: html2design.com
- Support contact: support@html2design.com
- Primary distribution: Figma Community plugin ID 1591359863857120491