Figma模型上下文协议服务器
问题
官方的Figma MCP服务器只有只读工具。 您无法使用官方的Figma MCP服务器更改Figma文档中的任何内容。 您可以在Figma Make中使用AI Agent。但是，在Figma Make中聊天，然后将结果移动到Figma继续是不方便的。
目标是使AI代理能够处理您的Figma文档。
您可以要求您的AI代理使用此MCP服务器在Figma中实现您想要的设计！
用法
先决条件
- 安装
Node.js如果你没有 - 克隆此存储库
启动Figma插件
- 切换到插件目录：
cd plugin - 安装依赖项：
npm i - 构建Figma插件
npm run build - 打开Figma，打开要使用的文档
- 添加Figma插件 *插件* > *发展* > *从清单中即兴插入插件*，选择
/plugin/manifest.json - 开始 *Figma MCP服务器* 插件
- 预期结果：消息 *未连接到MCP服务器* 应显示
- 不要关闭插件窗口。它将显示消息 *已连接到MCP服务器* 当它启动时。
下次您可以从以下位置启动插件： *插件* > *发展* > *Figma MCP服务器*。仅当您想获得最新更改时，才执行1-3个步骤。
启动MCP服务器
- 切换到MCP目录：
cd mcp - 安装依赖项：
npm i - 启动服务器：
npm run start - 预期结果：消息
Server listening on http://localhost:38450和a user connected: .............在控制台中
在客户端中配置MCP服务器
- 使用流式HTTP传输和
http://localhost:38450/mcp统一资源定位符 - 关闭不需要的工具
现在，你应该能够让你的AI代理在Figma中做点什么。例如：
我们正在努力将其作为Figma插件发布。到目前为止，Figma的评论者还没有接受它。 一旦Figma接受它作为插件，配置和启动将大大简化！
工具
🎨 设计系统工具⭐ 新
- 综合设计系统 -集成设计指南和风格管理
- 13+内置指南 -登录页面、仪表板、SaaS、移动应用程序等 - 20+精选风格指南 -线性、条纹、材料设计等现实世界的例子。 - 50+设计标签 -按美学、行业、平台、色彩、布局和氛围组织 - 创建自定义资源 -建立自己的指导方针和风格指南 - 导出/导入 -与您的团队共享设计系统 - 汽车文档 -生成全面的设计文档 - 持久化存储 -自动保存所有自定义资源 - 📖 查看完整的设计系统指南 - 🔧 查看推荐的设计工具
快速入门：
// Get design guidelines for your project
get-design-guidelines({ topic: "saas" })
// Get style inspiration
get-style-guide({ tags: ["minimal", "dark", "saas"] })
// Create your custom guideline
create-design-guideline({ name: "my-app", ... })实用工具
- 链接到节点id ⭐ 新增-将Figma元素/层链接转换为节点ID
- 支持文件、设计和原型链接 - 自动将URL格式转换为API格式 - 使用共享的Figma链接至关重要 - 📖 查看链接实用工具指南
阅读工具
- 获取选择 -获取当前选定的节点
- 获取节点信息 -获取特定节点的详细信息
- 获取页面 -获取文档中的所有页面
- 获取所有组件 -获取文档中的所有组件
- 列表节点 ⭐ 新增-列出具有类型过滤和深度控制的节点
- 获取节点子节点 ⭐ 新增-获取节点的所有子节点（递归支持）
- 搜索节点 ⭐ 新功能-通过模糊/精确匹配按名称搜索节点
- 获取节点树 ⭐ 新-获取节点的层次树结构
创建工具
- 创建矩形 -创建矩形节点
- 创建框架 -创建框架节点
- 创建文本 -创建文本节点
- 创建实例 -创建组件实例
- 创建组件 -创建组件
- 克隆节点 -克隆现有节点
- 添加组件属性 -向组件添加属性
更新工具
- 移动节点 -将节点移动到新位置
- 调整节点大小 -调整节点大小
- 设置填充颜色 -设置节点的填充颜色
- 设置笔划颜色 -设置节点的笔划颜色
- 设置拐角半径 -设置拐角半径
- 设置布局 -设置布局属性（自动布局）
- 设置父id -更改节点的父节点
- 编辑组件属性 -编辑组件属性
- 设置实例属性 -设置实例属性
- 设置节点组件属性引用 -设置组件属性引用
删除工具
- 删除节点 -删除节点
- 删除组件属性 -删除组件属性
视觉反馈
⭐ 新 该插件现在包括一个视觉反馈系统，在AI创建元素时显示元素周围的边界：
- 🎯 实时高亮显示 -创建的元素周围出现蓝色边框
- 💫 弹出动画 -新创建元素的平滑淡入效果
- 🔍 自动变焦 -视口会自动滚动以显示新元素
- 🧹 自动清理 -视觉指示器在3秒后自动清除
当人工智能创建或修改元素时，您将通过流畅的视觉反馈实时看到正在发生的变化。
📖 查看视觉反馈文档
发展
欢迎为该项目捐款！
MCP服务器
cd mcpnpm inpm run dev
插件
cd pluginnpm inpm run dev- 打开Figma
- 插件>开发>从清单导入插件。..
- 选择
manifest.json从plugin\manifest.json - 启动插件
- 你应该看看 *已连接到MCP服务器* 消息
添加插件到Figma
- 打开Figma
- 添加Figma插件 *插件* > *发展* > *从清单中即兴插入插件*，选择
/plugin/manifest.json
检查员
cd mcpnpm run inspector- 使用
http://127.0.0.1:38450/mcp连接
建筑
WebSockets服务器被用作MCP服务器和Figma插件之间传输消息的媒介。
MCP服务器启动 *Express.js* 具有MCP端点和WebSockets的服务器 *插座.io* 用于与插件通信的服务器。 MCP服务器将工具调用保存到队列中，并将消息发送到WebSockets服务器。
Figma插件监听WebSocket服务器。如果有任何任务要做，它会执行这些任务，执行所需的操作，并返回结果。
MCP服务器监听WebSockets服务器。如果有来自Figma插件的任何消息，那么它会处理它们。它在队列中找到了一个精确的工具调用。并使用Figma插件的结果执行promise。如果任何工具调用执行的时间过长，则返回超时而不等待响应。
安全
插件允许您访问外部系统的设计文档：您将连接的AI代理。它以与官方Figma MCP服务器类似的方式充当桥梁。而且，与官方的MCP服务器类似，它在本地机器上工作，不会向网络暴露任何信息。
如果您想在网络中使用它，请自行承担风险。
如果您发现任何安全问题，请通过GitHub issue报告。
替代方案
如果你的任务可以通过以下方式完成 官方Figma MCP服务器，请使用它。
在开始这个项目之前，我搜索了使用Figma插件和套接字作为通信协议来实现Figma MCP服务器的想法。我发现 这一个。起初，我想分叉它，根据我的需要进行更改。但是，有几件事我不喜欢：要求为socket运行单独的服务器，所有内容都位于一个文件中，很难维护，JavaScript（不是TypeScript或Python）。但是，您始终可以将该服务器视为替代方案。