Convert a Figma frame to code
figma_convertConvert a Figma frame into self-contained HTML, React, Next.js or Tailwind output with design tokens, cache files, and paths for pixel verification.
Instructions
Fetch a Figma frame and deterministically convert it to self-contained HTML (no LLM). Writes generated.html, reference.png, ir.json and assets.json to a cache dir and returns the paths plus a summary. Pass react=true for a component file, or next=true for a runnable Next.js App Router project you can npm install && npm run dev. Figma responses are cached, so re-running is offline and free unless refresh=true. Follow with figma_verify to see how close the render is.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Figma frame URL, e.g. https://www.figma.com/design/KEY/Name?node-id=1-2 | |
| next | No | Also emit next/ — a runnable Next.js App Router project (package.json, next.config.mjs, app/layout.jsx, app/page.jsx, app/globals.css and the component) that you can npm install && npm run dev as it stands. | |
| react | No | Also emit generated.jsx (React with inline styles) alongside the HTML, plus components/<Name>.jsx for every Code Connect binding it imports. | |
| outDir | No | Where to write output. Defaults to .figma-cache/<fileKey>-<nodeId>/ | |
| refresh | No | Ignore the cache and re-fetch from the Figma API. | |
| tailwind | No | Emit the React / Next.js output with Tailwind v4 classes instead of inline style objects (colours and fonts use the generated @theme tokens). The HTML stays plain CSS for verify. | |
| responsive | No | Emit the responsive variant (Figma FILL→flex/100%, HUG→fit-content, FIXED→px kept) instead of the exact-sizing variant. A frame with NO Auto Layout has no sizing intent to relax, so it keeps its exact CSS and is scaled to fit the viewport instead — otherwise its absolutely-placed children stay pinned to the design canvas and get clipped rather than reflowed. Exact is still the right starting point for verify. | |
| inlineAssets | No | Embed images and vectors as data URIs (one self-contained file). Default false: they are written once to assets/<hash>.<ext> and referenced, which keeps generated.html small. |