Frequently Asked Questions

Quick Answer: HTML to Figma (html2design) is a Figma plugin that converts HTML and CSS code into native, editable Figma layers — paste raw HTML from DevTools and get editable frames in seconds. No Chrome extension or live URL required.

You paste raw HTML into the plugin — copied from a live website, a local dev server, or a static file — and it generates Figma frames, text nodes, and rectangles that match the browser's computed layout. Every layer is fully editable in Figma without any plugin dependency.

No Chrome extension or live URL is required. It is used by over 2,000 designers and developers to bridge the gap between production code and design files.

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 under Main Menu → Plugins → html2design inside any Figma file. Installation takes under 30 seconds.

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, non-editable image. html2design produces native Figma layers — frames, text nodes, rectangles, and vector shapes — that are fully editable in Figma. You can change text, recolor shapes, resize frames, move layers, and connect the result to your design system.

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.

html.to.design uses a Chrome extension to capture a live URL from the browser. html2design works by pasting raw HTML directly into the Figma plugin — no Chrome extension, no live URL, no network access required.

This means html2design works on localhost, Storybook, auth-gated pages, and any HTML you can copy from DevTools — including cases where html.to.design cannot access the page. See the full alternatives comparison →

Use html2design whenever the production HTML and CSS already exist and you need an accurate Figma representation. A component that takes 20–40 minutes to recreate manually converts in under 30 seconds with html2design. A full page section that would take 2–4 hours converts in under a minute.

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: No. All HTML processing happens locally inside the Figma Plugin API sandbox — no user HTML is ever sent to external servers.

The html2design plugin runs entirely inside the Figma Plugin API sandbox. This makes html2design safe to use with confidential internal tools, private staging environments, auth-gated pages, and proprietary source code.