Figma Design Processor

🚀 Figma MCP Server

A Model Context Protocol (MCP) server that serves as a bridge between Figma designs and React implementations. This server enables pixel-perfect conversion of designs into React applications by processing Figma file data and providing React-friendly formats.

🚀 Quick Start

The Figma MCP Server is designed to transform Figma designs into React applications. It simplifies the process of converting design files into functional React components, ensuring pixel-perfect accuracy.

✨ Features

• Figma API Integration: Connect directly to Figma's API to access design files.
• React-Ready Output: Process Figma data and convert it into a React-compatible format.
• Style Handling: Transform Figma styles into CSS/styled-components.
• Asset Management: Manage image assets and SVG components.
• Layout Conversion: Convert Figma auto-layouts into Flexbox.
• Type Safety: Implement reliable type checking using TypeScript.

🛠️ Provided Tools

get_file_content

• Retrieve and process Figma file content.
• Convert layouts, styles, and components.
• Return a React-ready component structure.

{
  fileKey: string;    // Figma file key
  nodeId?: string;    // Optional specific component ID
}

get_node_images

• Retrieve image assets from Figma.
• Support multiple formats (PNG, JPG, SVG).
• Configurable scaling options.

{
  fileKey: string;    // Figma file key
  nodeIds: string[];  // List of component IDs
  format?: 'png' | 'jpg' | 'svg';
  scale?: number;     // 1-4
}

📦 Installation

1. Clone the repository:

git clone https://github.com/yourusername/figma-mcp.git
cd figma-mcp

2. Install dependencies:

npm install

3. Configure the Figma access token:

cp .env.example .env
# Add your Figma access token to .env

🎯 Cursor IDE Setup

1. Create a .cursor/mcp.json file in the project root directory:

mkdir -p .cursor
touch .cursor/mcp.json

2. For Stdio-based server configuration:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["d:/<folder>>/figma-mcp/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "Your Figma token"
      },
      "disabled": false,
      "alwaysAllow": [],
      "protocol": "stdio"
    }
  }
}

💻 Usage Examples

Basic Usage

1. Build the server:

npm run build

2. Configure MCP settings according to your IDE:

• For Visual Studio Code: Install and configure vscode-mcp to support Figma files.
• For other editors, refer to the advanced configuration in the documentation.

3. Use MCP tools in your project:

npx mcp serve figma

Advanced Usage

• Check the examples directory to see how to convert Figma designs into React components.

Processing Flow

1. Design components in Figma and export them as JSON.
2. Use the get_file_content tool to process the JSON file.
3. Generate React component code and make necessary adjustments.
4. Use get_node_images to obtain the required image assets.
5. Integrate the generated components into your React application.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

🤝 Contribution Guidelines

Contributions are welcome! Please refer to CONTRIBUTING.md to learn how to participate in this project.