Figma 到 React Native MCP

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\"
}"

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:

Clone the repository
Install dependencies:

npm install

Build:

npm run build

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.

This server cannot be installed

security - not tested

license - not found

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

将 Figma 设计转换为 React Native 组件，允许用户从 Figma 设计中提取组件并生成具有适当类型和样式的相应 React Native 组件。

Related MCP Servers

FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
Figma MCP Server
sanjeev23oct
A
security
F
license
A
quality
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.
Last updated -
5
1,066
2
TypeScript
MCP Figma to React Converter
StudentOfJS
-
security
A
license
-
quality
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.
Last updated -
43
TypeScript
MIT License
MCP Design System Bridge
brunonepomuceno
-
security
F
license
-
quality
Enables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.
Last updated -
TypeScript

View all related MCP servers

Figma to React Native MCP

Figma to React Native MCP

Installation

For Development

For End Users

Usage

Extract All Components

Extract Specific Component

Configuration

Features

Development

Environment Variables

Error Handling

License

Related MCP Servers

FigmaMind MCP Server

Figma MCP Server

MCP Figma to React Converter

MCP Design System Bridge

Appeared in Searches

MCP directory API