mcpField
F
Figma MCP Server

Figma MCP Server

Local
github.com/moonrayMedia & Design2Updated 87w ago
Repository

About Figma MCP Server

Figma MCP Server analyzes Figma files and returns node hierarchies with related metadata. It serves developers and AI clients that need to inspect file structure, with configurable tree depth and both REST and MCP interfaces.

Key features

  1. 01Extract Figma node hierarchies
  2. 02Configure node tree depth
  3. 03Offer REST API and MCP protocol

Use cases

  1. 01Inspect a Figma file’s node structure
  2. 02Limit hierarchy output to a chosen depth

MCP support

It exposes Figma file analysis to MCP clients, generating node hierarchy data from a supplied Figma URL. The same project also offers a REST API.

#mcp-figma#figma#node-tree

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

No install method listed yet

We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.

Repository

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

Figma MCP Server

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

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.