Open source · runs in your browser

632 × 178 ↕ 178

Measure the design.
Don’t eyeball it.

Export any Figma file to HTML where every element sits in its exact box. Open DevTools and read the real width, height and padding — instead of guessing them.

Where do I get a token? →
pick screens →

This page is static HTML. The request goes straight from your browser to api.figma.com — there is no server in between.

Pick what to export

01

Reads the file tree

Position, size, color and text of every node, exactly as Figma reports them.

02

Draws every box

Absolutely positioned, at the exact coordinates. No guessed flexbox.

03

Hands you a .zip

A browsable index, one file per screen, and the icons as local SVGs.

It won’t burn your Figma quota

The image-rendering endpoint counts its quota per call, not per icon: a free account gets about 20 a month. A single large export burns the whole thing.

This tool never touches it. It asks for the vector geometry —a different endpoint, a different budget— and builds the SVGs in your browser.

GET /v1/images HTTP/2 429 Rate limit exceeded retry-after: 324811 ↑ a 90-hour wait GET /nodes?geometry=paths HTTP/2 200 OK ↑ what this tool uses

What you get

Exact measurements

Every node at the coordinates Figma reports. Nothing snapped to an 8px grid.

Inspectable

Every element carries data-node-id and its layer name. Find anything straight from DevTools.

Icons that don’t expire

The SVGs live inside the .zip. Figma’s own asset URLs die after 7 days.

Browsable index

Every screen on one page, with search, 1:1 scale and an outline mode.

Where the token comes from

In Figma: your avatar → Settings → Security tab → Personal access tokens → Generate new token. The File content: Read only scope is enough.

What it is NOT for

What comes out is a reference document to measure against, not production markup. If you want code to paste into your app, use the Figma MCP: it interprets the design and gives you components. This does the opposite on purpose — it gives you the raw fact.