html2figmaHTML & CSS → Figma
Web content.Figma layers.
Convert HTML & CSS into editable text, images, and vectors.
npm install html2figma01WebpageHTML + CSS
02Convert to JSONCaptured layers
Loading preview…
Select a layer to locate it in the webpage.
Loading preview…
Examples
View all 6 examples →Conversion details
How a webpage becomes layers.
Inspect the webpage, captured layers, and their JSON.
Browser input
The webpage
Render HTML & CSS.
A real HTML and CSS example, rendered in the browser.
<p class="kicker">SMALL PARTS. NEW POSSIBILITIES.</p>
<h2>Made to stay editable.</h2>
<p class="copy">
Bring text, shapes and vector details into a canvas you can keep working on.
</p>Preparing the real example…
Try this exampleAdd it to your project.
Call convert in the browser, then render in a Figma plugin.
Browser→JSON→ Figma
Read the integration guide →01 / BROWSERconvert API ↗
import { convert } from 'html2figma/convert';
await document.fonts.ready;
const documentAst = convert(document.body);02 / FIGMA PLUGINrender API ↗
import { render } from 'html2figma/render';
await render(documentAst, {
parent: figma.currentPage
});Open the result in Figma.
Copy JSON and paste it into the plugin to create layers.