Tobias González Arriola
All work

figma2html

September 2026

A web tool that turns a Figma file into measurable HTML: paste the URL and your token, pick the screens, and download a zip with one HTML fragment per frame — absolute positioning, exact measurements, every icon as its own SVG — plus a browsable index. Live at figma2html.online, with the source open.

The problem

Turning a design into code ends up being guesswork: you look at the screen and approximate paddings, gaps and sizes. Plugins that export HTML return bloated markup, and the terminal flow I was using myself needed Python, a token in the environment and editing a script to choose frames.

Features

  • Paste the file URL and your token: it lists every page and frame with its size
  • Pick which screens to export, with an editable slug for each one
  • One HTML fragment per frame, absolutely positioned, with the design's exact measurements

My responsibility

All mine, from the idea to the domain. It is a single page with no build step and no framework: it talks to the Figma API straight from the browser, walks the already-resolved tree Figma returns, and writes the zip right there. No backend on purpose — the token never leaves the browser, so there is no server to trust it with. Published as static files behind Caddy on my VPS.

Stack

Frontend
Plain HTML + JavaScript, no build step and no framework: the whole tool is one page that calls api.figma.com straight from the browser, walks the document tree and writes the export with JSZip
Backend
None, by design — the Figma token never leaves the browser, so there is no server to trust with it. Deployed as static files behind Caddy on the self-hosted VPS
Figma APITypeScriptSVGZero-backendOpen sourceDesign tooling

Links