F
Figma MCP连接器
@xxflux/figma_MCP
1 Stars
308 次浏览
xxflux
更新于 2026-08-23
一个用 TypeScript 编写的服务器，实现了模型上下文协议 (Model Context Protocol)，通过 Cursor Agent 使用自然语言提示在 Figma 中实现由人工智能驱动的设计创建。
该服务暂未提供标准配置，请参考 README 手动接入
可用工具 （5 个）
该服务在 MCP 协议中暴露的工具，AI 可按需调用
add_figma_file 1 个参数 需填 1 项
Add a Figma file to your context
必填参数：url
view_node 2 个参数 需填 2 项
Get a thumbnail for a specific node in a Figma file
必填参数：file_key、node_id
read_comments 1 个参数 需填 1 项
Get all comments on a Figma file
必填参数：file_key
post_comment 5 个参数 需填 4 项
Post a comment on a node in a Figma file
必填参数：file_key、message、x、y
reply_to_comment 3 个参数 需填 3 项
Reply to an existing comment in a Figma file
必填参数：file_key、comment_id、message
服务介绍
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 驱动的设计创建。它由两个主要组件组成：
- MCP 服务器：一个使用 Bun 和 TypeScript 实现的服务器，该服务器实现了模型上下文协议，并通过 WebSocket 与 Figma 插件通信。
- Figma 插件：在 Figma 中运行的插件，根据 MCP 服务器的指令执行设计操作。
通过这种集成，您可以使用自然语言来：
- 创建基本的设计元素（形状、文本等）
- 设计包含多个部分的完整页面布局
- 修改现有设计
仓库结构
- figma-mcp-server/：MCP 服务器的实现
- figma-plugin/：用于执行设计操作的 Figma 插件
快速开始
1. 设置 MCP 服务器
cd figma-mcp-server
cp .env.example .env # Edit this file to add your Figma token
bun install
bun run index.ts
2. 设置 Figma 插件
cd figma-plugin
npm install
npm run build
然后将插件导入到 Figma 中：
- 打开 Figma
- 转到 Plugins > Development > 从清单导入插件
- 选择
figma-plugin/manifest.json文件
3. 连接到 Cursor Agent
在 Cursor 中：
- 转到 Settings > Agent > MCP Servers
- 添加一个新的服务器，URL 为：
http://localhost:3000/api/mcp/schema
详细文档
有关更详细的说明，请参阅：
示例用法
一旦所有设置完成，您可以使用 Cursor Agent 并通过以下提示来创建设计：
Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.
工作原理
- Cursor Agent 接收自然语言提示
- 它向 MCP 服务器发送结构化的 MCP 请求
- MCP 服务器处理请求并通过 WebSocket 向 Figma 插件发送指令
- Figma 插件在 Figma 中执行设计操作
许可证
MIT
