Skip to main content
Glama
enesjakozh
kailashGN

Figma to React Native MCP

by kailashGN
OverviewSchemaSourceRelated ServersScoreDiscussionsAdmin
TypeScript
Hybrid

Figma to React Native MCP

Convert Figma designs to React Native components using Cursor's MCP. This tool extracts components from your Figma designs and generates corresponding React Native components with proper typing and styling.

Installation

For Development

Add to your eas.json:

{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",
        "FIGMA_FILE": "your_figma_file_id",
        "PROJECT_DIR": "your_project_directory"
      }
    }
  }
}

For End Users

Install the MCP server in your Cursor IDE:

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  \"figmaToken\": \"YOUR_FIGMA_TOKEN\",
  \"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
  \"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"

Related MCP server: MCP Figma to React Converter

Usage

After installation, you can use the following prompts in Cursor:

Extract All Components

using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder

Extract Specific Component

using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder

Configuration

The config object accepts the following parameters:

{
  "figmaToken": string,    // Your Figma access token
  "figmaFile": string,     // Your Figma file ID (from the URL)
  "projectDir": string     // Where to generate the components
}

Features

Current:

  • ✅ Extract components from Figma

  • ✅ Generate React Native components

  • ✅ Maintain component hierarchy

  • ✅ Handle component props and types

  • ✅ Support nested components

Coming Soon:

  • 🚧 GraphQL schema generation

Development

To contribute or modify:

  1. Clone the repository

  2. Install dependencies:

npm install

  1. Build:

npm run build

  1. Run locally:

npm start

Environment Variables

When running locally, you'll need these in your .env:

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

Error Handling

Common errors and solutions:

  • "Failed to create client": Check if all environment variables are properly set

  • "Components page not found": Ensure your Figma file has a page named "Components"

  • "Failed to fetch Figma file": Verify your Figma token and file ID

License

MIT

For issues and feature requests, please open an issue on GitHub.

Available Tools

3 tools
extract-componentsB

Extract all components from Figma file and get all graphql queries and mutations

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

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

With no annotations provided, the description carries the full burden of behavioral disclosure. It states what the tool does but lacks details on permissions, rate limits, output format, or whether it's read-only or destructive. For a tool with zero annotation coverage, this is a significant gap in transparency.

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 a single, efficient sentence that front-loads the core functionality ('Extract all components from Figma file') and adds secondary action ('get all graphql queries and mutations') without unnecessary elaboration. Every word earns its place.

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

Completeness2/5

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

Given the complexity implied by extracting components and GraphQL queries/mutations, no annotations, and no output schema, the description is incomplete. It lacks details on behavioral traits, output format, and usage context, making it inadequate for informed tool selection.

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

Parameters4/5

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

The tool has 0 parameters, and schema description coverage is 100%, so no parameter documentation is needed. The description doesn't add parameter details beyond the schema, but with no parameters, a baseline of 4 is appropriate as it adequately addresses the lack of parameters.

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

Purpose4/5

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

The description clearly states the action ('extract all components') and target resource ('from Figma file'), and specifies additional functionality ('get all graphql queries and mutations'). It doesn't explicitly differentiate from sibling tools like 'extract-latest-components' or 'extract-one-component', which would require a 5.

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

Usage Guidelines2/5

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

No guidance is provided on when to use this tool versus its siblings ('extract-latest-components' and 'extract-one-component'), nor any context about prerequisites or alternatives. The description implies a comprehensive extraction but lacks explicit usage instructions.

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

extract-latest-componentsB

Extract newly added components from Figma file

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions 'extract' but doesn't clarify if this is a read-only operation, what permissions are needed, how 'newly added' is determined (e.g., based on timestamps or user input), or what the output format might be. This leaves significant gaps for a tool with zero annotation coverage.

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 a single, efficient sentence that states the tool's purpose without any wasted words. It's appropriately sized and front-loaded, making it easy for an agent to parse quickly.

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

Completeness2/5

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

Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what 'newly added' means, how the extraction works, or what the result looks like (e.g., a list of components or metadata). For a tool with zero structured data, this leaves too much ambiguity for reliable agent use.

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

Parameters4/5

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

The tool has 0 parameters, and schema description coverage is 100%, so no parameter documentation is needed. The description doesn't add any parameter information, which is acceptable here, but it could hint at implicit inputs (e.g., file identification), so it doesn't reach a perfect score.

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

Purpose4/5

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

The description clearly states the action ('extract') and resource ('newly added components from Figma file'), making the purpose understandable. However, it doesn't explicitly differentiate from sibling tools like 'extract-components' or 'extract-one-component', which likely handle different scopes of component extraction.

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

Usage Guidelines2/5

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

The description provides no guidance on when to use this tool versus its siblings ('extract-components' and 'extract-one-component'). It implies usage for 'newly added components' but doesn't specify what qualifies as 'newly added' or any prerequisites, leaving the agent to guess when this is appropriate.

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

extract-one-componentC

Extract a single component from Figma file

ParametersJSON Schema
NameRequiredDescriptionDefault
parametersYes

TDQS

C2.4/5.0
Behavior1/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. However, it only states the action without any details on permissions, side effects, rate limits, or output format. For a tool with no annotations, this minimal description fails to provide essential behavioral context.

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 a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's front-loaded and appropriately sized for its content, making it easy to parse quickly.

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

Completeness2/5

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

Given the tool's complexity (1 parameter with nested objects, no annotations, no output schema), the description is incomplete. It lacks details on behavior, parameter usage, and output, which are critical for an agent to use the tool effectively in context with its siblings.

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?

The input schema has 1 parameter with 0% description coverage, and the tool description doesn't add any parameter semantics. It doesn't explain what 'componentName' represents (e.g., format, examples, or constraints), leaving the parameter's meaning unclear beyond the schema's basic type definition.

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

Purpose3/5

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

The description states the tool's purpose ('Extract a single component from Figma file') with a clear verb ('Extract') and resource ('component from Figma file'), but it doesn't distinguish from sibling tools like 'extract-components' or 'extract-latest-components'. The purpose is understandable but lacks specificity about what makes this tool unique compared to its siblings.

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

Usage Guidelines2/5

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

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention sibling tools or specify scenarios where extracting a single component is preferred over batch extraction (e.g., 'extract-components'), leaving the agent without context for tool selection.

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

Tool Schema Changelog

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

  1. 3 tool updatesv1.0.0
    • First observedextract-components
    • First observedextract-latest-components
    • First observedextract-one-component
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

C2.9/5.0

Scored across 3 tools

Disambiguation4/5

The tools are mostly distinct, focusing on different extraction scopes: all components, newly added components, and a single component. However, there is some potential overlap between 'extract-components' and 'extract-latest-components' if an agent needs to understand the difference between 'all' and 'newly added' in practice, but the descriptions clarify this well.

Naming Consistency5/5

All tool names follow a consistent 'extract-[adjective]-components' pattern, using snake_case uniformly. The naming is predictable and clear, making it easy for agents to infer functionality from the names alone.

Tool Count3/5

With only 3 tools, the set feels thin for a server that converts Figma to React Native, as it lacks tools for other operations like updating, deleting, or managing components. While the tools cover extraction well, the scope suggests more functionality might be needed for a complete workflow.

Completeness2/5

The toolset is severely incomplete for the implied domain of converting Figma designs to React Native code. It only provides extraction tools, with no capabilities for generating code, updating components, handling errors, or integrating with React Native projects, leaving significant gaps that will likely cause agent failures in practical use.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Appeared in Searches