Figma MCP 服务器

Figma MCP服务器

用于Figma与ChatGPT和其他AI助手集成的模型上下文协议（MCP）服务器。支持OAuth身份验证，并提供查看Figma设计和生成图表预览的工具。

特性

🎨 设计工具

• 获取屏幕截图：生成Figma设计的高质量屏幕截图
• 获取设计背景：从Figma文件中提取设计信息和元数据
• 获取元数据：以XML格式检索文件和节点元数据

📊 图表生成

• 生成图表：创建可导入Figma/FigJam的交互式Mermaid.js图表预览
• 支持流程图、序列图、甘特图和状态图
• 具有缩放、平移和全屏功能的漂亮交互式小部件
• 通过“Figma中的美人鱼”插件轻松导出到Figma

重要限制

Figma REST API为只读

Figma REST API 不支持创建或修改文件这意味着：

❌ 无法通过API创建新的Figma/FigJam文件
❌ 无法将节点或形状添加到现有文件中
❌ 无法以编程方式修改现有设计

✅ 可以读取文件内容和元数据
✅ 可以生成屏幕截图
✅ 可以提取设计信息

图表生成的工作原理

由于我们不能直接在Figma中创建文件 generate_diagram 工具：

1. 生成Mermaid代码 根据您的要求
2. 渲染预览 在交互式小部件中
3. 提供说明 使用“Figma中的美人鱼”插件导入到Figma中
4. 复制代码 粘贴到剪贴板以方便粘贴

这种方法让你两全其美：人工智能生成的图表能够在Figma中编辑。

安装

npm install
npm run build

配置

创建一个 .env 使用您的Figma OAuth凭据文件：

FIGMA_CLIENT_ID=your_client_id
FIGMA_CLIENT_SECRET=your_client_secret
FIGMA_REDIRECT_URI=http://localhost:8000/auth/callback
PORT=8000

获取Figma OAuth凭据

1. 首选 Figma开发者
2. 创建新应用程序
3. 设置回调URL以匹配您的 FIGMA_REDIRECT_URI
4. 复制客户端ID和客户端密码

用法

发展

# Start the MCP server
npm run dev

# Start the widget preview (separate terminal)
npm run dev:preview

服务器将在以下时间可用 http://localhost:8000/mcp
预览版将于 http://localhost:5173

生产

npm run build
npm start

将图表导入Figma

生成图表时，请按照以下步骤将其导入Figma：

1. 点击 “在Figma中编辑” 小部件中的按钮
2. 安装 人鱼在Figma 插件（如果尚未安装）
3. 打开Figma或FigJam
4. 运行“人鱼在Figma”插件
5. 粘贴您的Mermaid代码（自动复制到剪贴板）
6. 点击“生成”以创建您的图表

Figma中的Mermaid插件已被27000多名用户使用，并提供了出色的图表渲染。

小部件功能

图表小部件包括：

• 🔍 缩放控制 -放大/缩小，动画流畅
• 🖱️ 平移和拖动 -单击并拖动以在图表中移动
• 🖼️ 全屏幕模式 -扩展到全屏以获得更好的查看效果
• 🎨 亮色模式 -干净的白色背景，带点图案
• 📋 易于出口 -一键复制到剪贴板

API终点

MCP端点

• GET /mcp -MCP协议的SSE流
• POST /mcp/messages -向MCP服务器发送消息
• GET /auth/callback -OAuth回调处理程序

工具

get_creenshot

生成Figma节点的屏幕截图。

{
  "fileKey": "abc123",
  "nodeId": "1:2",
  "scale": 2
}

get_design_context

获取节点的设计上下文和元数据。

{
  "fileKey": "abc123",
  "nodeId": "1:2"
}

获取元数据

获取XML格式的文件/节点元数据。

{
  "fileKey": "abc123",
  "nodeId": "0:1"
}

发电机图

生成Mermaid.js图表预览。

{
  "mermaidCode": "flowchart TD\n  A[Start] --> B[End]",
  "diagramType": "flowchart",
  "title": "My Diagram"
}

建筑

服务器(src/server/server.ts)

• 用于MCP协议的带SSE传输的HTTP服务器
• OAuth 2.0身份验证流程
• 会话管理
• 用于Figma API集成的工具处理程序

小工具(src/components/figjam-diagram.tsx)

• 带有Mermaid.js渲染的React组件
• OpenAI Apps SDK兼容
• 通过全屏模式支持 window.webplus API
• 响应式设计，支持移动设备

钩子

• useDisplayMode() -检测内联模式与全屏模式
• useMaxHeight() -获取可用视口高度
• useOpenAiGlobal() -访问OpenAI全局状态

部署

铁路

该项目包括铁路配置：

railway up

码头工人

docker build -t figma-mcp-server .
docker run -p 8000:8000 --env-file .env figma-mcp-server

发展

项目结构

figma-mcp-server/
├── src/
│   ├── components/        # React widgets
│   │   └── figjam-diagram.tsx
│   ├── hooks/            # React hooks
│   │   ├── use-display-mode.ts
│   │   ├── use-max-height.ts
│   │   └── use-openai-global.ts
│   ├── server/           # MCP server
│   │   └── server.ts
│   └── styles/           # CSS styles
├── assets/               # Built widget files
├── dist/                 # Built server files
└── package.json

建筑

# Build everything
npm run build

# Build server only
npm run build:server

# Build widgets only
npm run build:widgets

故障排除

OAuth问题

如果身份验证失败：

1. 验证您的 FIGMA_CLIENT_ID 和 FIGMA_CLIENT_SECRET
2. 确保重定向URI完全匹配
3. 检查您的Figma应用程序是否具有正确的范围： file_read, file_write

小部件未加载

如果小部件不呈现：

1. 跑 npm run build:widgets 重建
2. 检查一下 assets/ 目录包含构建的文件
3. 验证MCP服务器是否正确提供静态文件

图表未渲染

如果Mermaid图无法渲染：

1. 检查浏览器控制台是否有错误
2. 验证Mermaid代码语法是否有效
3. 确保支持的图表类型：流程图、序列图、甘特图、状态图

贡献

欢迎投稿！请确保：

1. 代码遵循现有样式
2. 小部件是在提交之前构建的
3. 测试通过（如果可用）

许可证

麻省理工学院

资源

• Figma REST API文档
• Figma插件API文档
• Mermaid.js文档
• 人鱼在Figma插件
• 模型上下文协议
• OpenAI应用SDK示例

由ZeroTwo提供技术支持

此Figma MCP服务器是 ZeroTwo人工智能平台 --结合GPT-5、Claude、Gemini和强大设计工具的一体化AI工作空间，让您永远不必离开工作流程。

专为ZeroTwo打造 --使用此Figma MCP服务器 ZeroTwo的人工智能助手 生成Mermaid图，检查Figma设计，并直接在您的AI聊天中提取设计上下文。