Convert HTML to editable Figma layers. No plugin needed, just paste.
import { createFigmaConverter } from "@figit/dom-to-figma";
const figma = createFigmaConverter();
const result = await figma.convert({
element: document.getElementById("design"),
width: 1280,
height: 800,
name: "Hero",
});
await navigator.clipboard.write([result.toClipboardItem()]);Paste in Figma with Cmd+V / Ctrl+V. Done.
Walks a real DOM tree, reads computed styles, and produces what Figma reads on paste. Text becomes editable text; images, vectors, gradients, shadows, borders, and form placeholders all carry over. Layouts arrive as native Figma auto-layout by default — flex, block flow, wrap, and grid become real stacks, with per-container fallback to absolute positioning when a layout can't be reproduced exactly. Opt out with createFigmaConverter({ layout: "absolute" }).
Used in production by Sleek to copy generated designs straight from the browser into Figma.
| Package | Version | Description |
|---|---|---|
@figit/dom-to-figma |
 |
Convert any DOM tree to a Figma clipboard payload. |
See the dom-to-figma README for the full API: customizing font/image loaders, multi-frame canvases, and DOM-to-node classification.
pnpm add @figit/dom-to-figmaSee CONTRIBUTING.md.
MIT — Figit.
Not affiliated with or endorsed by Figma.