Figma MCP Server

Figma MCP Server

2025.03.09 115

TypeScript设计工具集成设计系统管理开发效率

Figma MCP Server 是一个基于模型上下文协议（MCP）的服务器，提供与 Figma API 的集成，支持通过 Claude 和其他 MCP 兼容客户端访问 Figma 文件和项目。目前支持对 Figma 文件的只读访问，服务器架构设计支持更高级的设计令牌和主题管理功能（待 Figma API 增强或插件开发）。

View on GitHub

Overview

基本能力

产品定位

Figma MCP Server 是一个中间件服务，旨在为设计工具 Figma 提供 API 集成能力，特别适用于设计系统管理和自动化工作流。

核心功能

🔑 安全的 Figma API 认证
📁 文件操作（读取、列表）
🎨 设计系统管理
变量创建和管理
主题创建和配置
引用处理和验证
🚀 性能优化
LRU 缓存
速率限制处理
连接池
📊 全面监控
健康检查
使用统计
错误跟踪

适用场景

设计系统自动化管理
设计令牌的批量操作
主题配置和管理
设计资产的程序化访问

工具列表

get-file：检索 Figma 文件详情
list-files：列出 Figma 项目中的文件
create-variables：创建设计系统变量
create-theme：创建和配置主题

常见问题解答

JSON 连接错误：确保使用绝对路径配置
认证问题：验证 Figma 访问令牌是否有效
服务器无法启动：检查 Node.js 版本（18.x+）

使用教程

使用依赖

Node.js 18.x 或更高版本
具有适当权限的 Figma 访问令牌
基本了解 MCP（模型上下文协议）

安装教程

npm install figma-mcp-server

配置

创建 .env 文件：

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

Claude Desktop 集成配置：

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

调试方式

基本使用：

import { startServer } from 'figma-mcp-server';
const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);

检查日志：
macOS: ~/Library/Logs/Claude/mcp*.log
Windows: %APPDATA%\Claude\logs\mcp*.log

许可证

该项目遵循 MIT 开源许可条款。