About

HTML to Figma

The code-to-design plugin that converts HTML and CSS into native, editable Figma layers — so designers and developers can stop recreating work by hand.

Our mission

Eliminate the time developers and designers spend rebuilding existing UI in Figma. Every hour spent recreating a production component by hand is an hour not spent improving it.

The story

HTML to Figma was built out of a recurring frustration: a production website exists, but the Figma file doesn't. Recreating it manually takes hours — and it's never quite right. Computed styles, spacing, and font rendering all diverge slightly from what the browser actually renders.

The insight was simple: the browser already knows the answer. Every DOM node has computed styles for position, size, font, color, and spacing. HTML to Figma reads those values directly from the browser's rendering engine and maps them to equivalent Figma properties — frames, text, rectangles, vectors — without any manual approximation.

Since launching in 2024, over 2,000 designers and developers have used HTML to Figma to bridge the gap between their codebase and their design files.

By the numbers

2,000+
Active users

Designers and developers using HTML to Figma across Figma Community.

6
Core capabilities

Typography, layout, images, SVGs, styles, and structure — all converted natively.

Any CSS
Framework support

Works with React, Tailwind, Bootstrap, plain CSS, or any HTML the browser renders.

How it works

  1. 1

    Paste your HTML

    Open the plugin inside Figma and paste any HTML — from a live component, a local build, or a static file. No live URL or browser extension required.

  2. 2

    The plugin reads computed styles

    HTML to Figma renders the HTML in a sandbox and reads the browser's computed styles — exact pixel positions, fonts, colors, and spacing — from every DOM node.

  3. 3

    Native Figma layers appear

    Each element becomes a real Figma layer — frames, text nodes, rectangles, and vectors. Fully editable, properly named, and ready to use in your design system.

Read the full tutorial

Built by developers, for designers

Jesse — Creator of HTML to Figma

HTML to Figma was created by Jesse, a developer who spent too many hours manually rebuilding production UI in Figma. The plugin started as an internal tool and became a product used by thousands of design and engineering teams worldwide.

View on Figma Community

Try HTML to Figma

Install the plugin from Figma Community and convert your first component in minutes.

Get the Figma Plugin Contact us