figma-to-react-mcp

by sankalp51

Overview Schema Related Servers Score Discussions

TypeScript

Local

Server Quality Checklist

Profile completionA complete profile improves this server's visibility in search results.

Latest release: v0.1.0
Disambiguation5/5
Each tool has a distinct purpose: guide, fetch, tokens, images, scaffold, single component, full conversion. No overlap, clear boundaries.
Naming Consistency5/5
All tool names follow a consistent verb_noun snake_case pattern (e.g., get_figma_design, extract_design_tokens).
Tool Count5/5
Seven tools adequately cover the design-to-React workflow without being excessive or insufficient.
Completeness5/5
The tool set covers the entire process: fetching design, extracting tokens, downloading images, scaffolding, generating components, and full end-to-end conversion.
Average 4.1/5 across 7 of 7 tools scored.
See the Tool Scores section below for per-tool breakdowns.
- No community issues in the last 6 months
- 2 commits in the last 12 weeks
- No stable releases found
- No critical vulnerability alerts
- No high-severity vulnerability alerts
- No code scanning findings
- CI status not available
This repository is licensed under MIT License.
This repository includes a README.md file.
No tool usage detected in the last 30 days. Usage tracking helps demonstrate server value.
Tip: use the "Try in Browser" feature on the server page to seed initial usage.
Add a glama.json file to provide metadata about your server.
If you are the author, simply .
If the server belongs to an organization, first add glama.json to the root of your repository:
```
{
  "$schema": "https://glama.ai/mcp/schemas/server.json",
  "maintainers": [
    "your-github-username"
  ]
}
```
Then . Browse examples.
Add related servers to improve discoverability.

How to sync the server with GitHub?

Servers are automatically synced at least once per day, but you can also sync manually at any time to instantly update the server profile.

To manually sync the server, click the "Sync Server" button in the MCP server admin interface.

How is the quality score calculated?

The overall quality score combines two components: Tool Definition Quality (70%) and Server Coherence (30%).

Tool Definition Quality measures how well each tool describes itself to AI agents. Every tool is scored 1–5 across six dimensions: Purpose Clarity (25%), Usage Guidelines (20%), Behavioral Transparency (20%), Parameter Semantics (15%), Conciseness & Structure (10%), and Contextual Completeness (10%). The server-level definition quality score is calculated as 60% mean TDQS + 40% minimum TDQS, so a single poorly described tool pulls the score down.

Server Coherence evaluates how well the tools work together as a set, scoring four dimensions equally: Disambiguation (can agents tell tools apart?), Naming Consistency, Tool Count Appropriateness, and Completeness (are there gaps in the tool surface?).

Tiers are derived from the overall score: A (≥3.5), B (≥3.0), C (≥2.0), D (≥1.0), F (<1.0). B and above is considered passing.

Tool Scores

Behavior2/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must fully disclose behavioral traits. It fails to mention whether the tool is read-only (does it modify the Figma file?), authentication requirements, rate limits, or what happens on errors. The description only states what it does, not behavioral aspects.
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?
The description is two sentences, each earning its place: first sentence defines purpose and outputs, second sentence provides usage advice. No wasted words, front-loaded with key information.
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?
Given the tool has 2 parameters, no output schema, and no annotations, the description covers the basic purpose and outputs but lacks details on parameter semantics (especially 'depth') and behavioral traits. It is adequate but not comprehensive for an extraction tool with moderate complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters2/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 50% (only figmaUrl has a description). The description adds no extra meaning for the 'depth' parameter, nor does it explain the format of figmaUrl beyond the schema. It mentions 'walk a Figma file/node' but does not clarify how depth controls traversal. The description adds minimal value beyond 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?
The description clearly states the tool's action ('Walk a Figma file/node and extract colors, typography, spacing, radii, and shadows') and its output formats (Tailwind config, CSS variables, Antd theme). It distinguishes from siblings like 'get_figma_design' and 'convert_figma_to_react' by focusing on token extraction rather than design retrieval or component conversion.
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?
The description provides guidance on when to use the tool ('Wire these in before writing components'), implying use before component development. However, it does not explicitly state when not to use it or compare to alternatives. The sibling tool names give context, but the description itself could be more explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior3/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must fully disclose behavior. It states the core action (rendering to URLs, optional local save) and format selection, but lacks details on authentication, rate limits, or side effects like file overwrites. It does not contradict any annotations.
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?
Two sentences: first explains core function and format hint, second adds optional local save. No wasted words, front-loaded, and efficiently covers key points.
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?
Given no output schema, the description adequately explains the output (image URLs) and optional side effect (local save). It covers the main use case but could mention default behavior for nodeIds or format. Overall sufficient for the tool's complexity.
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 description adds value beyond the schema by explaining format choice ('svg for icons/vectors, png for raster'), which is not in the schema. Schema already covers nodeIds, figmaUrl, and localDir with descriptions (60% coverage). The description enhances semantic understanding of the format parameter.
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?
The description clearly states the tool's function: rendering node IDs to image URLs, with specific format guidance (svg for vectors, png for raster). The title 'Export Figma images / icons' reinforces this purpose, and the tool is distinct from siblings like 'get_figma_design' which likely retrieves design data, not images.
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 explicit guidance on when to use this tool versus siblings like 'get_figma_design' or 'convert_figma_to_react'. The description implies image export but does not mention alternative tools or when not to use it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior3/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description discloses key behaviors: file writing when outDir is set, code return otherwise, and that it's 'heavy lifting'. However, it does not mention potential side effects like file overwriting or authentication requirements, which would be valuable for a mutation-capable tool.
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?
The description is two sentences long, front-loading the core purpose in the first sentence. Every clause adds value (libraries, file writing behavior, usage hint). No redundancy or filler.
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 is provided, so the description should clarify the return type. It says 'code is returned' but not the format (string, object?). It also does not mention error cases (invalid frames) or performance implications. Given the tool's complexity (4 params, writes to disk), completeness is adequate but not thorough.
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 coverage is 75% (3 of 4 parameters have descriptions). The description adds context like defaulting componentName to PascalCase, but does not explain the 'depth' parameter (missing from schema). The added value over the schema is moderate but not exceptional.
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?
The description clearly states the tool turns a Figma frame into a .tsx component, specifying the exact frameworks and libraries used (antd, Tailwind, AG Grid, ApexCharts). It distinguishes from siblings like 'convert_figma_to_react' and 'scaffold_react_project' by detailing the complex output.
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?
The description implies when to use the tool ('refine the result rather than writing from scratch') and contrasts with sibling tools listed in context. However, it lacks explicit exclusions or when not to use, but the provided context signals (siblings) help fill the gap.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It details key behaviors: returns a summary only, asks about mobile export with elicitation default, writes to disk, and accepts various URL formats. Missing details like destructive writes or error handling, but overall informative.
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?
The description is a single paragraph that efficiently covers the core process and key decisions. While it is somewhat long, every sentence adds useful context. Could be more structured with bullet points, but it is clear and front-loaded.
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?
Given the tool's complexity (7 parameters, no output schema, no annotations), the description covers the main functionality, output format (summary), mobile handling, and tech stack. Missing details on failure modes or size limits, but sufficient for most use cases.
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 86%, high, so baseline is 3. The description adds value beyond schema by explaining default behaviors (e.g., exportMobileToReactNative elicitation), contextualizing depth and mobileMaxWidth, and clarifying figmaUrl usage with node-id. Justifies a 4.
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?
The description clearly states the end-to-end conversion from a Figma file to a React project, listing specific actions (fetch, extract tokens, scaffold, generate components) and distinguishing it from sibling tools like get_conversion_guide or generate_component.
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?
The description explains when to use this tool (for whole-file conversion) and mentions optional scope narrowing via node-id, but does not explicitly state when not to use or provide direct comparisons with siblings. However, the implicit context is sufficient for an agent to infer usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It states 'Return the rules,' clearly indicating a read-only, non-destructive operation. However, it does not mention authentication, rate limits, or side effects, though these are less critical for a static data retrieval tool.
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?
Description is a single sentence that efficiently conveys the tool's purpose and the specific rules it returns. Every phrase (component mapping, table→AG Grid, etc.) adds value with no wasted words.
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?
Given the tool has no parameters, no output schema, and a clear static purpose, the description fully explains what the tool returns and the scope (Figma tree to specific tech stack). No missing information for an agent to decide to invoke it.
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 input schema has zero parameters, so schema coverage is effectively 100%. The description adds no parameter info, but the baseline for 0 parameters is 4, as per guidelines. No additional value needed.
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?
The description clearly states the tool returns conversion rules for a specific tech stack (React, Ant Design, AG Grid, ApexCharts, Tailwind). It lists specific rule types (component mapping, table→AG Grid, chart→ApexCharts, project structure), distinguishing it from sibling tools like convert_figma_to_react or get_figma_design.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines3/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use when needing conversion rules but does not explicitly state when to use versus alternatives (e.g., convert_figma_to_react). No explicit when-not conditions or prerequisites are given, relying on the tool's name and purpose alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Discloses side effect (writes to disk) and output format (list of files, no boilerplate). No annotations provided, so description carries full burden; it mostly satisfies but could warn about overwriting existing directories.
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?
Two sentences, zero waste, front-loaded with key information (tech stack, tokens, side effect, output).
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?
Given moderate complexity and no output schema, description adequately covers return format and technology stack. Could elaborate on outDir usage but schema covers it.
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 coverage is 75% (3 of 4 parameters described). Description adds no further semantic detail beyond schema; baseline 3 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?
The description clearly states it generates a React+Vite+antd+AG Grid+ApexCharts+Tailwind project skeleton with Figma design tokens wired in. It distinguishes from siblings like generate_component and convert_figma_to_react by being a one-time scaffolding tool.
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?
Explicitly says 'Run this once, then add generated pages/components', providing clear when-to-use guidance and implied exclusion of subsequent subtasks delegated to siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Behavior4/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, but the description details what the tool returns (tree, styles, hints, Tailwind classes) and mentions token-saving features like outline format and pruning. It transparently describes its non-destructive fetch behavior.
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?
Two concise sentences: the first states the core function, the second gives usage guidance. No unnecessary words; front-loaded with the key verb 'Fetch'.
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?
Despite lacking an output schema, the description sufficiently explains the output (tree with layout, style, hints, Tailwind). It positions the tool as the initial step in a Figma-to-React workflow, which is complete for its role.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters5/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, but the description adds significant value beyond schema definitions, e.g., explaining format trade-offs (outline vs JSON), the purpose of pruning wrappers, and the token-saving benefit of collapsing repeats.
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?
The description clearly states the tool fetches a Figma file/node and returns a compact LLM-friendly tree with layout, style, and Tailwind classes. It differentiates itself by being the first step before generating React code.
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?
Explicitly says 'Use this FIRST before generating any React code,' providing clear when-to-use guidance. It does not list alternatives but the context implies it as a prerequisite.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

GitHub Badge

Glama performs regular codebase and documentation scans to:

Confirm that the MCP server is working as expected.
Confirm that there are no obvious security issues.
Evaluate tool definition quality.

Our badge communicates server capabilities, safety, and installation instructions.

Card Badge

Copy to your README.md:

[![figma-to-react-mcp MCP server](https://glama.ai/mcp/servers/sankalp51/figma-to-react-mcp/badges/card.svg)](https://glama.ai/mcp/servers/sankalp51/figma-to-react-mcp)

Score Badge

Copy to your README.md:

[![figma-to-react-mcp MCP server](https://glama.ai/mcp/servers/sankalp51/figma-to-react-mcp/badges/score.svg)](https://glama.ai/mcp/servers/sankalp51/figma-to-react-mcp)

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/sankalp51/figma-to-react-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server