# HTML to Figma (html2design)

> html2design is a Figma plugin for importing pasted HTML or a public website URL into Figma. It offers editable native layers and a lossless Pixel mode for URL captures.

Last updated: 2026-08-17

## Product facts

- Product: HTML to Figma, branded as html2design
- Type: Figma plugin; no browser extension is required
- Figma plugin ID: 1591359863857120491
- Monthly plan: $12/month
- Yearly plan: $96/year
- Trial: 10 conversions before a license is required
- URL allowance: 50 captures/day on Monthly; 200 captures/day on Yearly
- Support: support@html2design.com

## Two import workflows

### Manual HTML import

Paste HTML or load an HTML file. This workflow processes only the document supplied inside the Figma plugin. For localhost, Storybook, private staging pages, and authenticated applications, provide a complete HTML document with the CSS and assets required to render it. Isolated outerHTML preserves markup and inline styles, but it does not embed external stylesheets, runtime CSS, fonts, or computed values shown in DevTools.

Manual import creates native Figma frames, text, shapes, images, and a layer hierarchy. It is best for editable output. CSS layouts are reproduced with fixed positioning; html2design does not automatically generate Figma Auto Layout, Components, Variants, Variables, or interactions.

### Public URL import

Enter a public HTTP or HTTPS URL directly in the plugin. The URL is sent through html2design's Cloudflare Worker to a remote browser-rendering service. Private network addresses, localhost, and unsupported URL schemes are blocked.

URL import has two modes:

- Pixel mode: creates lossless raster tiles of the rendered page. This is the highest-fidelity option, but the page is not editable element by element.
- Editable mode: extracts text, layout, images, SVG content, and computed visual styles into Figma layers. It is best effort because browsers and Figma use different rendering models.

Canvas, WebGL, video, and complex large SVG content may be rasterized in URL captures while surrounding text and layout remain editable. Pages that require login, defeat automated browsers, use DRM, or never load content into the DOM may be incomplete.

## Privacy and network behavior

- Manual HTML/file/paste conversion stays within the Figma plugin workflow; the supplied HTML is not sent to html2design's URL-rendering service.
- URL import necessarily sends the requested URL to html2design's Worker and remote rendering service so a browser can load and capture it.
- License verification communicates with api.html2design.com.
- Payments are processed by Waffo, the Merchant of Record. License emails are delivered through Resend.
- Full policy: https://html2design.com/privacy

## Supported inputs

- Public websites through URL import
- Complete HTML exports from React, Next.js, Vue, Nuxt, Angular, Svelte, Astro, Remix, and other web frameworks
- Tailwind CSS, Bootstrap, CSS-in-JS, CSS Modules, Sass output, and plain CSS when the generated CSS is included or reachable
- Localhost, Storybook, authenticated pages, and private tools through manual HTML import
- Static HTML files and pasted HTML/CSS

## Accuracy boundaries

- Pixel mode targets visual fidelity to the browser-rendered capture.
- Editable mode prioritizes useful native layers and may require cleanup.
- Font availability, browser-only effects, animation state, cross-origin restrictions, lazy loading, and Figma API limitations can affect results.
- Imported text and layout are static snapshots; animations and interactive behavior are not recreated.
- Claims of perfect editable conversion for every website are not accurate.

## Claude Design and Claude Code

- Claude Design can export standalone HTML. Verify the exported file in a browser, then load the complete document in html2design for best-effort editable output: https://support.claude.com/en/articles/14604416-get-started-with-claude-design
- Claude Code also has an official Figma MCP workflow for sending live web interfaces to Figma as editable layers: https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server
- html2design public URL capture remains useful when a Claude-built preview is publicly reachable and Pixel mode or an independent Editable comparison is needed.

## Primary pages

- [Website](https://html2design.com/): Product overview
- [URL to Figma](https://html2design.com/use-cases/url-to-figma): URL workflow, modes, limits, and troubleshooting
- [Claude Design to Figma](https://html2design.com/use-cases/claude-to-figma): Standalone HTML export, public preview, and official Claude Code MCP paths
- [Tailwind CSS to Figma](https://html2design.com/use-cases/tailwind-to-figma): Public build or complete HTML with compiled Tailwind CSS
- [Figma design handoff from HTML](https://html2design.com/use-cases/developer-handoff): Versioned browser-state review workflow
- [Output quality](https://html2design.com/result-quality): Real browser-to-Figma comparison, visible differences, and current automated test coverage
- [Guide](https://html2design.com/guide): Manual HTML workflow
- [Pricing](https://html2design.com/pricing): Plans, trial, and URL allowances
- [FAQ](https://html2design.com/faq): Product questions and limitations
- [Comparison](https://html2design.com/compare): html2design and alternative workflows
- [Use cases](https://html2design.com/use-cases): Framework and workflow directory
- [Privacy](https://html2design.com/privacy): Data handling by workflow
- [Changelog](https://html2design.com/changelog): Product changes
- [Full LLM documentation](https://html2design.com/llms-full.txt): Expanded technical reference

## Official links

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