Figma Design System

🚀 Figma MCP Server

A Model Context Protocol (MCP) server that connects to the Figma API, allowing AI tools and Large Language Models (LLMs) to access and manipulate your Figma designs.

✨ Features

• Design Data Extraction: Extract components, styles, and text from your Figma designs.
• Design System Analysis: Analyze the consistency and patterns of the design system.
• UI Content Management: Extract and organize all UI text content.
• Development Handover: Generate comprehensive documentation for developers.
• Seamless AI Integration: Connect your designs to AI tools such as Claude, Cursor, and other MCP-compatible clients.

🚀 Quick Start

Prerequisites

• Node.js 16 or higher.
• A Figma personal access token (obtained from your Figma account settings).

📦 Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Create a .env file in the project root directory:

   FIGMA_API_TOKEN=Your_Figma_Personal_Access_Token
   API_KEY=Your_Secure_API_Key
   TRANSPORT_TYPE=stdio
   

4. Build the server:

   npm run build
   

5. Start the server:

   npm start
   

💻 Usage Examples

Connecting to Clients

Claude for Desktop

1. Open or create the configuration file for Claude for Desktop:

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows: %APPDATA%\Claude\claude_desktop_config.json

2. Add the following configuration:

   {
     "mcpServers": {
       "figma": {
         "command": "node",
         "args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
         "env": {
           "FIGMA_API_TOKEN": "Your_Figma_Personal_Access_Token",
           "TRANSPORT_TYPE": "stdio"
         }
       }
     }
   }
   

3. Restart Claude for Desktop.

Cursor

Global Configuration

Create or edit Cursor's MCP configuration file:

• macOS: ~/Library/Application Support/Cursor/mcp.json
• Windows: %APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "Your_Secure_API_Key"
      }
    }
  }
}

Project-Specific Configuration

1. Create a .cursor directory in the project root:

   mkdir -p .cursor
   

2. Create a mcp.json file in this directory:

   {
     "mcpServers": {
       "figma-mcp": {
         "url": "http://localhost:3000/sse",
         "env": {
           "API_KEY": "Your_Secure_API_Key"
         }
       }
     }
   }
   

Available Tools

Available Prompts

• analyze-design-system - Analyze the components and styles of the design system to find consistency.
• extract-ui-copy - Extract and organize all UI text content.
• generate-dev-handoff - Generate development handover documentation.

🔧 Technical Details

This MCP server:

1. Connects to the Figma API using your personal access token.
2. Exposes a standard interface following the Model Context Protocol.
3. Provides tools, resources, and prompts to enable LLMs to interact with your Figma designs.
4. Supports two transport methods: stdio (local connection) and SSE (remote connection).

🤝 Contribution

Contributions are welcome! Please feel free to submit a Pull Request.