Open-source Figma plugin: turn a local HTML file into nested, editable layers that match the rendered page.
No URL crawling. No subscription. The browser lays it out; Figma gets matching Frames and Text.
If this saves you time, ★ star the repo — it helps others find it.
Browser → Figma import
Needs: Figma desktop + Node 18+
git clone https://github.com/kevicebryan/open-htmltofigma.git
cd open-htmltofigma
npm install && npm run build- Figma → Plugins → Development → Import plugin from manifest… →
manifest.json - Run Open HTML to Figma
- Pick a viewport → upload/paste HTML → Import to Figma
| HTML | Figma |
|---|---|
| Structure, flex/grid layout | Nested Frames at measured positions |
| Colors, linear gradients, borders, shadows | Fills / strokes / effects |
| Text | Editable Text layers |
| SVG / images / complex backgrounds | Image fills (raster when needed) |
Closer match: full document + inline CSS, install page fonts in Figma, same viewport you’d design at. Try examples/.
JS-rendered pages (content built by an inline <script>, not present in the raw HTML): tick Execute page scripts before importing. Off by default — only enable it for HTML you trust, since it lets the page’s own script run.
HTML → isolated browser layout → measure DOM → Frames / Text / images in Figma
Absolute positions from real layout (not Auto Layout rewrite). That’s intentional for visual parity.
Font substitution if faces aren’t in Figma; filters/transforms/masks/animations; CORS images; mixed inline text styles. Unsupported looks fall back to a local raster instead of disappearing.
MIT — see LICENSE.