HTML to Figma conversion uses a rendered webpage or a supplied HTML/CSS document to create native Figma nodes for supported text, shapes, images, and measured layout. Public URL capture can record browser-resolved output. Manual input can only compute styles that are included with or reachable from the supplied document.
Why Convert HTML to Figma?
Most design workflows flow one direction: Figma to code. A designer creates components, a developer ships them. But modern teams often need to go the other way — importing existing UI back into Figma to document a component library, hand off a legacy codebase, or sync a live product with its design system.
The manual path is painful. Recreating a single component by hand can take 20–40 minutes. For an entire design system with dozens of states and breakpoints, that's weeks of work just to have a starting point.
html2design addresses this workflow. Copy rendered HTML from browser DevTools, a local dev server, or another source, then paste it into the Figma plugin. Supported content becomes native, editable Figma layers with measured positions and sizes. Review fonts, media, effects, and complex layout against the browser source.
Prerequisites
- A Figma account (free or paid)
- The html2design plugin installed from Figma Community
- An active html2design subscription ($12/mo or $96/yr)
- Any web project to convert — local, staging, or live
Tip: html2design works with any HTML/CSS you can copy — including localhost builds, Storybook components, email templates, and internal tools that never touch a public URL. This is its key advantage over Chrome-extension-based tools.
Step-by-Step: Converting HTML to Figma
Install the html2design plugin
Open Figma and go to the Community tab. Search for html2design or HTML to Figma. Click Install. Once installed, you'll find it under Plugins → html2design in any Figma file.
Prepare a complete HTML and CSS input
For a public page, use the URL workflow so the capture browser can load its CSS and assets. For localhost or private content, export a complete HTML document that includes inline styles, <style> blocks, or reachable stylesheet links.
Copy outerHTML is not a self-contained visual export. It preserves markup and inline style attributes, but external stylesheets, framework-generated CSS, and values shown in the browser's Computed panel are not embedded in that fragment.
Open html2design in Figma
In your Figma file, open the plugin via Main Menu → Plugins → html2design. The plugin panel opens on the right side of the canvas. Make sure you're logged in with your subscription active.
Paste your HTML and convert
In the plugin panel, paste your copied HTML into the input field. Click Convert (or press Cmd+Enter). The plugin processes your markup and generates native Figma layers on the canvas.
For larger components, conversion typically takes 2–5 seconds. For full-page layouts with many elements, give it up to 15 seconds.
Review and clean up the output
Select the generated frame on the canvas. Inspect the layers panel. You'll find:
- Positioned frames preserving the visual layout of Flexbox containers
- Text layers with font, size, weight, and color preserved
- Shape fills matching background colors and borders
- Images resolved from external URLs where accessible
Typical cleanup: rename layers to meaningful names, merge any redundant groups, and swap placeholder fills with your design system's tokens.
Tips for Better Conversions
Inline or package styles for complex layouts
When a component relies on CSS custom properties, CSS Modules, utility classes, or CSS-in-JS, export the generated stylesheet with the HTML or inline the resolved visual properties into the document. Pasting a plain list copied from DevTools' Computed panel is not valid CSS unless you attach those declarations to a selector or style attribute.
Work at the component level, not the page level
Converting an entire page at once produces a large, flat layer tree that's hard to organize. Instead, convert one component at a time — a card, a nav bar, a form — and assemble them in Figma manually. You'll get a cleaner, more maintainable file.
Use Figma's "Detach Instance" for final cleanup
After importing, the output is a standalone frame. If you want to turn it into a reusable component, select the frame and use Create Component (Cmd+Alt+K). Then refine props and variants as you normally would.
Manual import does not require a public URL. Copy or export rendered HTML from localhost:3000, localhost:6006 (Storybook), or another development server, then review external assets and fonts after import.
What Gets Converted — and What Doesn't
html2design handles the vast majority of production UI, but a few things need manual follow-up:
- Flexbox layouts → Best-effort Figma frame placement; compare spacing and alignment with the source
- Typography → Text layers with font, size, weight, line-height (fully supported)
- Colors and borders → Fills, strokes, border radius (fully supported)
- CSS Grid → Approximated with nested frames (partial; positions preserved, no Auto Layout)
- SVG icons and vectors → Imported as vector paths (fully supported)
- Animations and transitions → Static snapshot only; no animation (not converted)
- JavaScript-rendered content → Captured at paste time; dynamic state not tracked
html2design vs. Alternatives
There are a few tools in this space. The main difference is how they access your UI:
- html2design — paste HTML/CSS directly. Works with any source, no extension, no URL access. See pricing.
- html.to.design — browser extension that captures a rendered page state. Local or authenticated access depends on current browser support, permissions, and session state.
- Manual recreation — Slowest but gives you full control. Unavoidable for some edge cases.
For a deeper breakdown, read our full comparison of HTML to Figma tools.
Frequently Asked Questions
Can I convert HTML to Figma for free?
html2design is a paid plugin. Pricing starts at $12/month or $96/year. You can install it from the Figma Community and explore it before subscribing.
Does HTML to Figma work with localhost?
Yes. Export a complete HTML document from localhost, Storybook, or an internal tool and include the generated CSS and assets it requires. Manual input does not require the remote URL service.
Does it preserve CSS Flexbox layouts?
html2design reads the computed positions and sizes from Flexbox containers and recreates them as accurately positioned Figma frames. The visual layout — spacing, padding, and alignment — is preserved. Note that Flexbox containers are converted to fixed-position frames, not Figma Auto Layout. You can apply Auto Layout manually in Figma after import.
What about responsive designs?
html2design converts a static snapshot — what the HTML looks like at the moment you copy it. To capture a mobile layout, resize your browser window to mobile dimensions first, then copy the HTML from DevTools.
Key Takeaways
- ✓ html2design converts HTML/CSS to native Figma layers in 2–15 seconds, versus 20–40 minutes per component manually
- ✓ Supports public URL capture and complete HTML documents from localhost, staging, Storybook, and private sources
- ✓ Maps supported typography, colors, borders, shadows, media, and measured layout to Figma nodes
- ✓ CSS Flexbox and Grid layouts become accurately positioned Figma frames — not Auto Layout
- ✓ Pricing: $12/month or $96/year — unlimited conversions, no watermarks
Related Articles
The Complete Guide to HTML to Figma Conversion (2026) →
The pillar guide covering every framework, every method, and every use case — all in one place.
How to Import a Website into Figma →
Public URL capture and complete HTML input compared, including localhost, staging, and private pages.
How to Convert React Components to Figma Designs →
React renders to HTML — capture any component state from Storybook, Next.js, or localhost and import it directly.
Tailwind to Figma: Build a Design System from Your Tailwind Components →
Convert your Tailwind component library to native Figma layers and manually extract design tokens.
Bootstrap to Figma: A Migration Guide for Bootstrap Teams →
Convert Bootstrap components to Figma — custom theme and utilities preserved. Capture each breakpoint separately.
Use Case: Legacy Migration →
How to rebuild an old website in Figma without starting from scratch. Step-by-step workflow for migrating legacy codebases.
Use Case: Developer Handoff →
Reverse engineer shipped implementations back into editable Figma files to close the gap between code and design.
Try it now
Convert your first component
Install html2design from the Figma Community, paste supplied HTML, and review the resulting editable Figma layers.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime