Figma Console MCP

社区

将你的设计系统变成 API，连接 AI 与 Figma，实现提取、创建和调试。

分类: 团队协作第 5 / 55
Stars: ★ 2.5k 非常热门
传输方式: SSE · Streamable HTTP · stdio（本地进程）
运行环境: Node.js 18+
凭据: 需要 API Key / 凭据
许可证: MIT
最近提交: 9 天前
工具数: 74

63FMRS · C

Figma Console MCP 是一个功能丰富的社区服务器，将 Figma 设计系统转化为 AI 可调用的 API。它提供 114 个工具（本地模式），涵盖设计提取、创建、调试、Token 同步、FigJam、Slides 和健康审计。多种连接模式满足不同需求：远程 SSE 只读、云模式免 Node.js、NPX 完整功能。项目维护活跃，近期版本修复了多个稳定性问题。主要风险是写操作需谨慎、令牌安全和第三方托管端点。适合希望探索 AI 驱动设计自动化的团队，但建议先了解权限和限制。

最强项 · 维护活跃度 15/20 最弱项 · 可靠性 8/20

可靠性

8/20

安全与权限

13/20

维护活跃度

15/20

文档质量

14/20

安装易用性

13/20

查看各项评分依据

可靠性 8/20: 仅基于 README 静态审查，无法验证服务启动、MCP 握手或工具清单；Server manifest 未提供。README 声称 1452 个测试和大量修复，但无 CI/测试文件可查，按静态校准规则可靠性不超过 12。能力对比表存在内部矛盾：远程 SSE 标注“控制台日志 ✅”，但能力差异表显示远程 SSE 不支持实时监控。因此给 8 分：主路径看似合理，但缺乏可复现证据且存在矛盾。
安全与权限 13/20: 未发现恶意代码、真实密钥或隐蔽外传等红线。README 要求最小化 Figma token 范围（文件内容/版本/变量读取、评论读写），远程模式使用 OAuth，云中继数据流有图示，多文件执行必须显式指定目标，token 删除仅在 replace 策略下进行。但破坏性工具（删除变量/集合、figma_execute 任意代码）未提及确认机制；云模式需将 PAT 作为 Bearer 发给第三方端点，仅有文档披露；无法从源码验证认证实现。给 13 分。
维护活跃度 15/20: MIT 许可证明确；README 展示连续版本线 v1.33.x–v1.39.1、安全依赖清理、全代码审计和社区 PR 合并，问题跟踪器有 51 个未决问题，说明维护活跃。但缺乏可验证的 CI 配置、安全响应政策、维护者治理文档；README 本身不可信，且星标数仅作发现信号不计分。给 15 分。
文档质量 14/20: README 分层详细：四种安装方式、客户端配置示例、认证、工具列表、示例提示词、限制、故障排查和架构链接，并披露只读/写入差异和插件重导入要求。扣分：能力对比表内部矛盾（远程 SSE 控制台日志与实时监控）；docs/ 链接无法在本材料中核实；未说明成本/配额；工具参数细节依赖外部文档。给 14 分。
安装易用性 13/20: 安装路径清晰：NPX、Cloud、Local Git、Remote SSE 各有步骤、前置条件、配置 JSON 示例和时间估计，主流客户端有对应配置说明。但需要手动导入 Figma Desktop Bridge 插件并配对，多模式选择可能造成困惑；无 CI/测试等可验证执行证据，按静态校准上限不超 15；server manifest 缺失也降低信心。给 13 分。

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

查看 FMRS 评分方法 →

选型与风险

能访问什么读取本地文件写入 / 删除本地文件执行命令或代码访问网络

适合谁

希望将 AI 融入设计工作流的设计师和设计系统团队。
需要快速原型验证或生成视觉规范的开发者。
在协作讨论中需要可视化需求的产品经理。
管理多文件设计系统的团队（通过 figma_execute_across_files）。
需要从 Figma 提取 Token 到代码库的开发者（Token 同步）。

不适合谁

只需要只读访问且不想安装 Node.js 的用户——可以考虑远程 SSE 模式（9 个只读工具）。
严格需要生成代码（如 React/HTML）的用户——官方 Figma Dev Mode MCP 更合适。
不需要写操作且希望快速评估的用户——远程 SSE 即可。
希望在云端直接设计但不想安装 Desktop Bridge 插件的用户（云模式仍需插件）。

所需权限

Figma 个人访问令牌（PAT）：文件内容读取、文件版本读取、变量读取、评论读写（本地模式）。
Desktop Bridge 插件权限：通过插件 API 访问当前文件、读取选取、控制台日志、文档更改，并可执行写操作（创建框架、变量等）。
本地文件系统：服务器会在 ~/.figma-console-mcp/ 目录写入/读取插件文件（自动创建）。
WebSocket 端口 9223-9232：服务器在本地监听这些端口以供插件连接。
对于云模式，需要 OAuth 授权（远程端点）或 PAT（云模式下可绕过 Enterprise 限制）。

风险与副作用

写操作风险：figma_execute 等工具可执行任意插件代码，可能意外修改或删除设计——建议先在副本文件上测试。
令牌泄露：FIGMA_ACCESS_TOKEN 以明文存储在客户端配置中，若配置文件泄露，令牌可能被滥用。
远程服务器信任：远程 SSE 端点由第三方（southleft）托管，传输数据（设计信息）经过其基础设施；自托管选项存在。
多实例问题：端口冲突可能导致连接问题，但已实现多实例支持（自动端口回退）。
更新横幅问题：插件与服务器版本不匹配时可能持续提示重新导入——新版本已修复，但升级后需重启客户端。

安装接入

准备工作

运行环境：Node.js 18+

FIGMA_ACCESS_TOKEN 必填密钥 Figma 个人访问令牌（以 figd_ 开头），在 Figma 帮助页 Manage personal access tokens 中创建，需要 File content、File versions、Variables 读取及 Comments 读写权限。

其他可选配置项（3 个）

ENABLE_MCP_APPS 可选设为 "true" 以启用实验性的 MCP Apps（如设计令牌浏览器和设计系统仪表盘），需要支持 ext-apps 协议的客户端。

FIGMA_WS_PORT 可选可选，覆盖 WebSocket 首选端口（默认 9223），被占用时会自动在 10 个端口范围内回退。

FIGMA_WS_HOST 可选可选，覆盖 WebSocket 服务器绑定地址（默认 localhost），在 Docker 中运行时设为 0.0.0.0。

获取 Figma 个人访问令牌（PAT），在 Figma 账户设置中创建，勾选“文件内容（读取）”“文件版本（读取）”“变量（读取）”“评论（读取和写入）”权限。PAT 以 figd_ 开头。
配置 MCP 客户端（如 Claude Desktop 或 Cursor），在配置文件中添加 mcpServers 条目（参考安装配置示例），设置环境变量 FIGMA_ACCESS_TOKEN 和 ENABLE_MCP_APPS=true。
启动 Figma Desktop，进入“插件 → 开发 → 从清单导入插件...”，选择 ~/.figma-console-mcp/plugin/manifest.json（由服务器自动创建）。
在 Figma 文件中运行该插件，它会自动连接到 MCP 服务器（端口 9223-9232）。
重启 MCP 客户端以加载新配置。
测试：询问 AI “Check Figma status” 确认连接，再创建简单蓝色矩形验证写入权限。

claude_desktop_config.json

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": [
        "-y",
        "figma-console-mcp@latest"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "figma-console": {
      "command": "npx",
      "args": [
        "-y",
        "figma-console-mcp@latest"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add figma-console -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

配置完成后重启 MCP 客户端，让 AI 执行 "Check Figma status"（即 figma_get_status），若返回活跃的 WebSocket 连接与文件上下文，再让它创建一个简单蓝色背景框架以确认写权限。

常见排障

无法连接：确认 Figma Desktop 已安装并运行插件（Plugins → Development → Figma Desktop Bridge），检查端口 9223-9232 是否被占用，尝试重启 MCP 客户端和 Figma。
提示“服务器断开”：确保服务器和插件版本兼容，重启 MCP 客户端（新版本已修复孤儿进程误杀）。
无法写入：确认使用本地模式（NPX/本地 Git）或云模式并已配对，远程 SSE 是只读的。
变量导出为空：确保文件包含变量，且 PAT 具有“变量（读取）”权限；若使用共享库变量，确认当前文件已订阅库。
未显示“重新导入清单”横幅：如果一直提示重新导入，可能服务器版本旧于插件，升级服务器或关闭旧实例。
性能问题：大量文件时，使用 figma_execute_across_files 并显式指定 fileKeys 以避免意外执行。

试试这样问

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

检查 Figma 连接状态
从 https://figma.com/design/abc123 提取所有设计变量并导出为 CSS
创建一个带标题图片、描述文字和操作按钮的卡片组件
新建一个名为 Brand Colors 的变量集合，包含 Light 和 Dark 两个模式

工具能力 74

figma_get_status 只读

检查 WebSocket 桥接连接和文件上下文。

figma_diagnose 只读

面向设计师的健康检查和设置指南。

figma_reconnect 只读

强制重新连接到 Desktop Bridge 插件。

figma_navigate 只读

切换活动的文件目标（本地模式）或导航云端无头浏览器（远程/云模式）。

figma_get_console_logs 只读

获取控制台日志。

figma_watch_console 只读

实时日志流。

figma_clear_console 写入

清除日志缓冲区。

figma_reload_plugin 写入

重新加载当前页面。

展开其余 66 个工具

figma_take_screenshot 只读

捕获 UI 截图。

figma_get_design_system_kit 只读

一次调用获取完整设计系统——Token、组件、样式、视觉规格。

figma_get_variables 只读

提取设计 Token/变量。

figma_get_component 只读

获取组件数据（元数据或重构规范）。

figma_get_component_for_development 只读

获取组件加图片。

figma_get_component_image 只读

仅获取图片。

figma_get_styles 只读

获取颜色、文本、效果样式。

figma_get_file_data 只读

获取完整文件结构。

figma_get_file_for_plugin 只读

获取优化后的文件数据。

figma_audit_design_system_report 只读

对设计系统进行评分审计，六个类别，含修复建议。

figma_get_library_component_by_key 只读

通过组件 key 解析任何组件为完整属性+变体+视觉规格。

figma_get_library_components 只读

发现库文件中的所有组件。

figma_get_library_variables 只读

列出当前文件订阅的所有团队库变量（所有 Figma 计划可用）。

figma_import_library_variable 写入

将库变量导入当前文件。

figma_pair_plugin 写入

生成配对码以通过云中继连接 Desktop Bridge 插件。

figma_execute 写入

运行任意 Figma Plugin API 代码以创建设计。

figma_execute_across_files 写入

在多个 Desktop Bridge 连接的文件上并发运行同一脚本。

figma_create_component_set 写入

通过变体轴矩阵一键创建组件集。

figma_arrange_component_set 写入

将变体组织为专业的组件集。

figma_set_description 写入

为组件、组件集和样式添加富文本描述。

figma_create_slot 写入

通过 createSlot API 向组件添加插槽。

figma_get_slots 只读

列出组件或实例上的插槽。

figma_append_to_slot 写入

通过克隆节点或创建新内容填充实例的插槽。

figma_reset_slot 破坏性

清除实例插槽的内容。

figma_add_slot_property 写入

通过手动 SLOT 属性绑定将现有框架改造为插槽。

figma_check_design_parity 只读

比较 Figma 组件规范与代码实现，生成评分差异报告。

figma_generate_component_doc 只读

合并 Figma 设计数据和代码侧信息生成平台无关的 Markdown 文档。

figma_export_tokens 写入

将 Figma 变量导出为设计 Token 文件（DTCG JSON、CSS、Tailwind、SCSS 等）。

figma_import_tokens 写入

将代码侧 Token 编辑推送回 Figma，支持创建、重命名、别名和删除。

figma_create_variable_collection 写入

创建新的变量集合及其模式。

figma_create_variable 写入

创建 COLOR、FLOAT、STRING 或 BOOLEAN 变量。

figma_update_variable 写入

更新特定模式下的变量值。

figma_rename_variable 写入

重命名变量并保留值。

figma_delete_variable 破坏性

删除变量。

figma_delete_variable_collection 破坏性

删除集合及其所有变量。

figma_add_mode 写入

向集合添加模式（如“深色”“移动端”）。

figma_rename_mode 写入

重命名现有模式。

figma_batch_create_variables 写入

一次调用创建最多 100 个变量（快 10-50 倍）。

figma_batch_update_variables 写入

一次调用更新最多 100 个变量值。

figma_setup_design_tokens 写入

原子方式创建完整 Token 系统（集合+模式+变量）。

figjam_create_sticky 写入

创建便签（带颜色选项）。

figjam_create_stickies 写入

批量创建最多 200 个便签。

figjam_create_connector 写入

创建带标签的连接线连接节点。

figjam_create_shape_with_text 写入

创建流程图形状（菱形、椭圆等）。

figjam_create_table 写入

创建带单元格数据的表格。

figjam_create_code_block 写入

添加带语法高亮的代码片段。

figjam_auto_arrange 写入

以网格、水平或垂直布局排列节点。

figjam_get_board_contents 只读

读取 FigJam 看板的全部内容。

figjam_get_connections 只读

读取连接图（流程图、关系）。

figma_list_slides 只读

列出所有幻灯片（ID、位置、跳过状态）。

figma_get_slide_content 只读

获取幻灯片的完整内容树。

figma_get_slide_grid 只读

获取演示文稿的二维网格布局。

figma_get_slide_transition 只读

读取幻灯片的过渡设置。

figma_get_focused_slide 只读

获取当前聚焦的幻灯片。

figma_create_slide 写入

创建新的空白幻灯片。

figma_delete_slide 破坏性

从演示文稿中删除幻灯片。

figma_duplicate_slide 写入

复制现有幻灯片。

figma_reorder_slides 写入

通过新的二维网格布局重新排序幻灯片。

figma_set_slide_transition 写入

设置过渡效果（22 种样式，8 种曲线）。

figma_skip_slide 写入

切换幻灯片在演示模式下是否跳过。

figma_add_text_to_slide 写入

向幻灯片添加文本（字体、颜色、对齐、换行）。

figma_add_shape_to_slide 写入

向幻灯片添加矩形或椭圆形状（颜色）。

figma_set_slide_background 写入

设置幻灯片的背景颜色（创建或更新）。

figma_get_text_styles 只读

获取所有本地文本样式（ID、字体、大小）。

figma_set_slides_view_mode 写入

切换网格或单幻灯片视图。

figma_focus_slide 写入

导航到特定幻灯片。

使用场景

设计系统提取：获取所有设计变量、组件、样式。

AI 辅助设计创建：用自然语言直接创建 UI 组件、框架和布局。

双向 Token 同步：将 Figma 变量导出为 DTCG/CSS/Tailwind 等格式，并推送代码侧编辑回 Figma。

视觉调试：捕获截图、监控控制台日志。

FigJam 协作：创建便签、流程图、表格。

Slides 演示：编程式创建和管理幻灯片。

无障碍扫描：14 项 WCAG 设计检查。

设计系统健康审计：六类评分报告。

多文件执行：跨多个 Figma 文件并发运行脚本。

支持客户端

Claude Desktop

Claude Code

Cursor

Windsurf

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

详细介绍

Figma Console MCP 是一个模型上下文协议服务器，让 AI 助手（如 Claude、Cursor 等）能够通过 Natural Language 直接与 Figma 交互。它提供 114 个工具（本地/NPX 模式），支持设计系统提取、双向 Token 同步、视觉调试、设计创建、变量管理、FigJam 看板、Slides 演示、无障碍扫描、设计系统健康审计、多文件执行、共享库检查、云写中继等功能。支持多种连接方式：远程 SSE（只读）、云模式（Web AI 客户端，无需 Node.js）、NPX（完整功能，推荐）和本地 Git（开发者）。