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的服务器，实现了模型上下文协议并通过WebSocket与Figma插件通信。
2. Figma插件：运行在Figma中的插件，根据MCP服务器的指令执行设计操作。

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

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

仓库结构

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

快速开始

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. 转到插件 > 开发 > 从清单导入插件
3. 选择figma-plugin/manifest.json文件

3. 连接到Cursor Agent

在Cursor中：

1. 转到设置 > 代理 > 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