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.

The product now supports both supplied HTML and direct public URL capture, giving teams separate paths for private sources and deployed pages.

By the numbers

2
Import workflows

Manual HTML for local/private sources and direct URL capture for public pages.

6
Core capabilities

Supported typography, layout, images, SVGs, styles, and structure are recreated as Figma nodes.

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 — computed positions, fonts, colors, and spacing from supported rendered nodes.

  3. 3

    Native Figma layers appear

    Each element becomes a real Figma layer — frames, text nodes, rectangles, and vectors. Supported nodes remain editable and can be reorganized into your design system.

Read the full tutorial Browse common questions on the FAQ page Read user reviews

Why teams use HTML to Figma

Design and engineering teams often face the same problem: the design file falls out of sync with the production codebase. HTML to Figma provides a measured, editable starting point from rendered HTML, which teams can compare with production and refine in Figma.

Unlike screenshot-based tools that flatten your UI into an uneditable image, HTML to Figma creates real Figma layers. Text remains editable text. Colors become Figma fill styles. Spacing becomes actual frame padding. The result is a design file you can work with, not just reference.

The plugin is framework-agnostic. Whether your codebase uses React, Vue, Angular, Svelte, Tailwind CSS, Bootstrap, or plain HTML, the workflow is the same: paste the rendered component HTML, run the plugin, and compare the resulting native Figma layers with the browser source. Fonts, media, effects, and complex layout can still require cleanup.

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