Timholden Figma MCP Server

🚀 Figma Model Context Protocol (MCP) Server

A Model Context Protocol (MCP) server for the Figma API implemented in TypeScript, providing standardized context support for Large Language Models (LLMs).

This server offers access to Figma resources compatible with MCP, enabling seamless integration of LLM applications with Figma files, components, and variables. It fully implements the MCP specification and provides dedicated handlers for special Figma resource types.

✨ Features

MCP Resource Handlers

• Access and manipulate Figma files.
• Manage variables and components.
• Support custom URI schemes (figma:///).

Robust Implementation

• Type-safe implementation in TypeScript.
• Request validation using Zod schemas.
• Comprehensive error handling.
• Token verification and API integration.
• Support for batch operations.

📦 Installation

npm install @modelcontextprotocol/sdk
npm install

🚀 Quick Start

Configuration

1. Set your Figma access token:

   export FIGMA_ACCESS_TOKEN=your_access_token
   

2. Configure the server (optional):

   export MCP_SERVER_PORT=3000
   

Start the Server

npm run start

Use as an MCP Server

This server implements the Model Context Protocol, making it compatible with any MCP client. It supports stdio and SSE transports:

stdio Transport

# Run the server in one terminal
npm run dev

# Send a request in another terminal
curl --header "Content-Type: application/json" -d '{"jsonrpc":"2.0","method":"subtract","params":[19,5],"id":1}'

SSE Transport

# Start the server with SSE support
npm run sse

# Connect using a browser or tool
curl --header "Accept: text/event-stream" http://localhost:3000

Resource URIs

The server exposes the following endpoints:

• http://localhost:3000 - Supports stdio and SSE transports.
• ws://localhost:3001 - Supports WebSocket transport (coming soon).

📚 Documentation

Project Structure

figma-mcp-server/
├── src/
│   ├── index.ts         # Main server implementation
│   ├── types.ts         # TypeScript types and interfaces
│   ├── schemas.ts       # Zod validation schemas
│   ├── errors.ts        # Error handling
│   └── middleware/      # Server middleware
├── tests/
│   └── api.test.ts      # API tests
└── package.json

Resource URI Structure

File Resources

{
  "uri": "figma fileId.path",
  "method": "GET"
}

Component Resources

{
  "uri": "figma fileId.components.componentId",
  "method": "POST"
}

Supported Operations

The server currently supports the following operations:

• File reading
• Component querying
• Variable access
• Attribute modification

Debugging

Enable debug logging by setting the DEBUG environment variable:

DEBUG=figma-mcp:* npm start

Error Handling

The server implements standard MCP error codes:

• -32700: Parse error
• -32600: Invalid request
• -32601: Method not found
• -32602: Invalid parameters
• -32603: Internal error
• 100: Resource not found
• 101: Resource access denied
• 102: Resource temporarily unavailable

📄 License

This project is released under the MIT License - see the LICENSE file for details.

Related Resources

• Model Context Protocol Documentation
• MCP Specification
• MCP TypeScript SDK
• Figma API Documentation