🚀 Figma MCP（模型上下文协议）

Figma MCP是一套完整的解决方案，借助Model Context Protocol，通过Cursor Agent实现Figma设计的创建与修改，让设计工作更加智能高效。

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

🚀 快速开始

1. 设置MCP服务器

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

2. 设置Figma插件

cd figma-plugin
npm install
npm run build

然后在Figma中导入插件：

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

3. 连接到Cursor Agent

在Cursor中：

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

✨ 主要特性

该项目使AI能够通过自然语言提示在Figma中进行设计创作。它包含两个主要组件：

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

借助此集成，您可以使用自然语言完成以下操作：

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

📦 安装指南

仓库结构

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

安装步骤

设置MCP服务器

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

设置Figma插件

cd figma-plugin
npm install
npm run build

然后在Figma中导入插件：

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

连接到Cursor Agent

在Cursor中：

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

💻 使用示例

基础用法

设置完成后，您可以使用Cursor Agent和以下提示创建设计：

创建一个着陆页面，包含一个标题、带有“我们的产品”副标题的英雄部分、功能部分中的3个功能以及包含联系信息的页脚。

📚 详细文档

更多详细说明，请参阅：

• MCP服务器README
• Figma插件安装指南

🔧 技术细节

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

📄 许可证

MIT