What is Figma Mcp

Figma MCP is a Model Context Protocol server that acts as a bridge between Figma designs and React implementations, enabling pixel-perfect conversion of Figma designs into React applications.

Use cases

Use cases include converting Figma design files into React components, managing design assets, and ensuring consistent styling and layout in React applications.

How to use

To use Figma MCP, clone the repository, install dependencies, configure your Figma access token, and set up the Cursor IDE as per the provided instructions.

Key features

Key features include Figma API integration, React-ready output, style processing to CSS/styled-components, asset management for images and SVGs, layout processing to Flexbox, and type safety with TypeScript.

Where to use

Figma MCP can be used in web development projects where designers create interfaces in Figma and developers need to implement them in React.

Figma MCP Server

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

🚀 Features

• Figma API Integration: Direct connection to Figma’s API for accessing design files
• React-Ready Output: Processes Figma data into React-compatible format
• Style Processing: Converts Figma styles to CSS/styled-components
• Asset Management: Handles image assets and SVG components
• Layout Processing: Converts Figma auto-layout to Flexbox
• Type Safety: Built with TypeScript for reliable type checking

🛠️ Tools Provided

1. get_file_content:

   • Fetches and processes Figma file content
   • Converts layout, styles, and components
   • Returns React-ready component structure

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

2. get_node_images:

   • Retrieves image assets from Figma
   • Supports multiple formats (PNG, JPG, SVG)
   • Configurable scaling options

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

📦 Installation

Installing via Smithery

To install Figma Design to React Converter for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @sanjeev23oct/figma-mcp --client claude

Manual Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Configure your Figma access token:

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

🎯 Cursor IDE Setup

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

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

2. For Stdio-based server configuration:

}

## 💻 Usage

1. Build the server:
 ```bash
 npm run build
 ```

2. Configure MCP settings based on your IDE:

- For VS Code (global settings):
  ```json
  // In settings.json
  {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["path/to/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-token-here"
        }
      }
    }
  }
  ```

- For Cursor IDE:
  Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
  This configuration will take precedence over VS Code settings when using Cursor IDE.

3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
  fileKey: "your-figma-file-key"
});

🧩 Example Project

Check out the raccoon-game directory for a complete example of using this MCP server to create a pixel-perfect React implementation of a Figma design.

🔄 Processing Pipeline

1. Input: Figma file data through official API
2. Processing:
   • Style conversion (colors, typography, effects)
   • Layout transformation (absolute to Flexbox)
   • Component hierarchy mapping
   • Asset optimization
3. Output: React-ready component data

📝 License

MIT License

🤝 Contributing

Contributions welcome! Please read our contributing guidelines.

🙏 Acknowledgments

• Figma API team for the comprehensive API
• Model Context Protocol for the MCP specification

Made with ❤️ by [Your Name]