Figma Agent Kit

简体中文 | English

开源 Figma Desktop 插件 + 本地 MCP 桥：让 AI 编程 Agent 读写当前打开的设计稿，无需经 Figma REST API 上传画布。

已适配 Cursor · Claude Code · Codex · Qoder · CodeBuddy · Trae（以及其他支持 stdio MCP 的宿主）。

flowchart LR
  Agent[AI_Agent] -->|stdio_MCP| McpProc[figma_agent_mcp]
  McpProc -->|Election| Role{Leader_or_Follower}
  Role -->|WS_MsgPack| PluginUI[Plugin_UI]
  PluginUI -->|postMessage| PluginMain[Plugin_main]
  PluginMain --> FigmaAPI[Figma_Plugin_API]

深入阅读：文档站 · 架构说明 · 截图图库 · 中文文档索引 · English README

支持的编辑器

figma-agent-mcp 是标准 stdio MCP 服务，可接入你正在用的 AI 编辑器：

完整复制粘贴配置：接入 AI Agent · English guide

其他兼容 MCP 的客户端同样适用：用 stdio 运行 npx -y figma-agent-mcp 即可。

Related MCP server: mcp-figma

为什么需要它

包说明

请保持 MCP 与插件为同一版本（见 npm / Releases）。

功能特性

• 多编辑器 MCP — Cursor、Claude Code、Codex、Qoder、CodeBuddy、Trae（接入指南）

• 37 个 MCP 工具 — 文档/选区/节点读写、填充、文本、Auto Layout、创建/分组/删除、Motion 等（目录）

• MessagePack 桥 — 二进制 WS + Follower RPC；截图在链路上为原始 PNG 字节

• save_screenshots — TinyPNG 风格 PNG 压缩；scale=3 与插件切图一致

• 插件内 AI — 视觉重命名与嵌套分组（OpenAI 兼容 API）（说明）

• 切图导出 UI — 1× 预览、3× PNG / ZIP（说明）

• i18n — 插件界面中文 / English

快速开始

1. 安装插件

从 Releases 下载 figma-agent-plugin-v*.zip，解压后在 Figma Desktop：

Plugins → Development → Import plugin from manifest… → 选择 manifest.json → 运行 Figma Agent Kit。

状态显示绿色 MCP Bridge 已连接 表示插件可与本地 MCP 通信：

2. 接入你的编辑器（MCP）

先在 支持的编辑器 选中你的工具，再按对应章节配置：

docs/zh/agent-setup.md · English

Cursor 快速示例 — ~/.cursor/mcp.json：

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"]
    }
  }
}

重启 MCP，打开文件并运行插件。在 Cursor → MCP 设置中应看到 figma-agent-mcp 且 37 tools enabled：

然后让 Agent 调用 list_files → get_selection。

3. 从源码构建

git clone https://github.com/ChinaCarlos/figma-agent-kit.git
cd figma-agent-kit
pnpm install
pnpm build:all
# 导入 packages/figma-agent-plugin/manifest.json
# pnpm start:mcp   # 可选本地启动

完整步骤见 上手指南。

文档索引

在线文档（Rspress / GitHub Pages，中英切换）：https://chinacarlos.github.io/figma-agent-kit/

本地预览：pnpm install && pnpm dev:docs

安全与隐私

• MCP 桥工具仅通过本地插件访问 Figma，不会为 MCP 上传整份文档。

• 可选 AI 重命名/分组会把截图 + 图层元数据发往你配置的 API；密钥保存在 Figma clientStorage。

• 漏洞披露见 SECURITY.md。

参与贡献

见 CONTRIBUTING.md 与 Code of Conduct。

pnpm install
pnpm build:all
pnpm sync:bridge   # 修改 bridge.config.json 后

许可证

MIT

致谢

灵感来自社区中各类本地 Figma ↔ Agent 桥接实践，面向 Desktop + MCP 优先工作流打造。

Star History

如果本项目对你有帮助，欢迎点个 Star 支持一下 ⭐