mcp figma

Local 2025-08-31 23:21:29 0
Developer Tools @moonray/mcp-figma

Facilitates the analysis of Figma file structures by extracting node hierarchies, accessible via REST API or MCP protocol.

An MCP (Model Context Protocol) server for analyzing Figma file structures.

Features

  • Analyze Figma files to extract node hierarchies
  • Supports both REST API and MCP protocol
  • Configurable node tree depth

Prerequisites

  • Node.js 16+
  • npm or yarn
  • A Figma API key

Installation

From npm

npm install -g figma-mcp-server

From source

git clone https://github.com/yourusername/mcp-figma.git
cd mcp-figma
npm install
npm run build

Configuration

Copy the example environment file and add your Figma API key:

cp .env.example .env

Then edit the .env file and add your Figma API key:

FIGMA_API_KEY=your_figma_api_key_here

You can get a Figma API key from your Figma account settings: https://www.figma.com/developers/api#access-tokens

Usage

As a REST API Server

Start the server:

npm start

This will start an Express server on port 3000 (or the port specified in your .env file).

API Endpoints

  • GET /health - Health check endpoint
  • GET /openapi.json - OpenAPI specification
  • GET /mcp.json - MCP manifest
  • POST /analyze - Analyze a Figma file

Example request to the analyze endpoint:

curl -X POST http://localhost:3000/analyze 
  -H "Content-Type: application/json" 
  -d '{"figmaUrl": "https://www.figma.com/file/FILE_ID/PROJECT_NAME?node-id=NODE_ID", "depth": 2}'

As an MCP Server

The server can be used directly by an LLM through the MCP protocol:

figma-mcp-server --cli

Or if running from source:

npm run start -- --cli

Client Example

A simple client example is included. To use it:

node client-example.js https://www.figma.com/file/FILE_ID/PROJECT_NAME?node-id=NODE_ID 2

The last parameter is the optional depth parameter.

Development

Running in Development Mode

npm run dev

Testing

npm test

Docker

A Dockerfile is provided for containerized deployment:

docker build -t figma-mcp-server .
docker run -p 3000:3000 --env-file .env figma-mcp-server

License

MIT

[
  {
    "description": "Analyze a Figma file structure to understand its nodes and hierarchy",
    "inputSchema": {
      "properties": {
        "depth": {
          "description": "Optional depth parameter to limit the node tree depth",
          "type": "number"
        },
        "figmaUrl": {
          "description": "The URL of the Figma file to analyze",
          "type": "string"
        }
      },
      "required": [
        "figmaUrl"
      ],
      "type": "object"
    },
    "name": "analyze_figma_file"
  }
]