Figma Node Explorer

🚀 Figma MCP Server

A Model Context Protocol (MCP) server designed to analyze the structure of Figma files.

🚀 Quick Start

The Figma MCP Server is a powerful tool for analyzing Figma file structures. It supports both REST API and MCP protocols, allowing you to extract node hierarchies from Figma files efficiently.

✨ Features

• Analyze Figma files to extract the node hierarchy.
• Support for both REST API and MCP protocol.
• Configurable node tree depth.

📦 Installation

Prerequisites

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

Install from npm

npm install -g figma-mcp-server

Install from source code

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 obtain the Figma API key from your Figma account settings: https://www.figma.com/developers/api#access-tokens

💻 Usage Examples

As a REST API Server

Start the server:

npm start

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

API Endpoints

• GET /health - Health check endpoint
• GET /openapi.json - OpenAPI specification
• GET /mcp.json - MCP description file
• 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 via the MCP protocol:

figma-mcp-server --cli

Or if running from source code:

npm run start -- --cli

Client Example

A simple client example is provided. 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 an optional depth parameter.

🔧 Technical Details

Run 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