Does HTML to Figma preserve CSS Flexbox as Figma Auto Layout?

Yes. The html2design plugin maps CSS flexbox properties to Figma's native Auto Layout system, preserving direction, gaps, padding, and alignment.

What is the difference between html2design and html.to.design?

html2design is a code-first plugin — you paste HTML/CSS directly, no Chrome extension required. html.to.design uses a browser extension to capture a live page. See our full comparison at html2design.com/compare.

How to Convert HTML to Figma: A Developer's Guide (2026)

Q: Can I convert HTML to Figma for free?

HTML to Figma (html2design) is a paid plugin starting at $12/month or $96/year. You can install it from the Figma Community and try it before subscribing.

Q: Does HTML to Figma work with localhost?

Yes. Because html2design works by pasting raw HTML/CSS directly into the Figma plugin panel, it works with any source — including localhost dev servers, staging environments, and live URLs. No Chrome extension or URL access is needed.

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 solves this. You copy HTML and CSS — from DevTools, a local dev server, or any source — paste it into the Figma plugin, and get back native, editable Figma layers. Flexbox becomes Auto Layout. Tokens become styles. What took an hour now takes thirty seconds.

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

Step 1

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.

Step 2

Open DevTools and copy the HTML

Navigate to the element you want to convert. In Chrome or Firefox, right-click the element → Inspect. In the Elements panel, right-click the root node of your component → Copy → Copy outerHTML.

For styles, you can optionally copy the associated CSS rules. html2design reads inline styles, CSS classes from stylesheets, and computed styles. Most of the time, copying outerHTML is enough — the plugin resolves linked stylesheets automatically.

<div class="card" style="...">
  <h2>Card Title</h2>
  <p>Some description text here.</p>
  <button>CTA</button>
</div>

Step 3

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.

Step 4

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.

Step 5

Review and clean up the output

Select the generated frame on the canvas. Inspect the layers panel. You'll find:

Auto Layout frames wherever CSS Flexbox was used
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

Use computed styles for complex layouts

When a component relies on CSS custom properties (variables) or complex cascade, the plugin may not resolve all values from raw HTML alone. In DevTools, switch to the Computed tab, select all styles (Cmd+A), and copy those instead. Paste them alongside your HTML in the plugin.

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.

Localhost works fine. html2design doesn't need to reach your URL — it just processes the HTML string you paste. This means it works perfectly with localhost:3000, localhost:6006 (Storybook), or any dev server you can't expose publicly.

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 → Figma Auto Layout (fully supported)
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 Auto Layout frames (partial)
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 — Chrome extension captures a live page in your browser. Easier for public pages, but can't access localhost or gated environments.
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 — because you paste raw HTML/CSS rather than giving the plugin a URL, it works with localhost, Storybook, internal tools, and any environment you can open in a browser. No Chrome extension or network access required.

Does it preserve CSS Flexbox as Figma Auto Layout?

Yes. The html2design plugin maps display: flex, flex-direction, gap, padding, and align-items to the equivalent Figma Auto Layout properties. This is one of its strongest features.

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.

How to Import a Website into Figma →

Two methods compared: Chrome extension vs code paste. Covers localhost, staging, and auth-gated 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 →

Extract tokens as Figma Variables and convert your component library to native Figma layers.

Try it now

Convert your first component in 30 seconds

Install html2design from the Figma Community. Paste any HTML. Get editable Figma layers instantly.

Install from Figma Community →

$12/mo · $96/yr · Cancel anytime

← Back to Blog