Claude 및 기타 MCP 호환 클라이언트를 통해 Figma API와 통합하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 현재 Figma 파일 및 프로젝트에 대한 읽기 전용 접근을 지원하며, 서버 측 아키텍처는 더 고급 디자인 토큰 및 테마 관리 기능을 지원할 수 있습니다(Figma API 개선 또는 플러그인 개발 대기 중).

프로젝트 현황

현재 진행 상황

• ✅ 코어 구현: 모델 컨텍스트 프로토콜(MCP)을 따라 TypeScript 서버를 성공적으로 구축함
• ✅ Claude Desktop 통합: Claude Desktop에서 테스트 및 작동
• ✅ 읽기 작업: Figma 파일 접근을 위한 get-file 및 [list-files 도구
• ✅ 서버 아키텍처: 캐싱 시스템, 오류 처리, 통계 모니터링 구현
• ✅ 전송 프로토콜: stdio 및 SSE 전송 메커니즘 모두 지원

잠재적 완전 기능

서버는 다음과 같은 기능을 지원하도록 코드로 설계되었으며(현재 API 제한으로 제한됨):

• 변수 관리: 디자인 토큰(변수)을 생성, 읽기, 업데이트, 삭제함
• 참조 처리: 토큰 간 관계 생성 및 검증

Figma MCP Server

A Model Context Protocol (MCP) server that provides integration with Figma’s API through Claude and other MCP-compatible clients. Currently supports read-only access to Figma files and projects, with server-side architecture capable of supporting more advanced design token and theme management features (pending Figma API enhancements or plugin development).

Project Status

Current Progress

• ✅ Core Implementation: Successfully built a TypeScript server following the Model Context Protocol (MCP)
• ✅ Claude Desktop Integration: Tested and functional with Claude Desktop
• ✅ Read Operations: Working get-file and list-files tools for Figma file access
• ✅ Server Architecture: Caching system, error handling, and stats monitoring implemented
• ✅ Transport Protocols: Both stdio and SSE transport mechanisms supported

Potential Full Functionality

The server has been designed with code to support these features (currently limited by API restrictions):

• Variable Management: Create, read, update, and delete design tokens (variables)
• Reference Handling: Create and validate relationships between tokens
• Theme Management: Create themes with multiple modes (e.g., light/dark)
• Dependency Analysis: Detect and prevent circular references
• Batch Operations: Perform bulk actions on variables and themes

With Figma plugin development or expanded API access, these features could be fully enabled.

Features

• 🔑 Secure authentication with Figma API
• 📁 File operations (read, list)
• 🎨 Design system management
  • Variable creation and management
  • Theme creation and configuration
  • Reference handling and validation
• 🚀 Performance optimized
  • LRU caching
  • Rate limit handling
  • Connection pooling
• 📊 Comprehensive monitoring
  • Health checks
  • Usage statistics
  • Error tracking

Prerequisites

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

Installation

npm install figma-mcp-server

Configuration

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

# Figma API Access Token
FIGMA_ACCESS_TOKEN=your_figma_token

# Server Configuration
MCP_SERVER_PORT=3000

# Debug Configuration
DEBUG=figma-mcp:*

2. For Claude Desktop integration:

The server can be configured in your Claude Desktop config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

Important Notes:

• Use ABSOLUTE paths, not relative paths
• On Windows, use double backslashes (\\) in paths
• Restart Claude Desktop after making configuration changes

Usage

Basic Usage