Figma MCP Server

An mcp server that efificiently generates a node tree and related metadata for a figma node.

Catalog onlyCatalog onlySTDIO

Overview

Figma MCP Server is an MCP (Model Context Protocol) server designed to analyze Figma file structures and efficiently generate a node tree along with related metadata.

To use the Figma MCP Server, install it via npm or clone the repository from GitHub. Configure your Figma API key in the environment file, then start the server to analyze Figma files through REST API or MCP protocol.

Analyze Figma files to extract node hierarchies - Supports both REST API and MCP protocol - Configurable node tree depth - Health check and OpenAPI specification endpoints

Extracting design components from Figma files for documentation.
Integrating Figma design data into other applications.
Analyzing design structures for automated testing or validation.

Add to your AI client

Use these steps to connect Figma MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-figma-moonray": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-figma-moonray"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-figma-moonray": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-figma-moonray"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-figma-moonray": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-figma-moonray"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-figma-moonray": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-figma-moonray"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-figma-moonray": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-figma-moonray"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-figma-moonray": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-figma-moonray"
      ]
    }
  }
}

FAQ

What is required to run Figma MCP Server?

You need Node.js 16+, npm or yarn, and a Figma API key.

Can I run Figma MCP Server in a Docker container?

Yes! A Dockerfile is provided for containerized deployment.

How do I analyze a Figma file?

Use the POST /analyze endpoint with the Figma file URL and desired depth.

Developer tools