{"_id":"@aca-so/tofig","name":"@aca-so/tofig","dist-tags":{"latest":"0.3.1"},"versions":{"0.3.1":{"name":"@aca-so/tofig","version":"0.3.1","description":"Convert HTML (e.g. Claude designs) into native Figma designs or Slides","license":"MIT","author":{"name":"acaso","url":"https://aca.so"},"homepage":"https://github.com/aca-so/tofig#readme","repository":{"type":"git","url":"git+https://github.com/aca-so/tofig.git"},"bugs":{"url":"https://github.com/aca-so/tofig/issues"},"keywords":["figma","figma-plugin","html-to-figma","code-to-design","figma-slides"],"bin":{"tofig-render":"bin/tofig-render.mjs"},"publishConfig":{"access":"public"},"scripts":{"build":"node esbuild.mjs","watch":"node esbuild.mjs --watch","render":"node bin/tofig-render.mjs","typecheck":"tsc --noEmit -p tsconfig.json","lint":"eslint ."},"dependencies":{"@builder.io/html-to-figma":"^0.0.3","esbuild":"^0.25.0","puppeteer-core":"^23.11.1"},"devDependencies":{"@eslint/js":"^10.0.1","@figma/plugin-typings":"*","eslint":"^10.5.0","globals":"^17.7.0","typescript":"^5.9.3","typescript-eslint":"^8.62.0"},"gitHead":"70bf064f93d8ed8e78e63e7e71e9e42ac8b946aa","_id":"@aca-so/tofig@0.3.1","_nodeVersion":"26.4.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-dh5Ot9cUOSvKSGUGJVd54jjfTHpL17IYppVqD5dMqHg4+BflQ1EBOwUw5IxsldpPsynimOJA9VPoM8h9A0sa9g==","shasum":"430a143df6de705cf3aee1da24e3366588b55144","tarball":"https://registry.npmjs.org/@aca-so/tofig/-/tofig-0.3.1.tgz","fileCount":21,"unpackedSize":230559,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF2zO/PJZZXLnrYSRcOWUdusdWg08bKh1ZYi1CLIRJ5CAiEA9otebmEIClmMKkZwSLkl0zt3JvwucnxJlIPx43nSgP0="}]},"_npmUser":{"name":"tiagobmoraes","email":"tiago3902@gmail.com"},"directories":{},"maintainers":[{"name":"tiagobmoraes","email":"tiago3902@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tofig_0.3.1_1785189555186_0.27122269116727704"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-27T21:59:15.029Z","0.3.1":"2026-07-27T21:59:15.354Z","modified":"2026-07-27T21:59:15.556Z"},"maintainers":[{"name":"tiagobmoraes","email":"tiago3902@gmail.com"}],"description":"Convert HTML (e.g. Claude designs) into native Figma designs or Slides","homepage":"https://github.com/aca-so/tofig#readme","keywords":["figma","figma-plugin","html-to-figma","code-to-design","figma-slides"],"repository":{"type":"git","url":"git+https://github.com/aca-so/tofig.git"},"author":{"name":"acaso","url":"https://aca.so"},"bugs":{"url":"https://github.com/aca-so/tofig/issues"},"license":"MIT","readme":"# tofig\n\n> Export HTML and other formats — such as Claude-generated designs — to Figma.\n\n[![CI](https://github.com/aca-so/tofig/actions/workflows/ci.yml/badge.svg)](https://github.com/aca-so/tofig/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)\n\nConvert **self-contained HTML** (a Claude design, or any single `.html` file) into\n**native, editable Figma layers** — as a Design (frames) or as Figma **Slides**.\n\nAn open-source take on the \"HTML → Figma\" direction: you author in HTML, tofig\nrebuilds it as real Figma nodes (frames, text, vectors, gradients, image fills).\nNo server, no browser extension, no account — just a Figma plugin.\n\n## How it works\n\nThe plugin's UI is a real browser, so it renders your HTML in a hidden iframe,\nextracts computed styles + geometry (via the MIT `@builder.io/html-to-figma`), and\nthe plugin sandbox rebuilds everything as native Figma nodes. See\n[ARCHITECTURE.md](./ARCHITECTURE.md).\n\n## Build\n\n```bash\nnpm install\nnpm run build        # produces code.js + ui.html\nnpm run watch        # rebuild on change\nnpm run typecheck\n```\n\n## Run it in Figma (desktop app)\n\n1. `npm run build`\n2. Figma → **Plugins → Development → Import plugin from manifest…**\n3. Choose this repo's `manifest.json`.\n4. Open any **Design** file (or a **Figma Slides** file), then\n   **Plugins → Development → tofig**.\n5. Paste HTML or drop an `.html` file → **Convert**.\n\nTry the bundled examples:\n- `examples/sample-design.html` — open the plugin in a **Design** file.\n- `examples/sample-slides.html` — open the plugin in a **Slides** file (two\n  `<section>`s become two slides).\n\n## Inputs & limits\n\n- ✅ Paste HTML, or drop a single `.html` file.\n- ✅ Inline CSS, `data:`/base64 images, inline `<svg>`, CSS gradients, web fonts\n  that exist in Figma (others fall back to the nearest available, then Inter).\n- ❌ External URLs / assets behind `http(s)` — the plugin runs with\n  `networkAccess: none`. Make your HTML self-contained (inline styles & images).\n\n## Exports that won't render in the plugin → the external renderer\n\nSome self-contained exports are really **live apps** — a Claude artifact that\nboots a React runtime, fetches React/Babel from a CDN, reads `localStorage`, etc.\nFigma's plugin sandbox blocks those (no network, `data:`-URL origin), so they\ncan't render *inside* the plugin.\n\nFor those, render them in a **real, unrestricted headless Chrome** outside Figma,\nthen import the result. Same extractor, deterministic — just an unrestricted\nbrowser:\n\n```bash\nnpm install                                   # installs puppeteer-core (uses your Chrome)\nnpx tofig-render path/to/export.html          # → path/to/export.tofig.json\n# options: --target design|slides  --width 1440  --out file.tofig.json  --chrome /path/to/chrome\n```\n\nThen in the plugin: **drop the `.tofig.json`** (or \"Choose…\") — it imports\ndirectly, no in-plugin render. Requires a local Google Chrome / Chromium.\n\n### Using the renderer without cloning the repo\n\nIf you installed tofig from the Figma plugin list, you don't have this repo — the\nrenderer is published separately as [`@aca-so/tofig`](https://www.npmjs.com/package/@aca-so/tofig):\n\n```bash\nnpm install -g @aca-so/tofig            # then: tofig-render export.html\n```\n\nOr run it one-off, without installing:\n\n```bash\nnpx --package=@aca-so/tofig tofig-render export.html\n```\n\nThe `--package` flag is needed because the binary (`tofig-render`) is named\ndifferently from the package. Installing straight from source also works:\n`npm install -g github:aca-so/tofig`.\n\n## Status\n\n🚧 Early development — APIs and structure may still change.\n\nThe capture pipeline (render → extract → bytes → font weight/italic recovery →\nslide splitting) is validated in a real browser. The inject side (building Figma\nnodes) runs via the Plugin API and is best verified by loading the plugin and\nrunning the examples above.\n\n## Contributing\n\nContributions are welcome! Please read the\n[Contributing Guide](./CONTRIBUTING.md) to learn about the branching model\n(Git Flow), commit conventions, and the pull request process.\n\n- 🐛 [Report a bug](https://github.com/aca-so/tofig/issues/new/choose)\n- ✨ [Request a feature](https://github.com/aca-so/tofig/issues/new/choose)\n- 🔒 [Report a security issue](./SECURITY.md)\n\n## License\n\nDistributed under the [MIT License](./LICENSE). Copyright © 2026 acaso.\n\nThird-party code, all MIT, with license headers preserved in the bundle:\n- [`@builder.io/html-to-figma`](https://github.com/BuilderIO/html-to-figma) — style/geometry extraction.\n- **React** and **ReactDOM** (production UMD builds, vendored in `src/ui/vendor/`) —\n  injected into the render iframe so React-based exports can boot.\n","readmeFilename":"README.md","_rev":"1-5dc445113ecea2efb0b30698eeab021a"}