figma-proxy-mcp
Reads Figma files, frames, and components through the Figma REST API and returns agent-friendly data. Provides a normalized IR of a node (sections, boxes, design tokens, CSS variables, and a ready Tailwind theme) in summary or flat/lean form, renders reference PNGs of nodes, exports SVG icons/vectors (with batch migration and cache listing), and browses file trees and cached components. Also includes a render-verification tool that renders agent-written HTML in headless Chromium and diffs it against the Figma render (SSIM, pixel-diff percentage, clustered diff regions). Read-only: never writes to Figma files.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@figma-proxy-mcpGet the hero section from this Figma link with a Tailwind theme"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 |
| Normalised IR of a node: |
| Reference render of a node (PNG, base64 + image URL) |
| Renders your HTML in headless Chromium and diffs it against the Figma render → SSIM, pixel-diff %, clustered diff regions |
| Icon / vector export |
| 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 -vgit
A Figma personal access token (next section)
Related MCP server: @nvanexan/figma-mcp
2. Get your Figma token (2 minutes)
Open Figma (web or desktop) → click your avatar (top-left) → Settings.
Tab Security → section Personal access tokens → Generate new token.
Name:
figma-proxy-mcp. Expiration: your choice (90 days is fine).Scopes: File content → Read-only (enough for everything here). Optionally Dev resources → Read-only.
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 .env4. 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 ← afterSave. .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 --stdioClaude 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 withformat:"flat", lean:true. UserelativeBoxfor layout.verify_renderneedshtmlPath(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 |
|
|
| token expired or wrong — generate a new one |
| no access to the file, or wrong |
|
|
| HTTP mode already running (or another app on 4444) |
License
MIT
Available Tools
9 toolsexport_svgC
Export a specific Figma node as SVG and optionally save it
| Name | Required | Description | Default |
|---|---|---|---|
| save | No | Whether to save the SVG to disk (default: false) | |
| scale | No | Scale factor for export (default: 1) | |
| fileId | Yes | Figma file ID | |
| nodeId | Yes | Node ID to export as SVG | |
| fileName | No | Custom filename for saved SVG (optional) | |
| outputDir | No | Output directory for saved SVGs (default: ./exported-svgs) | ./exported-svgs |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Name of the component to find |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| lean | No | Omit 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. | |
| prune | No | Run the deterministic noise-pruning pass (collapse decorative wrappers, drop invisible/zero-size nodes). Default true; set false for raw IR (debug). | |
| format | No | (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 |
| minFreq | No | Minimum occurrences for a value to become a design token during tokenization (default 2). | |
| summary | No | When 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. | |
| figmaUrl | Yes | Full Figma URL to a specific node (e.g., https://www.figma.com/design/{fileId}/...?node-id={nodeId}) | |
| maxDepth | No | Cap the IR tree depth (e.g. 3-4) to keep a large section compact without manual decomposition. Omit for full depth. | |
| tokenize | No | Run frequency-analysis tokenization: emit :root CSS vars + Tailwind theme and replace raw color/spacing/font values in the IR with $--var references. Default true. | |
| componentize | No | Cluster repeated nodes into a component registry with variant axes and named text styles. Default true. |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| fileId | Yes | Figma file ID (from the URL: figma.com/file/{fileId}/...) |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| fileId | Yes | Figma file ID to migrate SVGs from | |
| outputDir | No | Output directory for exported SVGs (default: ./exported-svgs) | ./exported-svgs |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| scale | No | Scale factor for PNG export (default: 2) | |
| fileId | No | Figma file ID (alternative to figmaUrl) | |
| nodeId | No | Node ID to export (alternative to figmaUrl, use colon format: 133:167) | |
| figmaUrl | No | Full Figma URL to a specific node (e.g., https://www.figma.com/design/{fileId}/...?node-id={nodeId}) |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| bg | No | Background [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. | |
| clip | No | Optional [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. | |
| scale | No | Device scale factor for render and reference (default 2 — match render_node_png). | |
| outDir | No | Directory for the diff image (default ./verify-out). | ./verify-out |
| figmaUrl | No | Figma node URL — reference PNG fetched automatically at the given scale. | |
| htmlPath | Yes | Absolute path to the generated .html file to render. | |
| threshold | No | SSIM pass threshold (default 0.95). | |
| frameWidth | Yes | Figma frame width in CSS px (e.g. 1440 or 1920). HTML is rendered at this width. | |
| figmaPngPath | No | Alternative to figmaUrl: local path to an already-saved reference PNG. | |
| figmaPngBase64 | No | Alternative: base64 of the reference PNG. |
TDQS
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.
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.
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.
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.
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.
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.
9 tool updates
v1.0.0- First observed
export_svg - First observed
get_cached_components - First observed
get_component_by_name - First observed
get_figma_component - First observed
get_figma_file - First observed
list_svg_cache - First observed
migrate_all_svgs - First observed
render_node_png - First observed
verify_render
TDQS
Scored across 9 tools
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.
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.
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.
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
Related MCP Connectors
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
- WhoogyOAuthcom.whoogy
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Serves your design system and coding standards to coding agents, so they stop guessing.
Related MCP Servers
- FlicenseAqualityDmaintenanceEnables 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-
- FlicenseBqualityCmaintenanceEnables extraction of design context from Figma files as CSS-like properties and provides tools to render Figma nodes as images. It integrates with AI agents via the Model Context Protocol to facilitate design-to-code workflows by providing layout, style, and typography information.2-
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to extract design systems, analyze components, and maintain design-code consistency from Figma files, providing intelligent component analysis and accessibility compliance.44 npm29MIT
- AlicenseNot gradedqualityDmaintenanceEnables 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.5MIT