Skip to main content
Glama
Figma CodeKit — Pixel-Verified Figma to Code

Figma CodeKit — Pixel-Verified Figma to Code

Convert a Figma frame to code

figma_convert

Convert 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

NameRequiredDescriptionDefault
urlYesFigma frame URL, e.g. https://www.figma.com/design/KEY/Name?node-id=1-2
nextNoAlso 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.
reactNoAlso emit generated.jsx (React with inline styles) alongside the HTML, plus components/<Name>.jsx for every Code Connect binding it imports.
outDirNoWhere to write output. Defaults to .figma-cache/<fileKey>-<nodeId>/
refreshNoIgnore the cache and re-fetch from the Figma API.
tailwindNoEmit 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.
responsiveNoEmit 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.
inlineAssetsNoEmbed 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.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.1.0

TDQS

A4.1/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden and does well: it discloses that output is written to a cache dir with named files, that Figma responses are cached so re-runs are offline and free, and that refresh=true bypasses that cache. The notable gaps are auth requirements (a Figma token is surely needed) and error/failure behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the core action and output set, then flags, then caching, then the follow-up tool — a sensible ordering with no filler sentences. It is on the long side for a description, though every clause conveys operative information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For an eight-parameter tool with no annotations and no output schema, the description covers what is produced and where, the caching model, and the verification follow-up, which is most of what an agent needs. Only prerequisite credentials and failure modes are missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% and the parameter docs are already detailed, so the baseline is 3. The prose reinforces react/next/refresh semantics but adds little the schema does not already state, and the interaction between tailwind and the other flags is left to the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

"Fetch a Figma frame and deterministically convert it to self-contained HTML (no LLM)" gives a specific verb, resource, output format, and even the execution model. It then enumerates the exact artifacts written (generated.html, reference.png, ir.json, assets.json) and the return value, so the tool is unmistakable against figma_verify and figma_inspect.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It explicitly routes the agent: react=true for a component, next=true for a runnable App Router project, and "Follow with figma_verify to see how close the render is." That is real when-to-use guidance plus a named follow-up sibling. It never says when to prefer figma_inspect instead, so the exclusion set is incomplete.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools