AI导哈

Figma MCP服务器

一个允许AI代理与Figma文档交互的本地服务器，提供读写操作和设计系统工具。

  • by AmazingTIsm
  • TypeScript
  • 本地部署
  • 12 星标
  • 更新于
在 GitHub 查看 bubskqq4/FigMCP

使用说明

Figma模型上下文协议服务器

问题

官方的Figma MCP服务器只有只读工具。 您无法使用官方的Figma MCP服务器更改Figma文档中的任何内容。 您可以在Figma Make中使用AI Agent。但是，在Figma Make中聊天，然后将结果移动到Figma继续是不方便的。

目标是使AI代理能够处理您的Figma文档。

您可以要求您的AI代理使用此MCP服务器在Figma中实现您想要的设计！

用法

先决条件

  1. 安装 Node.js 如果你没有
  2. 克隆此存储库

启动Figma插件

  1. 切换到插件目录： cd plugin
  2. 安装依赖项： npm i
  3. 构建Figma插件 npm run build
  4. 打开Figma，打开要使用的文档
  5. 添加Figma插件 插件 > 发展 > 从清单中即兴插入插件，选择 /plugin/manifest.json
  6. 开始 Figma MCP服务器 插件
  7. 预期结果：消息 未连接到MCP服务器 应显示
  8. 不要关闭插件窗口。它将显示消息 已连接到MCP服务器 当它启动时。

下次您可以从以下位置启动插件： 插件 > 发展 > Figma MCP服务器。仅当您想获得最新更改时，才执行1-3个步骤。

启动MCP服务器

  1. 切换到MCP目录： cd mcp
  2. 安装依赖项： npm i
  3. 启动服务器： npm run start
  4. 预期结果：消息 Server listening on http://localhost:38450 和 a user connected: ............. 在控制台中

在客户端中配置MCP服务器

  1. 使用流式HTTP传输和 http://localhost:38450/mcp 统一资源定位符
  2. 关闭不需要的工具

现在，你应该能够让你的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服务器

  1. cd mcp
  2. npm i
  3. npm run dev

插件

  1. cd plugin
  2. npm i
  3. npm run dev
  4. 打开Figma
  5. 插件>开发>从清单导入插件。..
  6. 选择 manifest.json 从 plugin\manifest.json
  7. 启动插件
  8. 你应该看看 已连接到MCP服务器 消息

添加插件到Figma

  1. 打开Figma
  2. 添加Figma插件 插件 > 发展 > 从清单中即兴插入插件，选择 /plugin/manifest.json

检查员

  1. cd mcp
  2. npm run inspector
  3. 使用 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）。但是，您始终可以将该服务器视为替代方案。

相关 MCP