Figma MCP (模型上下文协议)

一个完整的解决方案，用于通过 Cursor Agent 使用模型上下文协议创建和修改 Figma 设计。

博客：https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/

概述

该项目支持使用自然语言提示，通过 Cursor Agent 在 Figma 中进行 AI 驱动的设计创建。它由两个主要组件组成：

1. MCP 服务器: 一个 Bun + TypeScript 服务器，它实现了模型上下文协议，并通过 WebSockets 与 Figma 插件通信。
2. Figma 插件: 一个在 Figma 中运行的插件，它根据 MCP 服务器的指令执行设计操作。

通过这种集成，您可以使用自然语言来：

• 创建基本设计元素（形状、文本等）
• 设计包含多个部分的完整页面布局
• 修改现有设计

仓库结构

• figma-mcp-server/: MCP 服务器的实现
• figma-plugin/: 用于执行设计操作的 Figma 插件

快速开始

1. 设置 MCP 服务器

cd figma-mcp-server
cp .env.example .env  # 编辑此文件以添加您的 Figma token
bun install
bun run index.ts

2. 设置 Figma 插件

cd figma-plugin
npm install
npm run build

然后将插件导入 Figma：

1. 打开 Figma
2. 转到插件 > 开发 > 从清单导入插件
3. 选择 figma-plugin/manifest.json 文件

3. 连接到 Cursor Agent

在 Cursor 中：

1. 转到设置 > Agent > MCP 服务器
2. 添加一个新服务器，URL 为：http://localhost:3000/api/mcp/schema

详细文档

有关更详细的说明，请参阅：

• MCP 服务器 README
• Figma 插件设置指南

使用示例

一切设置完成后，您可以使用 Cursor Agent 通过如下提示创建设计：

创建一个包含标题的着陆页，英雄区域包含标题“我们的产品”和副标题“满足您需求的最佳解决方案”，功能区包含 3 个功能，以及包含联系信息的页脚。

工作原理

1. Cursor Agent 接收到自然语言提示
2. 它向 MCP 服务器发送结构化的 MCP 请求
3. MCP 服务器处理该请求，并通过 WebSocket 向 Figma 插件发送指令
4. Figma 插件在 Figma 中执行设计操作

许可证

MIT