Figma MCP Toolkit

🚀 Figma to React Native Component Converter (MCP)

Use Cursor's MCP tool to convert Figma designs into React Native components. This tool can extract components from your Figma designs and generate corresponding React Native components, including correct types and styles.

🚀 Quick Start

This tool facilitates the conversion of Figma designs into React Native components, streamlining the development process and enhancing efficiency.

✨ Features

• ✅ Extract Figma components
• ✅ Generate React Native components
• ✅ Maintain component hierarchy
• ✅ Handle component properties and types
• ✅ Support nested components
• 🚧 GraphQL schema generation (Coming soon)

📦 Installation

Development Environment

Add the following content to your eas.json file:

{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",          // Your Figma access token
        "FIGMA_FILE": "your_figma_file_id",        // Your Figma file ID (obtained from the URL)
        "PROJECT_DIR": "your_project_directory"    // Location to generate components
      }
    }
  }
}

End Users

Install the MCP server in the 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 Examples

Basic 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 Components

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

📚 Documentation

Configuration

The configuration object accepts the following parameters:

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

Development

To contribute or make modifications:

1. Clone the repository.
2. Install dependencies:

npm install

3. Build:

npm run build

4. Run locally:

npm start

Environment Variables

When running locally, you need to set the following in the .env file:

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 set correctly.
• “Components page not found”: Ensure that your Figma file has a page named “Components”.
• “Failed to fetch Figma file”: Verify your Figma token and file ID.

📄 License

MIT

If you need to report an issue or request a feature, please open an issue on GitHub.