How do I use figma-to-react-mcp?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@figma-to-react-mcp convert this Figma file to React" 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-to-react-mcp

by sankalp51

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

figma-to-react-mcp

An MCP server that helps Claude (or any MCP client) turn a whole Figma file into a React project using Ant Design v5, AG Grid (for all tables), ApexCharts (for all charts), and Tailwind CSS (for layout/styling) — and optionally export the mobile-only screens as a React Native (Expo) app.

Whole-file conversion: convert_figma_to_react now takes a whole Figma file and generates one page per top-level screen across every page/canvas — not one frame at a time. When it finds mobile-only screens (width ≤ 480px) it asks whether to also export them as a React Native app.

It does the heavy lifting the model can't do well on its own:

pulls the design from the Figma API and simplifies the giant node tree into a compact, token-efficient structure — collapsing repeated rows/cards, pruning pass-through wrappers, truncating large tables to a few sample rows, and stripping chart nodes down to their text (legend/axis labels) since the plotted vectors are useless to the model,
returns that tree as a compact outline (~half the tokens of pretty JSON) instead of a giant JSON dump,
attaches a semantic role and suggested Tailwind classes to each node,
generates ready-to-use .tsx — antd components by role, Tailwind for layout, AG Grid (with columnDefs derived from table headers) for tables, ApexCharts (<ReactApexChart> with the chart type guessed from the layer name and labels/categories lifted from the design's text) for charts, repeated rows expanded to .map(),
scaffolds and writes a whole Vite project to disk (package.json, tailwind config, CSS vars, antd ConfigProvider theme, a shared ApexCharts palette from the design's colors) so boilerplate never enters the model's context,
extracts design tokens, exports icons/images,
ships a conversion guide (as a tool, prompt, and resource) so generated code follows the antd + AG Grid + ApexCharts + Tailwind conventions consistently.

Tools

Tool	What it does
`convert_figma_to_react`	Whole file, one-shot. Fetch → tokens → enumerate every screen across all pages → scaffold project → generate one page per screen, all written to `outDir`. Detects mobile-only screens (≤480px) and asks whether to also export them as a React Native (Expo) app (written to `<outDir>-mobile`). Returns a short summary only.
`get_figma_design`	Fetch a file/frame → compact outline (or minified JSON) with roles + Tailwind hints, repeats collapsed. Call first for manual flows.
`scaffold_react_project`	Generate the full Vite + antd + AG Grid + ApexCharts + Tailwind skeleton with tokens wired in, written to disk.
`generate_component`	Turn one frame into a ready-to-use `.tsx` (antd + Tailwind + AG Grid + ApexCharts). Writes to disk or returns the code.
`extract_design_tokens`	Colors, type, spacing, radii, shadows → tailwind config + CSS vars + antd theme.
`download_figma_images`	Render node ids to svg/png/jpg URLs; optionally save to disk.
`get_conversion_guide`	The mapping rules (also a prompt `figma_to_react` and resource `guide://figma-to-react`).

Why this uses fewer tokens

The design comes back as an indented outline with repeated siblings collapsed (x40) and big tables truncated to a header + a few sample rows — not the full node tree as pretty JSON.
Generated code and project boilerplate are written to disk, so they never pass through the model's context. convert_figma_to_react returns only a summary (files written, primary color).
The model's job shrinks from writing every component from a huge tree to refining a working scaffold.

Related MCP server: Figma MCP Server

Setup

Get a Figma token: figma.com → Settings → Personal access tokens. Copy .env.example to .env and paste it in (or pass it via the client config below).
Install & build:
```
npm install
npm run build
```
Point your MCP client at it (examples below), using an absolute path to dist/index.js.

Claude Desktop / Cursor (`mcpServers` JSON)

{
  "mcpServers": {
    "figma-to-react": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/figma-to-react-mcp/dist/index.js"],
      "env": { "FIGMA_ACCESS_TOKEN": "figd_your_token_here" }
    }
  }
}

Claude Code (CLI)

claude mcp add figma-to-react \
  --env FIGMA_ACCESS_TOKEN=figd_your_token_here \
  -- node /ABSOLUTE/PATH/figma-to-react-mcp/dist/index.js

Restart the client, then try: "Use figma_to_react on <your Figma frame URL>."

Typical flow the model follows

Fast path (server does the lifting):

convert_figma_to_react with { figmaUrl, outDir } (pass a whole file URL or bare file key) → fetches, tokenizes, enumerates every top-level screen, scaffolds the project, and generates one page per screen to disk. Returns a short summary.
If the file has mobile-only screens (≤480px), the tool asks whether to also export them as an Expo React Native app. Clients that support MCP elicitation show this prompt inline; otherwise pass exportMobileToReactNative: true (or false) explicitly. The Expo app is written to <outDir>-mobile (override with reactNativeOutDir).
download_figma_images → pull any icons/images.
Open the generated files and refine: wire real data into AG Grid rowData and ApexCharts series, fix any roles the heuristics missed, snap arbitrary Tailwind values (p-[16px]) to the token scale (p-4).

Tune mobile detection with mobileMaxWidth (default 480). The web project builds the desktop screens; if the file is entirely mobile it builds all of them so the web app isn't empty.

Finer control:

get_conversion_guide → learn the rules.
get_figma_design → compact outline of the design.
scaffold_react_project → project skeleton + tokens on disk.
generate_component per frame → .tsx scaffolds.
download_figma_images → icons/images.

Either way: every table becomes AG Grid, every chart becomes ApexCharts (typed ApexOptions, palette from src/charts/chart-theme.ts), everything else maps to antd where a role matches, Tailwind handles layout.

Notes & limitations

Uses Figma's REST API (read-only). It reads designs; it never edits them.
Tailwind suggestions use arbitrary values (p-[16px]); after tokens exist, snap them to scale (p-4). The guide tells the model to do this.
colorPrimary in the antd theme is a best-effort guess (most vivid non-neutral color) — sanity-check it.
For huge files, pass depth to get_figma_design/extract_design_tokens to keep responses small, or target a specific frame with ?node-id= in the URL.
Alternative: Figma's official Dev Mode MCP exposes design context too; this server differs by simplifying output and encoding the antd/AG Grid/Tailwind conventions specifically.

Dev

npm run dev   # run from source with tsx
npm run build # compile to dist/

Available Tools

7 tools

convert_figma_to_reactConvert a whole Figma file → React projectA

End-to-end from a whole Figma FILE: fetch the design, extract tokens, enumerate EVERY top-level screen across all pages, scaffold the React + Vite + antd + AG Grid + ApexCharts + Tailwind project, and generate one page component per screen — writing everything to disk. Returns a concise summary only (the whole project stays out of the model's context). If the file contains mobile-only screens (width ≤ 480px) it ASKS whether to also export those as a separate React Native (Expo) app. Pass a bare file key or any file URL — a specific ?node-id= is optional and just narrows the scope.

ParametersJSON Schema

Name	Required	Description
`depth`	No	Tree depth to fetch (3-6 keeps large files manageable).
`outDir`	Yes	Directory to create the React web project in (server-side path).
`figmaUrl`	Yes	Figma file URL or bare file key. A ?node-id= is optional (narrows to that node's screens).
`projectName`	No
`mobileMaxWidth`	No	Screens at or below this width are treated as mobile-only. Defaults to 480.
`reactNativeOutDir`	No	Where to write the Expo app. Defaults to '<outDir>-mobile'.
`exportMobileToReactNative`	No	Whether to also export mobile-only screens as an Expo React Native app. If omitted, the server asks the user (via elicitation) when mobile screens are found; clients without elicitation default to false.

TDQS

A4.3/5.0

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.

download_figma_imagesExport Figma images / iconsA

Render given node ids to image URLs (svg for icons/vectors, png for raster). Optionally save them to a local directory on the machine running this server.

ParametersJSON Schema

Name	Required	Description	Default
`scale`	No
`format`	No		svg
`nodeIds`	No	Node ids to export (e.g. ['12:34']). Defaults to the node in the URL.
`figmaUrl`	Yes	Figma URL or file key.
`localDir`	No	If set, download the assets into this directory (server-side path).

TDQS

A3.8/5.0

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.

extract_design_tokensExtract design tokensA

Walk a Figma file/node and extract colors, typography, spacing, radii, and shadows. Returns a tailwind.config theme.extend snippet, CSS variables, and an antd ConfigProvider theme. Wire these in before writing components.

ParametersJSON Schema

Name	Required	Description	Default
`depth`	No
`figmaUrl`	Yes	Figma URL or file key.

TDQS

A3.6/5.0

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.

generate_componentGenerate a React component from a frameA

Turn a Figma frame/node into a ready-to-use .tsx component: antd components by role, Tailwind for layout, AG Grid for tables (with columnDefs derived from headers), ApexCharts for charts (type + labels derived from the design), and repeated rows expanded to .map(). If outDir is set the file is written to disk (kept out of context); otherwise the code is returned. This is the heavy lifting — refine the result rather than writing from scratch.

ParametersJSON Schema

Name	Required	Description
`depth`	No
`outDir`	No	If set, write the .tsx here (e.g. <project>/src/pages). Otherwise return the code.
`figmaUrl`	Yes	Figma URL targeting a frame (?node-id=...) or a file key.
`componentName`	No	Component name; defaults to a PascalCase of the frame name.

TDQS

A3.9/5.0

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.

get_conversion_guideGet conversion guideA

Return the rules for turning the simplified Figma tree into a React + Ant Design + AG Grid + ApexCharts + Tailwind project (component mapping, table→AG Grid rules, chart→ApexCharts rules, project structure).

ParametersJSON Schema

Name	Required	Description	Default
No parameters

TDQS

A4.3/5.0

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.

get_figma_designGet Figma design (simplified)A

Fetch a Figma file or a specific node (from a URL or file key) and return a compact, LLM-friendly tree with layout, style, semantic role hints, and suggested Tailwind classes. Use this FIRST before generating any React code.

ParametersJSON Schema

Name	Required	Description	Default
`depth`	No	Limit tree depth fetched from Figma to save tokens (e.g. 3-6).
`format`	No	'outline' (default) is a compact indented text tree — ~half the tokens of JSON. 'json' returns minified JSON when you need to parse it programmatically.	outline
`figmaUrl`	Yes	Figma URL (with ?node-id=... to target a frame) or a bare file key.
`pruneWrappers`	No	Hoist away pass-through wrapper frames that add no styling or layout.
`collapseRepeats`	No	Collapse runs of look-alike siblings (table rows, list items) into one node with a repeat count. Big token saver.
`includeTailwind`	No	Include suggested Tailwind classes per node.

TDQS

A4.6/5.0

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.

scaffold_react_projectScaffold a React project (tokens wired in)A

Generate a complete React + Vite + antd + AG Grid + ApexCharts + Tailwind project skeleton with the Figma design tokens already wired into tailwind.config, index.css, and the antd ConfigProvider theme, and WRITE it to disk. Returns just the list of files written — no boilerplate in context. Run this once, then add generated pages/components.

ParametersJSON Schema

Name	Required	Description
`depth`	No
`outDir`	Yes	Directory to create the project in (server-side path).
`figmaUrl`	Yes	Figma URL or file key (used to extract tokens).
`projectName`	No	Package name; defaults to 'figma-app'.

TDQS

A4.4/5.0

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.

Tool Schema Changelog

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

7 tool updatesv0.1.0Jul 28, 2026
- First observedconvert_figma_to_react
- First observeddownload_figma_images
- First observedextract_design_tokens
- First observedgenerate_component
- First observedget_conversion_guide
- First observedget_figma_design
- First observedscaffold_react_project

Deploy Server

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A4.2/5.0

Scored 2026-07-28 06:16 across 7 tools

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.

Maintenance

ActivityStale

ResponsivenessNo issues

Resources

Need Help?

Related Servers

Related MCP Connectors

recipebooq A
com.recipebooq
Design a React Native app in a browser and emit it as a real Expo project you own, iOS and Android.
Documentation Access Developer Tools
141
design-system
app.zaklad
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Design Tools Developer Tools
2
Anima MCP Server AOAuth
io.github.AnimaApp
Connect AI coding agents to Anima Playground, Figma, and your design system.
Developer Tools App Automation Content Management Systems
2026
marmo-ui A
io.github.mahmoudilyan
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Design Tools Developer Tools
142

Related MCP Servers

Figma to React Native MCP
Developer Tools Code Execution Content Management Systems
kailashGN
A
license
C
quality
D
maintenance
Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Updated a year ago (2025-03-24 09:44 UTC)
3
15 npm
8
MIT
Figma MCP Server
Developer Tools Code Execution
sanjeev23oct
F
license
B
quality
D
maintenance
A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
Updated 4 months ago (2026-05-27 09:05 UTC)
5
1,330 npm
2
-
MCP Figma to React Converter
Developer Tools Content Management Systems App Automation
StudentOfJS
A
license
Not graded
quality
D
maintenance
Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.
Updated a year ago (2025-04-24 08:50 UTC)
77
MIT
@manansiingh/figma-react-mcp
Design Tools Developer Tools
MananSingh2001
A
license
A
quality
D
maintenance
Converts Figma designs into production-ready React components with design token extraction, widget registry integration, and micro-frontend module generation.
Updated 6 months ago (2026-03-18 07:39 UTC)
3
56 npm
1
MIT

figma-to-react-mcp

Tools

Why this uses fewer tokens

Setup

Claude Desktop / Cursor (mcpServers JSON)

Claude Code (CLI)

Typical flow the model follows

Notes & limitations

Dev

Available Tools

Tool Schema Changelog

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

Claude Desktop / Cursor (`mcpServers` JSON)