Skip to content
Agentmart
Submit a tool

figma-mcp

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

Connector by Mehmoodqureshi · GitHub account verified by the MCP Registry

IndexedMITLocal (stdio)★ 1
Write a review

Install

Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.

npx agentmarket install connector/mehmoodqureshi-figma-mcp

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list, install config and code. Checked Oct 26, 2026.

Runs code on install

Its package runs an install script (such as npm postinstall or setup.py code) as soon as you install it, before any tool is called. Read the script first.

Tools
3 read · 0 write · 0 deleteRead-only
Secrets
1 (API keys, tokens or passwords)
Install scripts
Runs code on install
Runs as
Node.js package

Tools by what they do 3

Read from the source code; the running server may list different tools.

Read 3 · Look things up without changing anything.

  • figma_convert
  • figma_inspect
  • figma_verify

Secrets and settings it asks for

Secrets: values you paste in that let it act as you.

  • FIGMA_TOKEN

Other settings (environment variables or headers).

  • FIGMA_MCP_CACHE_DIR

Network hosts it talks to 6

  • api.figma.com · found in code
  • figma.com · found in code
  • fonts.googleapis.com · found in code
  • fonts.gstatic.com · found in code
  • generativelanguage.googleapis.com · found in code
  • github.com · found in code

Files it touches

  • Any path the agent passes to its tools

Tools (3)

Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].

  • figma_convertConvert a Figma frame to code

    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.

  • figma_inspectInspect the design structure

    Print the IR tree as an indented outline (role, name, box, layout, text, tokens) so you can understand the design structure and find a specific element without reading raw Figma JSON or the whole ir.json. Use after figma_convert.

  • figma_verifyVerify rendered code against the Figma design

    Render an HTML file in Chromium, pixel-diff it against the Figma reference, and check each element position with bounding-box IoU, paint order (z-index) and clipping. Returns the diff ratio plus specific instructions on what to fix (MISSING / MISPLACED / WRONG STACKING / OVER-CLIPPED elements, worst regions). Writes render.png and diff.png. Edit the HTML based on the correction and call this again to iterate toward pixel-exact. Read the returned diff.png to see the mismatches highlighted.

Compare and alternatives

    Featured in

    Signals

    Stars
    1
    Forks
    0
    Open issues
    0
    Last commit
    Oct 15, 2026 (13 days ago)
    Last release
    Oct 15, 2026 (13 days ago)

    From GitHub (fetched Oct 24, 2026).

    Details

    Registry name
    io.github.Mehmoodqureshi/figma-mcp
    Version
    0.2.1
    Auth
    API key
    Packages
    npm @mehmoodqureshi/figma-mcp
    License
    MIT
    Repository
    github.com/Mehmoodqureshi/figma-mcp
    First seen
    Oct 24, 2026
    Last checked
    Oct 24, 2026
    Source
    Official MCP Registrygithub-graphql

    More from Mehmoodqureshi

    Cite this page

    figma-mcp. Agent Mart. https://agentmart.dev/connectors/mehmoodqureshi-figma-mcp (last updated 2026-10-24)