figma-mcp server

figma-mcp

Figma → code that is actually checked against the design.

Most Figma-to-code tools stop at the moment of generation: they hand you JSX and walk away. Nobody ever renders the output and compares it to the frame, so the result stalls at "90% there" and you spend the afternoon nudging padding by eye.

This MCP server closes that loop. It converts a frame to self-contained HTML deterministically (no LLM, no hallucinated layout), then renders your code in Chromium, pixel-diffs it against the Figma reference, measures every element's box, and tells the agent exactly what is missing or misplaced. The agent edits, calls verify again, and repeats until the diff is at the anti-aliasing floor.

Figma reference First pass — 5.18% off Pixel diff Converged — 0.00%

Those are real artifacts from npm run example, which runs the loop end to end with no API key. The generate callback in that demo is a scripted stand-in for an LLM, so it shows the loop mechanics honestly — the measuring is real, the "model" is not.

Why the verify step matters

A Figma node tree tells you what the designer declared. It does not tell you what a browser will do with your CSS. Those diverge constantly — a flex gap that collapses, a font that falls back, an absolute child that escapes its parent. The only way to know is to render it and look.

figma_verify gives the agent three independent signals per pass:

how wrong and where.

• Pixel diff — the overall mismatch ratio plus the worst regions, so it knows

the live DOM, and matched against its Figma box. This is what turns "the bottom-left looks off" into "the CTA button is missing" or "the price label is 40px too low".

• Element bounding-box IoU — every IR node is tagged data-ir-id, measured in

pre-order index is its paint order; elementsFromPoint over a sample grid gives the rendered order wherever two elements actually overlap. This catches the class of bug the other two signals are blind to by construction: elements present, in exactly the right box, stacked the wrong way round — or cut off by an ancestor's overflow where the design lets them overhang. Neither moves a box, and on a tall frame neither moves the diff ratio much, but a decorative overlay drawn over a photo instead of under it is the first thing a person sees. Reported as WRONG STACKING / OVER-CLIPPED, and reported even when the pixel diff has converged.

• Paint order and clipping — Figma lists children back-to-front, so a node's

Tools

Responsive output depends on what the design actually declares

Shortened. The full README is on GitHub.