AI导哈

Figma设计MCP服务器

一个本地运行的MCP服务器，允许AI助手（如Claude等）直接在Figma中创建和操作设计，支持双向设计操作和资源导出。

  • by kmyts
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 kmyts/figma-design-mcp

使用说明

Figma设计MCP

MCP服务器，允许AI助手（Claude等）直接在Figma中创建和操作设计。

它通过运行一个本地MCP服务器来工作，该服务器在您的AI工具和Figma插件之间架起桥梁。该插件轮询服务器以获取命令，并使用Figma插件API执行这些命令。

为什么不是官方的Figma MCP？

这 官方Figma MCP服务器 是 只读 --它提取设计上下文（布局、变量、组件），因此AI可以从现有设计中生成代码。

Figma设计MCP 双向。它可以读取设计 和 创造它们。你的AI助手可以创建框架、添加形状、设置自动布局、应用样式、插入文本、构建组件——基本上是为你设计的。它还可以读取节点属性、导出资产、检查注释和原型反应等。

官方Figma MCP Figma设计MCP
阅读设计上下文 是 是
创建/修改/删除节点 否 是
导出资产（PNG、SVG、PDF、JPG） 否 是
SVG导入 否 是
开发模式注释 否 是
原型反应和交互 否 是
局部样式和变量 否 是
库组件导入 否 是
需要API令牌 是 否（通过插件运行）
设置 基于令牌 零配置插件

因为它通过Figma插件API（而不是REST API）运行，所以没有令牌管理，也没有速率限制-只需打开插件就可以了。

它也大大提高了代币效率。官方Figma MCP通过REST API返回完整的深度嵌套设计树，每次调用可以消耗大量令牌。Figma Design MCP仅返回所请求节点的属性，子节点汇总为轻量级存根（id、name、type）。只有在需要时，你才能钻得更深，这样每次通话都会保持小规模和专注。

简而言之：官方MCP 设计→ code，这是 code → 设计 （和回来）。

设置

先决条件

  • Node.js 18+
  • Figma桌面应用程序

1.安装依赖项并构建

git clone https://github.com/nicholasheadway/figma-design-mcp.git
cd figma-design-mcp
npm install
cd server && npm install && cd ..
npm run build

2.加载Figma插件

  1. 打开Figma桌面
  2. 首选 插件>开发>从清单导入插件。..
  3. 选择 plugin/manifest.json 来自此repo

3.添加到您的MCP客户端

添加到您的Claude代码配置中(~/.claude/claude_code_config.json):

{
  "mcpServers": {
    "figma-design": {
      "command": "node",
      "args": ["/absolute/path/to/figma-design-mcp/server/dist/index.js"]
    }
  }
}

或者选择Claude Desktop(claude_desktop_config.json):

{
  "mcpServers": {
    "figma-design": {
      "command": "node",
      "args": ["/absolute/path/to/figma-design-mcp/server/dist/index.js"]
    }
  }
}

4.连接

  1. 运行Figma插件（插件>开发>克劳德设计）
  2. 插件将连接到端口3848上的本地服务器
  3. 开始使用你的人工智能工具——它现在可以创建和修改Figma设计

工具

画布操作

工具 说明
create_nodes 创建框架、矩形、文本、椭圆、向量、组件、实例
update_nodes 更新属性（位置、大小、填充、笔划、效果、文本、自动布局）
delete_nodes 按ID删除节点
group_nodes 将多个节点组合在一起
ungroup_nodes 取消组节点的分组
create_from_svg 从SVG字符串创建节点

阅读与搜索

工具 说明
get_node_info 获取节点的属性（类型、尺寸、填充、子节点等）
find_nodes 按名称和/或类型搜索节点
get_selection 获取当前选定节点的完整节点属性、注释和反应
get_annotations 获取节点的开发模式注释
get_reactions 获取节点的原型交互
scan_annotations 递归查找所有带注释/交互式节点

出口和资产

工具 说明
export_node 将节点导出为PNG、SVG、PDF或JPG（保存到磁盘，返回文件路径）
get_styles 列出局部绘画、文字、效果和网格样式
get_variables 列出局部变量和变量集合
list_fonts 列出所有可用字体
import_component 按键从团队库导入组件

页面

工具 说明
list_pages 列出文件中的所有页面
set_current_page 切换活动页面

建筑

AI Tool A  <--stdio-->  MCP Server A  ---HTTP--->  ┐
                                                   ├─>  Bridge Daemon (:3848)  <--polling-->  Figma Plugin
AI Tool B  <--stdio-->  MCP Server B  ---HTTP--->  ┘

每个MCP客户端（Claude Code、Claude Desktop等）通过stdio生成自己的MCP服务器。启动时，MCP服务器检查是否有正在运行的 网桥守护进程 在端口3848；如果没有找到，它会自动生成一个分离进程。工具调用通过HTTP转发到网桥，网桥将它们排队等待Figma插件执行。

这意味着 多个代理可以共享一个Figma插件连接 --启动任意数量的MCP客户端，它们都与同一网桥通信。来自所有代理的命令通过一个队列，并按到达顺序执行。

发展

# Watch mode for the server
cd server && npm run dev

# Rebuild the plugin after changes
npm run build:plugin

许可证

麻省理工学院

相关 MCP