Figma to React Native MCP server

This MCP server converts Figma designs into React Native components, extracting components from your Figma designs and generating corresponding React Native code with proper typing and styling. It streamlines the process of turning your Figma UI designs into functional React Native components.

Installation Options

Using the MCP Server in Cursor IDE

Install the MCP server directly in your Cursor IDE with the following command:

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

Alternative Installation via EAS

To add the server through your eas.json configuration:

1. Add the following to your eas.json file:

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

Configuration Parameters

The configuration requires 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
}

Required Environment Variables

If running locally, make sure these variables are defined in your environment or .env file:

• FIGMA_TOKEN: Your Figma access token
• FIGMA_FILE: The ID of your Figma file (found in the URL)
• PROJECT_DIR: The directory where components will be generated

Using the MCP Tool

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

Extract All Components From Figma

To generate all components from your Figma file:

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

Extract a Specific Component

To generate only a specific component:

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

Replace [ComponentName] with the actual name of your component in Figma.

Troubleshooting Common Issues

If you encounter errors, check for these common issues:

• "Failed to create client": Verify that all environment variables are correctly set
• "Components page not found": Ensure your Figma file has a page named "Components"
• "Failed to fetch Figma file": Double-check your Figma token and file ID

Supported Features

The MCP tool currently supports:

• Extracting components from Figma
• Generating React Native components
• Maintaining component hierarchy
• Handling component props and types
• Supporting nested components

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.