tofig rebuilds self-contained HTML as native Figma nodes: real frames, live text, editable vectors. Not a screenshot.
No network access MIT licensed An open tool by acaso
.html
The plugin UI is a real browser. It renders your HTML in a hidden iframe, reads the computed styles and geometry, and rebuilds each element as a native node.
In a Figma Design file or a Figma Slides file. tofig reads
figma.editorType and targets the right output automatically.
There is no mode to pick.
Paste markup straight in, or drop a single .html file.
Inline CSS, data: images and inline SVG all come along.
You get frames, text you can retype, vectors you can reshape, image fills, gradients, strokes and corner radii, all on the canvas.
Each captured root becomes its own frame, clipped to its bounds so an overflowing child stays inside the artboard instead of hanging behind it. A multi-section page arrives as one frame per section.
tofig detects decks, including JavaScript-driven ones, and imports each slide as its own Figma slide, sized and scaled to fit rather than clipped.
These limits are real. Knowing them now is cheaper than discovering them at 2am. Every cell below is live. Poke at it.
Retype it, restyle it, rewrap it. Every string lands as a live Figma text node, mapped to the nearest available weight.
Editable paths on the canvas, not a flattened raster. Drag a handle; these are the same control points you get in Figma.
Rebuilt as native Figma paints and properties, not baked into the pixels. Everything stays a property you can change.
If a face isn't loaded in your Figma, text falls back to the nearest match, then Inter. tofig reports exactly what changed.
Chosen for visual fidelity. Auto-layout is on the roadmap; today you get pixel-accurate placement, not responsive constraints.
Every node carries x · y · w · h. Hover one.
The plugin declares networkAccess: none. Make your HTML
self-contained: inline styles, data: images, inline SVG.
They boot a React runtime, pull Babel from a CDN, or reach for
localStorage. Figma's plugin sandbox blocks all of that, so they
can't render inside the plugin.
No network and a data:-URL origin are exactly what make the
plugin safe to run on untrusted markup. The workaround keeps that property.
Render the file in a real, unrestricted Chrome on your own machine, then
import the result. Same extractor, same output, just a browser without the
sandbox. Drop the resulting .tofig.json into the plugin and it
imports directly.
Requires a local Google Chrome or Chromium. Still fully local: nothing is uploaded, by tofig or by acaso.
$ npx --package=@aca-so/tofig tofig-render export.html
› launching local Chrome
› rendering export.html
› extracting 248 nodes
✓ wrote export.tofig.json · 86 KBWrites export.tofig.json next to the input.
--package= is needed because the binary is named differently
from the package.
The plugin is published to the acaso organization in Figma. The renderer is a separate, optional CLI.
Open any Design or Slides file, then find
tofig under your organization's plugins. Building from source works too: clone
the repo, run npm run build, and import the manifest.
npm install -g @aca-so/tofigPublished as @aca-so/tofig. Only needed for exports the plugin sandbox can't run.