Figma MCP Server

Figma MCP Server

A TypeScript server implementing the Model Context Protocol (MCP) for the Figma API, enabling standardized context provision for LLMs.

Overview

This server provides MCP-compliant access to Figma resources, allowing LLM applications to seamlessly integrate with Figma files, components, and variables. It implements the full MCP specification while providing specialized handlers for Figma's unique resource types.

Key Features

• MCP Resource Handlers

  • Figma files access and manipulation
  • Variables and components management
  • Custom URI scheme (figma:///)

• Robust Implementation

  • Type-safe implementation using TypeScript
  • Request validation using Zod schemas
  • Comprehensive error handling
  • Token validation and API integration
  • Batch operations support

Project Structure

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

Installation

npm install @modelcontextprotocol/sdk
npm install

Configuration

1. Set up your Figma access token:

   export FIGMA_ACCESS_TOKEN=your_access_token
   

2. Configure the server (optional):

   export MCP_SERVER_PORT=3000
   

Usage

Starting the Server

npm run start

Using as an MCP Server

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

stdio Transport

figma-mcp-server < input.jsonl > output.jsonl

SSE Transport

figma-mcp-server --transport sse --port 3000

Client Integration

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

// Initialize the client
const transport = new StdioClientTransport({
  command: "path/to/figma-mcp-server",
});

const client = new Client({
  name: "figma-client",
  version: "1.0.0",
}, {
  capabilities: {
    resources: {} // Enable resources capability
  }
});

await client.connect(transport);

// List available Figma resources
const resources = await client.request(
  { method: "resources/list" },
  ListResourcesResultSchema
);

// Read a specific Figma file
const fileContent = await client.request(
  {
    method: "resources/read",
    params: {
      uri: "figma:///file/key"
    }
  },
  ReadResourceResultSchema
);

// Watch for file changes
const watcher = await client.request(
  {
    method: "resources/watch",
    params: {
      uri: "figma:///file/key"
    }
  },
  WatchResourceResultSchema
);

// Handle resource updates
client.on("notification", (notification) => {
  if (notification.method === "resources/changed") {
    console.log("Resource changed:", notification.params);
  }
});

Resource URIs

The server implements a custom figma:/// URI scheme for accessing Figma resources:

• Files: figma:///file/{file_key}
• Components: figma:///component/{file_key}/{component_id}
• Variables: figma:///variable/{file_key}/{variable_id}
• Styles: figma:///style/{file_key}/{style_id}
• Teams: figma:///team/{team_id}
• Projects: figma:///project/{project_id}

Supported Operations

The server implements the following MCP operations:

• resources/list: List available Figma resources
• resources/read: Read content of Figma resources
• resources/watch: Watch for resource changes
• resources/search: Search across Figma resources
• resources/metadata: Get metadata about resources

Development

Setting Up Development Environment

npm install
npm run build

Running Tests

npm test

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Roadmap

• Implement comprehensive test suite
• Add support for more Figma API endpoints
• Implement caching layer
• Add rate limiting
• Enhance documentation
• Set up CI/CD pipeline
• Add WebSocket transport support
• Implement resource change notifications
• Add plugin system for custom resource handlers

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 licensed under the MIT License - see the LICENSE file for details.

Related Resources

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