Frequently Asked Questions

Quick Answer: html2design imports supplied HTML or a public website URL into Figma. Choose editable layers or a lossless Pixel capture without a Chrome extension.

You paste supplied HTML into the plugin — copied from a website, local dev server, or static file — and it creates native frames, text nodes, shapes, and images for supported content. Review fonts, effects, image crops, and layout after import.

Use manual import for localhost and private source, or direct URL import for a public page. Compare Pixel and Editable URL modes →

Read the full guide →

Open Figma and go to the Community tab (or visit the Figma Community page for html2design). Search for html2design or HTML to Figma. Click Install.

The plugin then appears in Figma's plugin menu for supported files and accounts.

html2design reads computed CSS values from the browser's rendering engine, including background colors and gradients, border colors, border radius, box shadows, opacity, font family, font size, font weight, line height, letter spacing, text alignment, text decoration, padding, margin, width, height, and absolute position.

Because it reads resolved values rather than source CSS, all CSS methodologies are supported: plain CSS, CSS Modules, CSS-in-JS, Tailwind, Bootstrap, Sass, and any other approach that compiles to standard CSS.

Yes. All major frontend frameworks compile to standard HTML and CSS in the browser. The process is the same regardless of framework: render the component in a browser, open DevTools, right-click the element → Copy → Copy outerHTML, paste into html2design. No source code changes are required.

This also applies to Next.js, Nuxt, Remix, Astro, and any other framework that outputs standard HTML. See specific guides for React and Tailwind + React.

Yes. Tailwind utility classes compile to standard CSS before the browser renders them. When you copy a component's outerHTML from DevTools, all computed styles are included — your custom colors from tailwind.config.js, spacing scale values, shadows, and responsive variants. html2design reads those resolved values, not the class names.

Read the Tailwind to Figma guide →

Quick Answer: Yes — html2design works with localhost because you paste raw HTML rather than providing a URL. No proxy, tunnel, or network configuration required.

It works with any local development server: localhost:3000, localhost:8080, localhost:6006 (Storybook), Vite dev server, Next.js dev server, or any other local environment.

In Chrome DevTools, right-click the element in the Elements panel → Force State → :hover (or :focus, :active, :visited). The browser applies the state styles. Copy outerHTML in that state and paste into html2design.

Each state becomes a separate Figma frame. Select all frames, right-click → Create Component Set to create a Figma Component with Variants.

html2design is often used in reverse-handoff workflows: a developer imports the production UI into Figma so a designer can refine it, document it, or migrate it to a design system.

Typical workflow: (1) developer copies outerHTML of the live component, (2) pastes into html2design, (3) the resulting Figma frame becomes the source of truth for the designer's review. This eliminates manual recreation and ensures the Figma file reflects what is actually in production. See the developer handoff use case for a detailed walkthrough.

A screenshot produces a flat image. html2design Editable mode creates native Figma layers for supported frames, text, shapes, and images. Those nodes can be changed in Figma; unsupported effects and browser behaviors can require cleanup or raster fallback.

Screenshots cannot be edited at all; html2design imports are a starting point for design work. See the comparison page for a full breakdown.

Quick Answer: Figma Dev Mode goes Figma → code (helps developers read design specs). html2design goes code → Figma (imports production HTML into Figma). They work in opposite directions and solve different problems.

Figma Dev Mode helps developers read Figma designs (inspect measurements, copy CSS). html2design does the opposite — it imports production code into Figma so designers can work with it. Dev Mode requires a designer-created Figma file to exist first; html2design creates that Figma file from existing code when no design file exists.

html2design requires no Chrome extension and supports both manual HTML and direct public URL import. URL capture offers lossless Pixel mode and best-effort Editable mode.

Manual import still covers localhost, Storybook, authenticated pages, and HTML copied from DevTools. See the full alternatives comparison →

Use html2design when production HTML already exists and an import plus cleanup requires less work than rebuilding. Conversion time and cleanup vary by DOM size, fonts, images, effects, and desired output.

Main use cases: documenting existing UI, building a design system from a live codebase, keeping Figma files in sync with production, and reviewing code changes as a designer.

Quick Answer: Manual HTML import and URL import have different data flows.

Manual paste/file import does not send supplied markup to the remote URL renderer. Direct URL import sends the requested public URL through html2design infrastructure so a remote browser can capture it. Read the privacy policy for details.