tofig by acaso
Star Get the plugin

Paste HTML.
Get Figma layers.

Built for the design Claude just generated. tofig rebuilds self-contained HTML as native Figma nodes: real frames, live text, editable vectors. Not a screenshot.

Get it on Figma Community How to install it

One click, no account No network access An open tool by acaso

Frame · profile-card
Group · row
Stack · copy
Ellipse · avatar
Text · name
Ana Moreira
Staff Product Designer
Rect · badge
EDITABLE
Rect · button
View profile
7 nodes· text stays editable· an illustration, not a live session
In Self-contained .html
Locally, in your browser Render → measure → rebuild
Out Native Figma nodes
The reason most people are here

Claude designed it.
Now make it editable.

Claude hands you a finished interface. Screenshot it into Figma and you get a flat picture you cannot touch. tofig gives you the layer tree: every frame, every string, every vector, exactly where Claude put it. Ask it for a deck and each slide lands as a real Figma slide.

Claude to Figma, step by step
In Claude Ask for one self-contained HTML file, inline CSS, no external assets. Copy the source.
In tofig Paste it, or drop the .html. Convert. It runs locally, so nothing is uploaded.
In Figma Named frames, live text, editable vectors. Or real slides, if you opened a Slides file.

Three steps,
no account.

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.

  1. Open tofig

    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.

  2. Paste or drop

    Paste markup straight in, or drop a single .html file. Inline CSS, data: images and inline SVG all come along.

  3. Convert

    You get frames, text you can retype, vectors you can reshape, image fills, gradients, strokes and corner radii, all on the canvas.

One plugin.
Where you run it decides what comes out.

Design file

Frames 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.

Slides file

Real Figma slides

tofig detects decks, including JavaScript-driven ones, and imports each slide as its own Figma slide, sized and scaled to fit rather than clipped. This is where a Claude-generated deck pays off most: one HTML file in, a whole editable deck out.

And, just as importantly,
what doesn't.

These limits are real. Knowing them now is cheaper than discovering them at 2am. Every cell below is live. Poke at it.

Text stays text

Retype it, restyle it, rewrap it. Every string lands as a live Figma text node, mapped to the nearest available weight.

Ana Moreira

Inline SVG becomes vectors

Editable paths on the canvas, not a flattened raster. Drag a handle; these are the same control points you get in Figma.

Fills, gradients, strokes, radii

Rebuilt as native Figma paints and properties, not baked into the pixels. Everything stays a property you can change.

Missing fonts are substituted

If a face isn't loaded in your Figma, text falls back to the nearest match, then Inter. tofig reports exactly what changed.

Sora Light 28

Layout is absolutely positioned

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.

External URLs are never fetched

The plugin declares networkAccess: none. Make your HTML self-contained: inline styles, data: images, inline SVG.

Some files called “HTML”
are really live apps.

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.

This is a sandbox limit, not a bug.

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.

~/exports 
$ npx --package=@aca-so/tofig tofig-render export.html
  › launching local Chrome
  › rendering export.html
  › extracting 248 nodes
  ✓ wrote export.tofig.json · 86 KB

Writes export.tofig.json next to the input. --package= is needed because the binary is named differently from the package.

Put it
on your canvas.

tofig is free on the Figma Community. Installing it is one click from the plugin page: no account, no download, no API key, nothing to configure.

Get it on Figma Community Read the docs

Free and open source Design files and Figma Slides Installs in seconds

  1. Open the plugin page

    On tofig's page in Figma Community, click Open in… and choose the file you want to work in. Figma installs the plugin and runs it right there.

  2. Design file or Slides file

    That is the only decision to make. A Design file gives you frames; a Slides file gives you slides. tofig reads which one you opened.

  3. Reopen it any time

    Right-click the canvas → Plugins → tofig, or click Actions in the toolbar and type tofig. Pressing Save on the Community page keeps it at the top of that list.

Or build it yourself

The whole plugin is on GitHub, MIT licensed. Clone it, run npm run build, then use Plugins → Development → Import plugin from manifest… in the Figma desktop app.

Renderer CLI

npm install -g @aca-so/tofig

Published as @aca-so/tofig. Only needed for exports the plugin sandbox can't run.