Talk to Figma

社区

让AI智能体读取、分析并修改Figma设计

分类: 团队协作第 29 / 55
Stars: ★ 668 热门
传输方式: stdio（本地进程）
运行环境: Node.js · Bun · Docker
凭据: 无需凭据
许可证: MIT
最近提交: 5 个月前
工具数: 19

53FMRS · D

该项目提供了一个功能丰富的MCP服务器，使AI代理能够与Figma深度集成。它支持设计分析、元素创建和修改，并兼容多种AI工具。最大的优势是无需Dev Mode许可即可使用。对于设计团队和开发者来说是一个实用性强的工具，但需要注意多代理修改风险和一些功能的开发状态。

最强项 · 文档质量 13/20 最弱项 · 可靠性 8/20

可靠性

8/20

安全与权限

10/20

维护活跃度

11/20

文档质量

13/20

安装易用性

11/20

查看各项评分依据

可靠性 8/20: README 描述了完整的 WebSocket + Figma 插件 + 客户端配置架构，happy path（npx 启动、插件导入、channel ID 连接）看起来可行，并自称生产稳定。但评审材料中没有任何已提交的测试或 CI 工作流验证关键路径，属于静态评审上限约束；9 个未关闭 issue；socket、plugin、channel 多组件链路的失败点较多；TROUBLESHOOTING 文档存在但其内容无法核实。因此不给超过 12 的分数，评为 8。
安全与权限 10/20: 安装示例中未发现真实令牌或密钥，未发现恶意软件、凭据窃取或隐蔽外传迹象；连接通过 channel ID 做了隔离，读写 Figma 文档是公开声明的预期用途，未触发红线。扣分点：没有文档化的破坏性操作确认机制，最小权限与插件权限范围未说明，设计内容经本地插件与 WebSocket 传给 AI 客户端的数据流披露不完整，多代理可并行执行修改命令而缺少确认边界，故评为 10。
维护活跃度 11/20: MIT 许可证明确，项目未归档；有 CHANGELOG、贡献指南以及带 .dxt 资产的 release，说明存在发布节奏；README 列出了进行中的开发项（Figma Variables、Tailwind/SwiftUI 导出）。扣分：材料中看不到安全响应渠道，提交频率与 issue 回复速度无法核实（9 个未关闭 issue），依赖更新证据不足。星标数仅作发现信号，不计分。
文档质量 13/20: 文档分层完整：除 README 外还有 INSTALLATION、COMMANDS、TROUBLESHOOTING、CONTRIBUTING、CHANGELOG；给出多客户端配置示例（Claude Desktop 的 .dxt、Cursor 的 JSON），并披露了限制（禁止 set_current_page、必须显式提供 parentId）与多代理行为。扣分：缺少成本/配额与明确的限制说明，故障排查内容无法核实，存在隐含前提（必须使用 Figma Desktop、channel ID 手工关联流程）。
安装易用性 11/20: 提供了 npx 一键安装命令、Figma 插件导入步骤，以及 Claude Desktop（.dxt 自动配置）和 Cursor（JSON）的具体客户端配置示例，另有 Docker 备选方案。扣分：整体仍为多组件手工流程——需要 Figma Desktop、导入插件、每次会话复制 channel ID 并让代理手动连接；README 混用 bun/npm 运行命令，增加隐含前提；无 CI/测试执行证据，按静态规则上限不超过 15，评为 11。

静态评测 · 未实际运行收录于 2026-08-07

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

UX/UI团队：自动化重复性设计任务，保持品牌一致性
开发者：直接从设计生成生产级代码
需要免费Figma账户即可使用的团队

不适合谁

需要修改Figma Variables的完整支持（仍在开发中）
需要Tailwind CSS或SwiftUI高级导出功能的用户（即将推出）

所需权限

需要Node.js和Figma Desktop
需要网络访问以运行npx和连接WebSocket
需要安装Figma插件并授予其访问当前设计文件的权限
AI工具需要配置MCP服务器连接

风险与副作用

多代理同时修改文档可能导致冲突，虽然服务器有命令队列，但建议明确指定parentId参数
可能存在未发现的Bug，因为项目处于积极开发阶段
依赖第三方npm包和Figma插件，需确保来源可信

安装接入

准备工作

运行环境：Node.js · Bun · Docker

运行 npx claude-talk-to-figma-mcp 启动WebSocket服务器。
在Figma Desktop中安装插件（菜单 → 插件 → 开发 → 从清单导入插件，选择 src/claude_mcp_plugin/manifest.json）。
配置AI工具：

Claude Desktop：下载 .dxt 文件并双击自动配置。
Cursor：在设置中创建MCP服务器，配置为 npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server。
其他工具：参考详细安装指南。

在Figma中打开插件，复制通道ID，然后告诉AI：“Connect to Figma, channel {your-ID}”。

验证是否装好

在 Figma Desktop 中导入 src/claude_mcp_plugin/manifest. 插件并复制频道 ID，然后在 AI 客户端输入 Connect to Figma, channel {你的ID}；连接成功后，让客户端执行 get_document_info，能返回文档信息即说明安装成功。

常见排障

确保Node.js已安装并正确运行npx命令
检查Figma插件是否正确安装并打开
确保通道ID正确复制并在聊天中正确输入
查看TROUBLESHOOTING.md文档获取常见错误解决方案

试试这样问

连接成功后，可以直接对 AI 助手这样说：

获取当前 Figma 文档的信息和当前选中的元素
扫描文档中所有对比度低于 4.5:1 的文本并给出符合 WCAG AA 的颜色建议
把整个文档中主按钮的 #FF6B6B 改成 #E63946
为 CardProduct 生成一个包含样式控制的 React 组件并导出相关资源

工具能力 19

get_document_info 只读

获取Figma文档的基本信息

get_current_selection 只读

获取当前选中的元素

get_styles 只读

获取文档中定义的样式

scan_text 只读

扫描文档中的文本元素

audit_components 只读

审计文档中的组件使用情况

export_assets 只读

导出设计资产

create_shape 写入

创建形状元素

create_text 写入

创建文本元素

展开其余 11 个工具

create_frame 写入

创建框架元素

clone_element 写入

克隆现有元素

group_elements 写入

将多个元素分组

modify_colors 写入

修改元素颜色

modify_borders 写入

修改元素边框

modify_corners 写入

修改元素圆角

modify_shadows 写入

修改元素阴影

auto_layout 写入

应用自动布局

advanced_typography 写入

设置高级文字排版

set_local_component 写入

将元素转换为本地组件

set_team_component 写入

使用团队库组件

使用场景

自动进行无障碍审计，检测对比度问题并提供修复建议

批量更新样式，如颜色、字体和间距

分析视觉层级并提出改进建议

从设计生成React/Vue/SwiftUI组件代码

保持设计与开发同步，减少交接摩擦

支持客户端

Claude Desktop

Claude Code

Cursor

Windsurf

VS Code

GitHub Copilot

Antigravity

Cline

Roo Code

依据项目文档列出，未经本站实测。

详细介绍

这是一个Model Context Protocol (MCP)服务器，使Claude Desktop、Claude Code、Cursor、Antigravity等AI工具能够与Figma设计文件进行交互。它支持设计分析、元素创建、样式修改等功能，并兼容任何Figma账户（包括免费版），无需Dev Mode许可。该服务器通过WebSocket与Figma插件通信，支持多AI代理并行安全执行。