Figma MCP Server

这是一个用于与Figma设计进行交互的Model Context Protocol (MCP)服务器。此服务器允许Claude AI从Figma文件中提取设计信息，并通过Figma插件创建或更新设计。

功能

• 只读模式：使用URL链接从Figma文件中提取设计信息
• 写入模式：通过与Figma插件建立连接来创建或更新设计
• 全面API：通过统一的API访问广泛的Figma功能
• 单元测试：包含测试以验证服务器功能
• 集成测试：测试从创建设计到读取设计的流程

模式

只读模式

在只读模式下，服务器可以使用URL链接从Figma文件中提取设计信息。这包括：

• 文件信息
• 节点详情
• 样式（颜色、文本、效果）
• 资产（图像）
• 变量
• 组件识别
• 变体检测
• 响应式设计检测

写入模式

在写入模式下，服务器可以通过与Figma插件建立连接来创建或更新设计。这包括：

• 创建框架、形状、文本和组件
• 创建组件实例
• 更新节点属性
• 设置填充、描边和效果
• 删除节点
• 智能元素创建

预备条件

• Node.js 18或更高版本
• Figma账户及访问令牌
• 在Figma桌面应用中安装Figma MCP插件（适用于写入模式）

安装

1. 克隆仓库：

git clone https://github.com/your-username/figma-server.git
cd figma-server

2. 安装依赖项：

npm install

3. 构建服务器：

npm run build

配置

服务器需要在环境中设置Figma访问令牌：

export FIGMA_ACCESS_TOKEN=your_figma_access_token

使用方法

启动服务器

npm start

开发模式

npm run dev

运行测试

# 运行单元测试
npm test

# 运行集成测试（TypeScript）
npm run test:integration

# 运行集成测试（JavaScript）
npm run test:integration-js

# 运行所有测试
npm run test:all

# 测试插件连接
npm run test:plugin-connection-js

插件连接测试是一个简单的WebSocket服务器，监听来自Figma插件的连接。它有助于验证插件是否运行并能够连接到服务器。

提供的JavaScript版本的测试不需要TypeScript编译，在某些环境中可能更可靠。

项目结构

figma-server/
├── src/                      # 源代码
│   ├── core/                 # 核心功能
│   │   ├── config.ts         # 配置管理
│   │   ├── logger.ts         # 日志工具
│   │   ├── types.ts          # 常用类型定义
│   │   └── utils.ts          # 工具函数
│   ├── readonly/             # 只读模式实现
│   │   ├── api-client.ts     # Figma REST API客户端
│   │   ├── design-manager.ts # 设计信息提取
│   │   └── style-extractor.ts # 样式提取工具
│   ├── write/                # 写入模式实现
│   │   ├── plugin-bridge.ts  # 插件通信的WebSocket服务器
│   │   ├── design-creator.ts # 设计创建工具
│   │   └── component-utils.ts # 组件工具
│   ├── mcp/                  # MCP服务器实现
│   │   ├── server.ts         # 主MCP服务器
│   │   ├── tools.ts          # 工具定义
│   │   └── handlers.ts       # 工具处理器
│   ├── index.ts              # 入口点
│   └── mode-manager.ts       # 模式管理（只读/写入）
├── tests/                    # 测试文件
│   ├── unit/                 # 单元测试
│   │   └── server.test.ts    # 服务器测试
│   └── integration/          # 集成测试
│       └── design-flow.test.ts # 设计流程测试
├── plugin/                   # Figma插件
│   ├── code.js               # 插件代码
│   ├── manifest.json         # 插件清单
│   └── ui.html               # 插件UI
└── docs/                     # 文档
    └── usage.md              # Claude AI使用说明

文档

详细的使用说明，请参阅使用文档。

许可证

ISC