Figma Design Integration MCP Server

Overview

The Figma Design Integration MCP Server is a server implementation based on the Model Context Protocol (MCP). It enables seamless integration of Figma design files with AI coding tools like Cursor, Windsurf, and Cline. By providing AI tools with access to Figma design data, they can generate code that aligns more accurately with the design compared to traditional methods like screenshots.

Features

• Converts Figma design data into a format easily understandable by AI models.
• Supports fetching layout and style information from Figma files, artboards, or components.
• Enables downloading image and icon resources from Figma.
• Reduces the context provided to models, improving the accuracy and relevance of AI responses.

Key Differences from the Original Version

Design File Data Format

{
  "name": "Design File Name",
  "lastModified": "Last Modified Time",
  "thumbnailUrl": "Thumbnail URL",
  "nodes": [
    {
      "id": "Node ID",
      "name": "Node Name",
      "type": "Node Type",
      "text": "Text Content",
      "cssStyles": {
        "width": "100px",
        "height": "50px",
        "position": "absolute",
        "left": "10px",
        "top": "20px",
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 500,
        "textAlign": "center",
        "lineHeight": "24px",
        "color": "#333333",
        "backgroundColor": "#ffffff",
        "borderRadius": "8px",
        "border": "1px solid #eeeeee",
        "boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.1)"
      },
      "fills": [
        {
          "type": "SOLID",
          "color": "#ff0000",
          "opacity": 0.5
        }
      ],
      "exportInfo": {
        "type": "IMAGE",
        "format": "PNG",
        "nodeId": "Node ID",
        "fileName": "suggested-file-name.png"
      },
      "children": []
    }
  ]
}

Data Structure Explanation

SimplifiedDesign

The top-level structure of the design file, containing basic information and all visible nodes.

SimplifiedNode

Represents an element in the design, such as an artboard, frame, text, or shape. Key fields include:
- id: Unique identifier
- name: Name in Figma
- type: Node type (FRAME, TEXT, RECTANGLE, etc.)
- text: Text content (for text nodes)
- cssStyles: CSS style object
- fills: Fill information array
- exportInfo: Export information (for image and SVG nodes)
- children: Array of child nodes

CSSStyle

Contains CSS style properties converted to web standards, such as fonts, colors, borders, and shadows.

ExportInfo

Export information for image and SVG nodes, including:
- type: Export type (IMAGE or IMAGE_GROUP)
- format: Recommended export format (PNG, JPG, SVG)
- nodeId: Node ID for API calls
- fileName: Suggested filename

Installation and Usage

Installing via Smithery

To install the Figma MCP Server for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

Local Development and Packaging

1. Clone the repository.
2. Install dependencies: pnpm install.
3. Copy .env.example to .env and fill in your Figma API access token.
4. Local development: pnpm run dev.
5. Build the project: pnpm run build.
6. Local packaging: pnpm run publish:local.

A .tgz file will be generated in the project root, e.g., figma-mcp-server-1.0.0.tgz.

Local Installation and Usage

Method 1: Install from NPM (Recommended)

# Global installation
npm install -g @yhy2001/figma-mcp-server

# Start the server
figma-mcp --figma-api-key=<your-figma-api-key>

Method 2: Install from Local Package

# Global installation from local package
npm install -g ./figma-mcp-server-1.0.0.tgz

# Start the server
figma-mcp --figma-api-key=<your-figma-api-key>

Method 3: Use in a Project

# Install in the project
npm install @yhy2001/figma-mcp-server --save

# Add to package.json scripts
# "start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"

# Or run directly
npx figma-mcp --figma-api-key=<your-figma-api-key>

Command Line Parameters

• --version: Display version number.
• --figma-api-key: Your Figma API access token (required).
• --port: Server port (default: 3333).
• --stdio: Run server in command mode instead of HTTP/SSE mode.
• --help: Display help menu.

Connecting with AI Tools

Using in Configuration Files

Many tools like Cursor, Windsurf, and Claude Desktop use configuration files to start MCP servers. Add the following to your configuration file:

# MCP Client Usage
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}
# Local Usage
{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Connecting with Cursor

1. Start the server: figma-mcp --figma-api-key=<your-figma-api-key>.
2. Connect the MCP server in Cursor settings → Features tab: http://localhost:3333.
3. Confirm the connection is successful and use Composer in Agent mode.
4. Paste the Figma file link and ask Cursor to implement the design.

Available Tools

The server provides the following MCP tools:

get_figma_data

Fetches information about a Figma file or specific node.

Parameters:
- fileKey: Figma file key.
- nodeId: Node ID (highly recommended).
- depth: Depth of node tree traversal.

download_figma_images

Downloads image and icon resources from a Figma file.

Parameters:
- fileKey: Figma file key containing the nodes.
- nodes: Array of image nodes to fetch.
- localPath: Directory path in the project to store images.

Resources

• Readme

License

MIT License

Contributors

• Henry Mao
• YangHongYu

Languages

• TypeScript 82.8%
• HTML 15.5%
• Other 1.7%