Figma to React Native
About
Extracts and analyzes components from Figma design files, enabling seamless integration between Figma designs and React Native development through component hierarchy processing and metadata generation.
Details
- Author
- kailashappdev
- Repository
- kailashGN/figma-mcp-toolkit
- GitHub stars
- 1
- Downloads
- 445
- Categories
- Developer Tools, Other, Frontend, Productivity, Design, File Management, AI, API
- Tags
- #integration
Jump to
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Figma to React NativeCommand (node, npx, python, etc.)nodeArguments-
Argument 1
PATH_TO_REPO/build/index.js
Environment-
FIGMA_FILE
your_figma_file_id -
FIGMA_TOKEN
your_figma_token -
PROJECT_DIR
your_project_directory
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
-
Argument 1
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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
}
extract_components
Extract all components from Figma and generate their corresponding React Native components in the components folder.
extract_specific_component
Extract the specified [ComponentName] component from Figma and generate its corresponding React Native component in the components folder.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"figma to react native": {
"env": {
"FIGMA_FILE": "your_figma_file_id",
"FIGMA_TOKEN": "your_figma_token",
"PROJECT_DIR": "your_project_directory"
},
"args": [
"PATH_TO_REPO/build/index.js"
],
"command": "node"
}
}
}Linux
{
"env": {
"FIGMA_FILE": "your_figma_file_id",
"FIGMA_TOKEN": "your_figma_token",
"PROJECT_DIR": "your_project_directory"
},
"args": [
"PATH_TO_REPO/build/index.js"
],
"command": "node"
}Macos
{
"env": {
"FIGMA_FILE": "your_figma_file_id",
"FIGMA_TOKEN": "your_figma_token",
"PROJECT_DIR": "your_project_directory"
},
"args": [
"PATH_TO_REPO/build/index.js"
],
"command": "node"
}Windows
{
"env": {
"FIGMA_FILE": "your_figma_file_id",
"FIGMA_TOKEN": "your_figma_token",
"PROJECT_DIR": "your_project_directory"
},
"args": [
"PATH_TO_REPO/build/index.js"
],
"command": "node"
}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.
{ "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" } } } }
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\" }"
After installation, you can use the following prompts in Cursor:
using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder
using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder
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 }
- ✅ Extract components from Figma
- ✅ Generate React Native components
- ✅ Maintain component hierarchy
- ✅ Handle component props and types
- ✅ Support nested components
- Clone the repository
- Install dependencies:
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
- "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
For issues and feature requests, please open an issue on GitHub.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
A growing collection of MCP tools for Android Development. Currently features a deterministic Figma-SVG-to-Android-XML converter, with plans for Gradle analysis, Resource management, and ADB integration tools.
Integrates Cursor AI with Figma to read and programmatically modify designs.
Integrate Figma design data with AI coding tools using a local MCP server.
Provides Figma layout information to AI coding agents like Cursor.
Enables AI assistants to interact with and automate Figma designs programmatically.
Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.
Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.
Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.
A Vue 3 component library with automated design token synchronization from Figma.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
