MCP HubMCP Hub
TimHolden

figma-mcp-server

by: TimHolden

Model Context Protocol server implementation for Figma API

100created 28/12/2024
Visit
Figma
Protocol

📌Overview

Purpose: To provide seamless integration with Figma's API through a Model Context Protocol (MCP) server, enabling advanced design token and theme management capabilities.

Overview: The Figma MCP Server is a TypeScript-based server designed for read-only access to Figma files and projects. By leveraging Claude and other MCP-compatible clients, it streamlines the management of design systems while offering a foundation for future feature enhancement as Figma's API evolves.

Key Features:

  • Secure API Authentication: Provides secure access to Figma's API using a personal access token.

  • File Operations: Supports read operations to retrieve file details and list projects within Figma, ensuring efficient file management.

  • Design System Management: Enables the creation and management of design tokens and themes, including variable creation and reference handling.

  • Performance Optimization: Features an LRU caching mechanism, rate limit handling, and connection pooling to enhance server responsiveness.

  • Comprehensive Monitoring: Implements health checks, usage statistics, and error tracking for effective service management.

Figma MCP Server

A Model Context Protocol (MCP) server that provides integration with Figma's API through Claude and other MCP-compatible clients. It currently supports read-only access to Figma files and projects, with a server-side architecture designed for future enhancements.

Project Status

Current Progress

  • Core Implementation: TypeScript server built following the Model Context Protocol (MCP).
  • Claude Desktop Integration: Functional with Claude Desktop.
  • Read Operations: Includes get-file and list-files tools.
  • Server Architecture: Features caching system, error handling, and stats monitoring.
  • Transport Protocols: Supports stdio and SSE mechanisms.

Potential Full Functionality

The server is designed to support code for the following features, pending API enhancements:

  • Variable Management: CRUD operations for design tokens.
  • Reference Handling: Token relationships can be created and validated.
  • Theme Management: Creation of themes with multiple modes.
  • Dependency Analysis: Detection of circular references.
  • Batch Operations: Bulk actions on variables and themes.

Features

  • Secure authentication with Figma API.
  • File operations: Read and list files.
  • Design system management: Variable and theme creation.
  • Performance optimization: LRU caching, rate limit handling, and connection pooling.
  • Comprehensive monitoring: Health checks, usage statistics, and error tracking.

Prerequisites

  • Node.js 18.x or higher.
  • Figma access token with appropriate permissions.
  • Basic understanding of Model Context Protocol (MCP).

Installation

npm install figma-mcp-server

Configuration

  1. Create a .env file based on .env.example:

    FIGMA_ACCESS_TOKEN=your_figma_token
MCP_SERVER_PORT=3000
DEBUG=figma-mcp:*

  2. Configure for Claude Desktop integration with absolute paths in your config file.

Usage

Basic Usage

import { startServer } from 'figma-mcp-server';

const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);

Available Tools

  1. get-file: Retrieve file details.
  2. list-files: List files in a project.
  3. create-variables: Create design system variables.
  4. create-theme: Create and configure themes.

API Documentation

Server Methods

  • startServer(figmaToken: string, debug?: boolean, port?: number): Initializes and starts the MCP server.

Tool Schemas

Tool inputs are validated using Zod schemas.

Error Handling

The server provides detailed error messages and proper error codes for various issues.

Limitations & Known Issues

  1. Limited to read-only operations due to Figma API restrictions.
  2. Follows Figma API rate limits.
  3. Default cache management settings.
  4. Only supports personal access tokens.
  5. Requires absolute paths in configuration.

Contributing

  1. Fork the repository.
  2. Create a feature branch.
  3. Make changes with tests.
  4. Submit a pull request.

License

MIT License.

Troubleshooting

For detailed solutions to common issues, please refer to the troubleshooting guide.

Support