Back to System Ops

Figma Node Explorer

Integrates with the Figma API to extract and analyze design file structures, enabling exploration of node hierarchies and supporting design system management workflows.

Last updated: 1/27/2026

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
```bash
npm install -g figma-mcp-server
```

### From source
```bash
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:

```bash
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:

```bash
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:

```bash
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:

```bash
figma-mcp-server --cli
```

Or if running from source:

```bash
npm run start -- --cli
```

### Client Example

A simple client example is included. To use it:

```bash
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

```bash
npm run dev
```

### Testing

```bash
npm test
```

## Docker

A Dockerfile is provided for containerized deployment:

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

## License

MIT

Installation

Add this MCP to your configuration:

{
  "mcpServers": {
    "figma-node-explorer": {
      // See GitHub repository for configuration
    }
  }
}

See the GitHub repository for full installation instructions.