Mohammeduvaiz Figma MCP Server

🚀 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 your design system.
• UI Content Management: Extract and organize all UI text in your designs.
• Developer Handover: Generate comprehensive documentation for developers.
• Smooth Integration with AI: Connect your designs to MCP - enabled AI tools such as Claude, Cursor, etc.

🚀 Quick Start

Prerequisites

• Node.js 16 or higher.
• A Figma personal access token (obtainable 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
   

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": {
        "FIGMA_API_TOKEN": "your_figma_personal_access_token"
      }
    }
  }
}

Project - Specific Configuration

Create an mcp.json file in the project root directory:

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

💻 Usage Examples

Available Tools

1. Figma Document Operations

• getDocument(): Get detailed information about the current document.
• getPageIds(): Return all page IDs in the document.
• getPage(pageId): Get information about the specified page.

2. Page Content Management

• getComponents(pageId): Return all components on the page.
• getStyles(): Get all styles on the page.
• getElements(): Return all elements on the page.

Prompt Example

{
  "tool": "figma",
  "prompt": "Please describe how to optimize the user experience of this page.",
  "args": {
    "pageId": "your_page_id"
  }
}

📚 Documentation

Environment Variables

The following environment variables are required for the server to run:

Architecture

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 for LLMs to interact with your Figma designs.
4. Supports stdio transport (local connection) and SSE transport (remote connection).

🤝 Contribution

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