Skip to main content
Glama
Semmargl

figma-proxy-mcp

by Semmargl

figma-proxy-mcp

MCP server for Figma → code pipelines. Reads Figma through the REST API and returns agent-friendly data instead of the raw Figma tree:

Tool

What it gives the agent

get_figma_component

Normalised IR of a node: summary:true (sections + boxes + tokens), format:"flat", lean:true (flat node list with coordinates relative to the root), CSS variables and a ready Tailwind theme

render_node_png

Reference render of a node (PNG, base64 + image URL)

verify_render

Renders your HTML in headless Chromium and diffs it against the Figma render → SSIM, pixel-diff %, clustered diff regions

export_svg, migrate_all_svgs, list_svg_cache

Icon / vector export

get_figma_file, get_cached_components, get_component_by_name

File tree and component cache

Read-only: it never writes to your Figma files.


1. Requirements

  • Node.js 20+ — https://nodejs.org (LTS). Check: node -v

  • git

  • A Figma personal access token (next section)

Related MCP server: @nvanexan/figma-mcp

2. Get your Figma token (2 minutes)

  1. Open Figma (web or desktop) → click your avatar (top-left) → Settings.

  2. Tab Security → section Personal access tokens → Generate new token.

  3. Name: figma-proxy-mcp. Expiration: your choice (90 days is fine).

  4. Scopes: File content → Read-only (enough for everything here). Optionally Dev resources → Read-only.

  5. Click Generate token and copy it now — it starts with figd_ and is shown only once.

The token can read every file your account can open. To work with someone else's file, ask them to share it with your Figma account (view access is enough).

3. Install

git clone https://github.com/Semmargl/figma-proxy-mcp.git
cd figma-proxy-mcp
npm install
npx playwright install chromium     # needed only for verify_render
cp .env.example .env

4. Put the token in .env

Open figma-proxy-mcp/.env in any text editor (macOS: open -e .env) and replace the placeholder:

FIGMA_API_KEY=figd_your_new_token_here      ← before
FIGMA_API_KEY=figd_AbCdEf...your real token ← after

Save. .env is git-ignored — never commit it, never paste the token into code or MCP configs. (Alternative: set FIGMA_API_KEY in the MCP client's env block or in your shell.)

Check the token:

curl -s -H "X-Figma-Token: $(grep FIGMA_API_KEY .env | cut -d= -f2)" https://api.figma.com/v1/me

→ JSON with your email = OK. 403 = wrong/expired token.

5. Connect to your AI tool (stdio)

Use the absolute path to proxy-mcp.js.

Claude Code (in your project folder):

claude mcp add figma-proxy --scope project -- node /ABS/PATH/figma-proxy-mcp/proxy-mcp.js --stdio

Claude Desktop / Cursor (claude_desktop_config.json / .cursor/mcp.json):

{ "mcpServers": { "figma-proxy": { "command": "node", "args": ["/ABS/PATH/figma-proxy-mcp/proxy-mcp.js", "--stdio"] } } }

Restart the app. The key is read from .env next to proxy-mcp.js, whatever the working directory.

6. HTTP mode (scripts / agents that start it on demand)

node proxy-mcp.js            # → http://localhost:4444/mcp  (JSON-RPC: tools/list, tools/call)
curl -s localhost:4444/mcp -H 'content-type: application/json' \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"get_figma_component","arguments":{"figmaUrl":"<link with node-id>","summary":true}}}'

7. Usage tips

  • Links must contain node-id: in Figma right-click a frame → Copy link to selection.

  • Start with summary:true, then fetch each section with format:"flat", lean:true. Use relativeBox for layout.

  • verify_render needs htmlPath (absolute, a self-contained HTML file) + frameWidth (Figma frame width).

  • Optional env: FIGMA_FILE_DEPTH (default 4), FIGMA_NODE_DEPTH (default 12).

Troubleshooting

Symptom

Fix

FIGMA_API_KEY is not set

.env missing or still has the placeholder (step 4)

403 / Invalid token

token expired or wrong — generate a new one

404 on a node

no access to the file, or wrong node-id

verify_render: executable doesn't exist

npx playwright install chromium

EADDRINUSE :4444

HTTP mode already running (or another app on 4444)

License

MIT

Available Tools

9 tools
export_svgC

Export a specific Figma node as SVG and optionally save it

ParametersJSON Schema
NameRequiredDescriptionDefault
saveNoWhether to save the SVG to disk (default: false)
scaleNoScale factor for export (default: 1)
fileIdYesFigma file ID
nodeIdYesNode ID to export as SVG
fileNameNoCustom filename for saved SVG (optional)
outputDirNoOutput directory for saved SVGs (default: ./exported-svgs)./exported-svgs

TDQS

C2.9/5.0
Behavior2/5

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

With no annotations, the description carries the full behavioral burden, and it discloses little beyond the existence of an optional save. It never says whether the SVG is returned inline or only written to disk, whether existing files are overwritten, or what permissions/access the Figma file requires.

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

Conciseness5/5

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

A single front-loaded sentence with zero filler; the core action and the optional side effect are both stated immediately.

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

Completeness2/5

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

For a six-parameter tool that can write files to disk, with no annotations and no output schema, the description is too thin. It omits return format (inline SVG vs. file path), side effects of saving, and any interaction between save, fileName, and outputDir.

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%, so all six parameters are already documented in the schema, making 3 the baseline. The description adds only the 'optionally save' framing, which loosely maps to the save flag but adds no syntax or format detail beyond the schema.

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

Purpose4/5

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

States a specific verb (Export) and resource (a Figma node as SVG), which is concrete and distinguishable from the PNG-rendering sibling by format. It does not, however, explicitly contrast itself with render_node_png or the cache tools, so sibling differentiation is left implicit.

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

Usage Guidelines2/5

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

The phrase 'optionally save it' hints that a save mode exists, but there is no statement of when to choose this tool over render_node_png, the cache tools, or migrate_all_svgs. No prerequisites, conditions, or alternatives are named.

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

get_cached_componentsB

Get previously fetched Figma components data

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.2/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden. It implies cache semantics but says nothing about staleness, cache lifetime, whether an empty result means 'never fetched', permissions, or error behavior for a tool whose entire point is returning stored data.

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

Conciseness5/5

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

A single front-loaded sentence with no filler; the resource being retrieved is the first thing read.

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

Completeness3/5

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

No output schema exists, so the description should describe the shape of the returned component data and what an empty cache yields; it does not. For a zero-parameter read tool this is a modest but real gap.

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

Parameters4/5

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

The tool takes zero parameters, so the baseline is 4. There is nothing for the description to disambiguate, and the schema is trivially complete.

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

Purpose4/5

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

States a clear verb ('Get') and resource ('previously fetched Figma components data'), and the word 'previously fetched' usefully distinguishes it from live-fetch siblings like get_figma_component. It doesn't, however, explicitly contrast itself with get_component_by_name or list_svg_cache, so the agent must infer the routing.

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

Usage Guidelines2/5

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

There is no statement of when to use this tool versus alternatives, no mention of when the cache is populated, and no exclusion guidance. The only implicit signal is 'previously fetched', which the agent must interpret on its own.

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

get_component_by_nameB

Get a specific Figma component by name from cached data

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesName of the component to find

TDQS

B3.2/5.0
Behavior3/5

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

No annotations are provided, so the description carries the full burden. It does disclose a meaningful behavioral trait beyond the schema: results come from cached data rather than a live Figma fetch, which implies possible staleness. However, it says nothing about what happens when the name is not found, whether matching is exact or fuzzy, or response shape.

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?

A single efficient sentence with the resource and cache scope front-loaded and no filler. It is perhaps too terse for the amount of behavioral context this tool needs, but nothing is wasted.

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

Completeness3/5

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

With no annotations and no output schema, the description should do more: it never describes what is returned (a component/node object?) or the not-found behavior. The cache-scope note is valuable but leaves key agent-facing details unstated.

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?

There is a single parameter with 100% schema description coverage, so the schema already defines 'name'. The description adds no lookup syntax, matching rules, or case-sensitivity detail beyond what the schema provides, making the baseline of 3 appropriate.

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

Purpose4/5

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

States a specific verb (Get) and resource (Figma component) and adds the scoping qualifier 'by name from cached data'. It is clearly distinguishable in intent, but it does not explicitly distinguish itself from close siblings like get_figma_component or get_cached_components.

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

Usage Guidelines2/5

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

The description gives no indication of when to prefer this tool over get_figma_component, get_cached_components, or get_figma_file. The 'from cached data' phrase hints at a caching tradeoff but never spells out the condition that selects this tool.

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

get_figma_componentA

Get a Figma node by URL. Returns a deterministic, pruned + tokenized + componentized IR with a :root{} CSS-variable block, a Tailwind theme, and a component registry. Colors/spacing/fonts are already resolved to $--var references — the caller does NOT need to re-match raw RGBA against :root. For large sections, call with summary:true FIRST to get a compact { cssVars, tailwindTheme, registry, sections[] } object (top-level children with bounding boxes) WITHOUT the full node tree; this replaces manual get_figma_file decomposition. Then fetch individual sections (optionally with maxDepth) to build them.

ParametersJSON Schema
NameRequiredDescriptionDefault
leanNoOmit the global blocks (CSS vars, Tailwind theme, component registry) that are identical on every call. Pass true on per-section fetches AFTER the summary call to avoid re-sending ~15KB of duplicated tokens/registry each time. The annotated IR still carries $--var references. Default false.
pruneNoRun the deterministic noise-pruning pass (collapse decorative wrappers, drop invisible/zero-size nodes). Default true; set false for raw IR (debug).
formatNo(non-summary) IR shape. "nested" (default) = full annotated tree. "flat" = a flat array of compact node records (render fields only, coords RELATIVE to the root frame) — much smaller and machine-readable. Use format:"flat" + lean:true for per-section fetches so you NEVER hand-read a deep multi-thousand-line tree.nested
minFreqNoMinimum occurrences for a value to become a design token during tokenization (default 2).
summaryNoWhen true, return a compact summary (component meta, CSS vars, Tailwind theme, component registry, and top-level sections with bounding boxes) instead of the full annotated IR tree. Recommended first call for large frames/sections — avoids reading a multi-thousand-line IR.
figmaUrlYesFull Figma URL to a specific node (e.g., https://www.figma.com/design/{fileId}/...?node-id={nodeId})
maxDepthNoCap the IR tree depth (e.g. 3-4) to keep a large section compact without manual decomposition. Omit for full depth.
tokenizeNoRun frequency-analysis tokenization: emit :root CSS vars + Tailwind theme and replace raw color/spacing/font values in the IR with $--var references. Default true.
componentizeNoCluster repeated nodes into a component registry with variant axes and named text styles. Default true.

TDQS

A4.5/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 behavioral burden and does well: it discloses that tokens are pre-resolved to $--var references (no caller re-matching of RGBA), that lean omits ~15KB of duplicated blocks, and that prune defaults to a deterministic pass. It stops short of auth, rate limits, or error behavior, so not a 5.

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 purpose, then workflow and field semantics. Dense but every sentence carries information relevant to correct invocation; slightly long, but appropriate for a 9-parameter tool with non-obvious sequencing.

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 a 9-parameter tool with no output schema, the description documents the return shape (cssVars, tailwindTheme, registry, sections[], IR tree) and the workflow well enough to call correctly. It omits failure modes and access requirements, which keeps it just below complete.

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

Parameters4/5

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

Schema coverage is 100%, so the baseline is 3, but the description adds real value beyond the schema by explaining parameter interaction and intent — summary-then-lean-per-section ordering, format:flat for machine-readable per-section fetches, and maxDepth as an alternative to manual decomposition. This is more than the schema's per-parameter docs provide.

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?

States a specific verb+resource ('Get a Figma node by URL') and precisely characterizes the output (pruned, tokenized, componentized IR with :root vars, Tailwind theme, registry). It also distinguishes itself from get_figma_file by positioning the summary mode as a replacement for manual decomposition.

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

Usage Guidelines5/5

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

Gives explicit sequencing: use summary:true FIRST for large sections, then fetch individual sections with lean/format:flat/maxDepth. Names the alternative workflow (get_figma_file decomposition) and the condition that makes it unnecessary.

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

get_figma_fileC

Get Figma file data by file ID and transform it for development

ParametersJSON Schema
NameRequiredDescriptionDefault
fileIdYesFigma file ID (from the URL: figma.com/file/{fileId}/...)

TDQS

C2.9/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden, and it discloses almost nothing: no indication of whether results are cached, how large the payload may be, whether the file must be authenticated, or what 'transform it for development' actually does to the data. 'Get' implies a read, but nothing beyond that is stated.

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?

A single tight sentence with the resource and key scoping parameter front-loaded. No waste, though the trailing 'transform it for development' is vague enough to be near-filler rather than information.

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

Completeness2/5

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

With no annotations and no output schema, the description must convey behavior and return shape, and it does not. The undefined 'transform it for development' leaves the agent unable to predict what it will receive or how expensive the call is.

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 schema already explains that fileId is extracted from the Figma URL. The description adds no syntax, format, or constraint detail beyond 'by file ID', so the baseline 3 for high-coverage single-parameter schemas applies.

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

Purpose4/5

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

States a specific verb and resource (get Figma file data) scoped by file ID, and hints at a transformation step. It is distinguishable from siblings like get_figma_component or export_svg, but never explicitly contrasts itself with them, so it stops short of a 5.

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

Usage Guidelines2/5

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

There is no when-to-use guidance, no prerequisites, and no mention of the alternative sibling tools (get_figma_component, get_cached_components) that an agent might pick instead. The agent must infer that this is the entry point for whole-file retrieval.

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

list_svg_cacheB

List all cached SVG exports

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

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

With no annotations, the description carries the full burden of behavioral disclosure. It implies a read-only listing but says nothing about return shape, cache scope, pagination, or the relationship to the export/render siblings, leaving significant gaps for an agent.

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?

A single, front-loaded sentence with no filler. It is appropriately terse for a zero-parameter list operation, though it is arguably too sparse to route the agent confidently.

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

Completeness3/5

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

For a no-param, no-annotation, no-output-schema tool, the description should at least hint at what a cached SVG export entry represents and how the list relates to export_svg. As written it is minimally viable but leaves return-content questions open, especially since no output schema exists to compensate.

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

Parameters4/5

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

The tool takes zero parameters, so there is no syntax for the description to document. The baseline for a parameterless tool applies; the description simply cannot add parameter detail.

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

Purpose4/5

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

The description states a clear verb ('List') and resource ('cached SVG exports'), so the agent immediately knows what the tool returns. However, it does not distinguish this from siblings like get_cached_components or export_svg, which also touch cached SVG resources.

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

Usage Guidelines2/5

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

There is no guidance on when to use this tool versus export_svg, get_cached_components, or migrate_all_svgs. The agent is left to infer that this purely enumerates the cache without exporting or fetching individual components.

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

migrate_all_svgsC

Automatically find and export all SVG icons from a Figma file

ParametersJSON Schema
NameRequiredDescriptionDefault
fileIdYesFigma file ID to migrate SVGs from
outputDirNoOutput directory for exported SVGs (default: ./exported-svgs)./exported-svgs

TDQS

C2.9/5.0
Behavior2/5

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

With no annotations, the description carries the full behavioral burden. It does not disclose that this is a bulk filesystem-writing operation (outputDir), whether it overwrites existing files, whether it requires Figma auth, how it behaves on large files or failures, or what it returns. 'Automatically' hints at the traversal behavior but nothing about side effects or limits.

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?

A single tight sentence with no filler, and the bulk scope is front-loaded. It is arguably under-specified rather than verbose, but as structure goes it is clean.

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

Completeness2/5

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

For a no-annotation, file-writing, bulk export tool with no output schema, the description is thin: it omits where results go, what is returned, and error/partial-failure behavior. The schema supplies the parameter details, but the behavioral gap remains for an operation of this kind.

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%, with both fileId and outputDir (including its default) fully documented in the schema, so the baseline of 3 applies. The description's 'all SVG icons from a Figma file' adds slight scoping context for fileId but no format or syntax detail beyond the schema.

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

Purpose4/5

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

The description states a specific verb (find and export) and resource (all SVG icons from a Figma file), and the word 'all' correctly distinguishes it from a single-item operation. It does not, however, differentiate itself from the sibling export_svg, so an agent cannot tell from the description alone why it should pick this bulk tool over that one.

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

Usage Guidelines2/5

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

There is no explicit when-to-use or when-not-to-use guidance, and no sibling tool (notably export_svg) is named as an alternative. The word 'Automatically' and 'all' imply a bulk workflow, but the agent is left to infer that from the adjective rather than being told.

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

render_node_pngB

Export a specific Figma node as PNG and return base64-encoded image data

ParametersJSON Schema
NameRequiredDescriptionDefault
scaleNoScale factor for PNG export (default: 2)
fileIdNoFigma file ID (alternative to figmaUrl)
nodeIdNoNode ID to export (alternative to figmaUrl, use colon format: 133:167)
figmaUrlNoFull Figma URL to a specific node (e.g., https://www.figma.com/design/{fileId}/...?node-id={nodeId})

TDQS

B3.2/5.0
Behavior3/5

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

No annotations are provided, so the description carries the full behavioral burden. It discloses the return format (base64-encoded image data), which is genuinely useful since there is no output schema. However, it says nothing about authentication requirements, whether figmaUrl or fileId+nodeId is preferred, size or scale limits, or error behavior on an invalid node.

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?

A single front-loaded sentence with no filler; the verb and resource lead. It is efficient, though it leans toward under-specification rather than waste given the tool's practical gotchas.

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

Completeness3/5

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

For a 4-parameter tool with zero required params and no output schema, the description covers the essentials (what is exported, output format) but omits a critical practical point: that the agent must supply either figmaUrl or fileId+nodeId for the call to work. Addressing that redundancy would round out an otherwise adequate definition.

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%, so the schema already documents all four parameters (scale, fileId, nodeId, figmaUrl) including the colon node format and the alternative-to-figmaUrl relationship. The description adds no parameter-level detail, so the baseline 3 is appropriate.

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

Purpose4/5

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

States a specific verb+resource+output: 'Export a specific Figma node as PNG and return base64-encoded image data.' An agent immediately knows this produces a raster image of one node. It does not name or distinguish itself from the close sibling export_svg, which is the one tool it could be confused with.

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

Usage Guidelines2/5

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

No when-to-use guidance, no conditions, and no mention of alternatives. Given sibling export_svg handles vector export and verify_render/list_svg_cache exist nearby, the agent must infer when raster PNG is preferable. Nothing tells it when not to use this tool.

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

verify_renderA

Visual verification (MEASUREMENT ONLY): render an HTML file with headless Chromium INSIDE this server (does NOT use the user's Chrome / Control_Chrome) and compare it to the Figma design PNG. Returns SSIM (0-1, higher = closer), pixel-diff %, and clustered diff regions (bounding boxes of disagreement, in logical px). Provide the reference PNG via figmaUrl (auto-fetched), figmaPngPath, or figmaPngBase64. Use after generating HTML to objectively check fidelity, then fix only the reported regions — this tool never changes code. Requires npm install + npx playwright install chromium.

ParametersJSON Schema
NameRequiredDescriptionDefault
bgNoBackground [r,g,b] to flatten transparent reference-PNG pixels onto before comparing. Default [255,255,255]. For dark designs pass the real background (e.g. [13,17,23]) — otherwise transparent areas read as a false full diff.
clipNoOptional [x,y,w,h] in CSS/logical px to compare ONLY the content area. Use it to exclude dead margins / parent-canvas background that the isolated frame cannot reproduce (that noise otherwise dominates the regions and masks real content diffs). Region coords are reported back in full-frame coords.
scaleNoDevice scale factor for render and reference (default 2 — match render_node_png).
outDirNoDirectory for the diff image (default ./verify-out)../verify-out
figmaUrlNoFigma node URL — reference PNG fetched automatically at the given scale.
htmlPathYesAbsolute path to the generated .html file to render.
thresholdNoSSIM pass threshold (default 0.95).
frameWidthYesFigma frame width in CSS px (e.g. 1440 or 1920). HTML is rendered at this width.
figmaPngPathNoAlternative to figmaUrl: local path to an already-saved reference PNG.
figmaPngBase64NoAlternative: base64 of the reference PNG.

TDQS

A4.4/5.0
Behavior5/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 so richly: it declares the operation is read-only/measurement-only ('never changes code'), discloses the runtime environment (headless Chromium inside the server, not the user's Chrome), and states setup prerequisites (`npm install` + `npx playwright install chromium`). It also describes what the output contains.

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 purpose and the MEASUREMENT ONLY qualifier, then return values, usage, and dependencies. Dense and mostly waste-free, though the single long paragraph packs many clauses and could be split for readability.

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

Completeness5/5

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

For a 10-param tool with no output schema, the description fills the gaps: it explains the return values (SSIM, pixel-diff %, clustered diff regions in logical px), the input-source options, and the environment/setup requirements. Nothing an agent needs to call it correctly appears 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%, so the schema already documents all 10 parameters in depth. The description reinforces the reference-source choice (figmaUrl auto-fetched vs the two alternatives) but adds little semantic detail beyond what the schema provides; baseline 3 is appropriate.

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?

States a specific verb (render and compare) and resource (HTML file vs Figma design PNG), and explicitly scopes it as 'MEASUREMENT ONLY'. It also disambiguates from environmental expectations by noting it 'does NOT use the user's Chrome' and runs inside the server, so an agent can distinguish it from sibling render/export tools.

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?

Gives clear when-to-use guidance ('Use after generating HTML to objectively check fidelity, then fix only the reported regions') and enumerates the three ways to supply the reference image (figmaUrl, figmaPngPath, figmaPngBase64). It lacks an explicit when-not/alternative-tool statement against siblings, but the context is unambiguous.

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

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 9 tool updatesv1.0.0
    • First observedexport_svg
    • First observedget_cached_components
    • First observedget_component_by_name
    • First observedget_figma_component
    • First observedget_figma_file
    • First observedlist_svg_cache
    • First observedmigrate_all_svgs
    • First observedrender_node_png
    • First observedverify_render

TDQS

A3.6/5.0

Scored across 9 tools

Disambiguation4/5

Most tools are clearly distinct by resource and action, such as export_svg vs render_node_png and migrate_all_svgs vs export_svg. The main overlap is between get_figma_file and get_figma_component, though get_figma_component's detailed description and summary-first workflow help clarify its role. Cache tools are also differentiated by whether they list or retrieve by name.

Naming Consistency5/5

All tool names use consistent snake_case and follow a predictable verb_noun pattern such as list_svg_cache, get_figma_file, export_svg, and verify_render. There are no mixed conventions or confusing abbreviations.

Tool Count5/5

Nine tools is well within the ideal range and each tool appears to serve a distinct purpose in the Figma proxy workflow. The set is neither bloated nor too thin for fetching, exporting, caching, and verifying Figma assets.

Completeness4/5

The surface covers core workflows: fetching files/components, exporting SVG/PNG, migrating SVGs, using cached components, and verifying renders. Minor gaps exist, such as no explicit cache invalidation or Figma write operations, but these may be outside the server's read-only proxy scope.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • F
    license
    A
    quality
    D
    maintenance
    Enables AI agents to interact with Figma to create, read, and manage designs using the Figma REST API and a dedicated plugin. It supports advanced features like UI generation from text, webpage reconstruction in Figma, and design token synchronization with codebases.
    20
    -
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to extract design systems, analyze components, and maintain design-code consistency from Figma files, providing intelligent component analysis and accessibility compliance.
    44 npm
    29
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables seamless integration with Figma API for extracting design tokens, generating production-ready code in multiple frameworks, capturing screenshots, and managing design assets directly from Figma.
    5
    MIT