Figma Console MCP 121个工具全景图核心架构与IFigmaConnector抽象深度解析【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcpFigma Console MCP是一个将 Figma 变成可读写 API的开源 MCP ServerLocal 模式下提供121 个工具Cloud 模式提供 96 个工具覆盖设计系统提取、Token 双向同步、设计创建、无障碍审计等全部场景。本文带你用一张全景图看懂它的核心架构、IFigmaConnector传输抽象层以及工具注册机制适合想深入理解或参与贡献的开发者。一、121个工具全景一张表看懂 Figma MCP 工具清单121 个工具并非一锅端而是按职责划分为14 大类。下表是完整地图完整参数文档见 docs/tools.md类别代表工具数量级传输通道 状态与诊断figma_get_status、figma_diagnose5WebSocket 控制台调试figma_watch_console4WebSocket️ 视觉调试figma_take_screenshot2WebSocket️ 实时感知figma_get_selection2WebSocket仅 Local 设计系统提取figma_get_design_system_kit9REST API✏️ 设计创建figma_execute、figma_create_component_set5WebSocketPlugin 组件与插槽figma_instantiate_component、figma_create_slot15WebSocketPlugin 变量管理figma_batch_create_variables单次100个11WebSocketPlugin Token 同步figma_export_tokens、figma_import_tokens2插件读 插件写♿ 无障碍figma_lint_design14项WCAG检查3混合 版本历史figma_diff_versions、figma_blame_node6REST API FigJam 白板figjam_create_sticky10WebSocketPlugin️ Slides 演示figma_set_slide_transition18WebSocketPlugin 代码库提取figma_ds_analyze仅 Local7本地文件系统关键规律读类工具走 Figma REST API快、无需插件写类工具走 Desktop Bridge 插件可调用完整 Plugin API。这条读写分离原则贯穿整个架构。二、核心架构4种连接方式与统一数据流官方架构文档 docs/architecture.md 描述了一个关键事实所有 121 个工具都通过同一条 WebSocket 传输管道工作本地与云端共享同一套工具实现。Local 模式121 个工具AI 助手 ──stdio──► 本地 MCP Server ├── REST Client ──HTTPS──► Figma API └── WebSocket :9223–9232 ──► Desktop Bridge 插件 ──► FigmaServer 依次尝试端口 9223→9232支持多实例并存多开 Claude Desktop 互不冲突figma-desktop-bridge/ 插件由manifest.jsoncode.jsui.html组成启动时自动拷贝到~/.figma-console-mcp/plugin/提供稳定导入路径Cloud 模式96 个工具Web AI 客户端 ──► 云端 MCP Server └──fetch RPC──► PluginRelayDODurable Object └──wss://──► Desktop Bridge 插件配对码为 6 位、5 分钟过期、单次有效实现见 src/core/cloud-websocket-relay.ts。Durable Object 采用休眠安全模式WebSocket 用ctx.getWebSockets()在唤醒后重新获取文件信息持久化到 DO 存储闲时零成本。三、IFigmaConnector 抽象为什么它是整个项目的枢纽打开 src/core/figma-connector.ts你会看到一个约 60 个方法的接口这就是全项目的枢纽方法组内容示例生命周期初始化、传输类型探测initialize()、getTransportType()核心执行在插件上下文中运行任意代码executeCodeViaUI(code, timeoutMs, fileKey)变量 CRUD11 个变量/Mode/Collection 操作createVariable、batch系列组件操作实例化、变体集、插槽createComponentSet、appendToSlot节点操作移动/缩放/填充/文本setNodeFills、setTextContentFigJam/Slides28 个白板与演示方法createSticky、setSlideTransition两个实现同一张面孔连接器文件模式底层WebSocketConnectorsrc/core/websocket-connector.tsLocalws://localhost:9223–9232CloudWebSocketConnectorsrc/core/cloud-websocket-connector.tsCloudfetch RPC → Durable Object这个抽象的收益是巨大的工具实现零改动—— 30 个写操作工具在 Local 和 Cloud 模式共用同一份代码local.ts注释原文so local mode and cloud mode share the same 30 implementations — no risk of drift懒加载工厂模式—— 工具注册时传入的是() this.getDesktopConnector()这样的工厂函数每次调用时才解析连接器。插件中途断开重连下一次调用自动拿到新连接无需重启可测试性—— 测试中注入 mock 连接器即可覆盖 700 工具调用路径四、工具注册机制16个 register 函数与防漂移设计模块化的注册函数src/local.ts 的registerTools()方法约 3400 行是整个注册入口。它不做大一统而是调用16 个职责单一的注册函数registerTools() ├── this.server.tool(...) ← 16 个导航/诊断/控制台工具直接内联注册 ├── registerWriteTools(server, connectorFactory) ← 30个写工具 ├── registerTokensTools(server, connectorFactory, {...}) ← Token同步 ├── registerDesignSystemExtractionTools(server) ← 7个 ds_* 工具 ├── registerFigmaAPITools(server, apiFactory, ...) ← REST 读工具 ├── registerFigJamTools / registerSlidesTools / registerSlotTools ... └── registerTokenBrowserApp / registerDesignSystemDashboardApp ← MCP Apps三个值得学习的设计决策依赖注入而非 import 单例每个register*都接收getDesktopConnector/getFigmaAPI工厂函数工具模块与具体连接器完全解耦Local-only 工具显式隔离figma_ds_*系列因读写本地文件系统从未在 Cloud 入口 src/index.ts 注册 —— 代码注释明确说no Cloud Mode silent no-op is possible避免云端出现注册了但必然失败的幽灵工具计数自动化审计scripts/update-tool-counts.mjs 不再靠正则替换文档里的数字曾连续 3 个版本发错而是通过 MANIFEST 清单逐条校验 README/文档中每处N tools的准确数值--verify模式能揪出任何未登记的计数引用 —— 发布流程的守门员Cloud 模式的工具子集如何产生Cloud 模式不是复制一份代码删一半src/index.ts 的/mcp路由只调用无状态安全的register*函数并刻意排除控制台、截图、导航等依赖本地进程的工具。审计脚本甚至会静态解析这个入口来推算 Cloud 工具数95/96cannot drift from the code。五、源码导航建议的 30 分钟阅读路线顺序文件看点1docs/architecture.md4 种部署模式与数据流图2src/core/figma-connector.ts60 方法的传输抽象接口3src/core/websocket-connector.ts本地 WebSocket 实现4src/core/write-tools.ts30 个写工具的共享注册实现5src/local.ts16 个注册函数的总入口6scripts/update-tool-counts.mjs工具计数的发布守门员延伸阅读docs/setup.md4 种安装方式、docs/mode-comparison.md能力对比、tests/1400 测试覆盖每个工具路径。掌握IFigmaConnectorregister*工厂函数这两个模式后新增一个工具的完整路径就是在接口如需要加方法 → 在对应连接器实现 → 在某个register*中server.tool()→ 让计数脚本--verify通过。这正是 Figma Console MCP 能稳定维持 121 个工具、本地/云端行为零漂移的根本原因。【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Figma Console MCP 121个工具全景图：核心架构与IFigmaConnector抽象深度解析
Figma Console MCP 121个工具全景图核心架构与IFigmaConnector抽象深度解析【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcpFigma Console MCP是一个将 Figma 变成可读写 API的开源 MCP ServerLocal 模式下提供121 个工具Cloud 模式提供 96 个工具覆盖设计系统提取、Token 双向同步、设计创建、无障碍审计等全部场景。本文带你用一张全景图看懂它的核心架构、IFigmaConnector传输抽象层以及工具注册机制适合想深入理解或参与贡献的开发者。一、121个工具全景一张表看懂 Figma MCP 工具清单121 个工具并非一锅端而是按职责划分为14 大类。下表是完整地图完整参数文档见 docs/tools.md类别代表工具数量级传输通道 状态与诊断figma_get_status、figma_diagnose5WebSocket 控制台调试figma_watch_console4WebSocket️ 视觉调试figma_take_screenshot2WebSocket️ 实时感知figma_get_selection2WebSocket仅 Local 设计系统提取figma_get_design_system_kit9REST API✏️ 设计创建figma_execute、figma_create_component_set5WebSocketPlugin 组件与插槽figma_instantiate_component、figma_create_slot15WebSocketPlugin 变量管理figma_batch_create_variables单次100个11WebSocketPlugin Token 同步figma_export_tokens、figma_import_tokens2插件读 插件写♿ 无障碍figma_lint_design14项WCAG检查3混合 版本历史figma_diff_versions、figma_blame_node6REST API FigJam 白板figjam_create_sticky10WebSocketPlugin️ Slides 演示figma_set_slide_transition18WebSocketPlugin 代码库提取figma_ds_analyze仅 Local7本地文件系统关键规律读类工具走 Figma REST API快、无需插件写类工具走 Desktop Bridge 插件可调用完整 Plugin API。这条读写分离原则贯穿整个架构。二、核心架构4种连接方式与统一数据流官方架构文档 docs/architecture.md 描述了一个关键事实所有 121 个工具都通过同一条 WebSocket 传输管道工作本地与云端共享同一套工具实现。Local 模式121 个工具AI 助手 ──stdio──► 本地 MCP Server ├── REST Client ──HTTPS──► Figma API └── WebSocket :9223–9232 ──► Desktop Bridge 插件 ──► FigmaServer 依次尝试端口 9223→9232支持多实例并存多开 Claude Desktop 互不冲突figma-desktop-bridge/ 插件由manifest.jsoncode.jsui.html组成启动时自动拷贝到~/.figma-console-mcp/plugin/提供稳定导入路径Cloud 模式96 个工具Web AI 客户端 ──► 云端 MCP Server └──fetch RPC──► PluginRelayDODurable Object └──wss://──► Desktop Bridge 插件配对码为 6 位、5 分钟过期、单次有效实现见 src/core/cloud-websocket-relay.ts。Durable Object 采用休眠安全模式WebSocket 用ctx.getWebSockets()在唤醒后重新获取文件信息持久化到 DO 存储闲时零成本。三、IFigmaConnector 抽象为什么它是整个项目的枢纽打开 src/core/figma-connector.ts你会看到一个约 60 个方法的接口这就是全项目的枢纽方法组内容示例生命周期初始化、传输类型探测initialize()、getTransportType()核心执行在插件上下文中运行任意代码executeCodeViaUI(code, timeoutMs, fileKey)变量 CRUD11 个变量/Mode/Collection 操作createVariable、batch系列组件操作实例化、变体集、插槽createComponentSet、appendToSlot节点操作移动/缩放/填充/文本setNodeFills、setTextContentFigJam/Slides28 个白板与演示方法createSticky、setSlideTransition两个实现同一张面孔连接器文件模式底层WebSocketConnectorsrc/core/websocket-connector.tsLocalws://localhost:9223–9232CloudWebSocketConnectorsrc/core/cloud-websocket-connector.tsCloudfetch RPC → Durable Object这个抽象的收益是巨大的工具实现零改动—— 30 个写操作工具在 Local 和 Cloud 模式共用同一份代码local.ts注释原文so local mode and cloud mode share the same 30 implementations — no risk of drift懒加载工厂模式—— 工具注册时传入的是() this.getDesktopConnector()这样的工厂函数每次调用时才解析连接器。插件中途断开重连下一次调用自动拿到新连接无需重启可测试性—— 测试中注入 mock 连接器即可覆盖 700 工具调用路径四、工具注册机制16个 register 函数与防漂移设计模块化的注册函数src/local.ts 的registerTools()方法约 3400 行是整个注册入口。它不做大一统而是调用16 个职责单一的注册函数registerTools() ├── this.server.tool(...) ← 16 个导航/诊断/控制台工具直接内联注册 ├── registerWriteTools(server, connectorFactory) ← 30个写工具 ├── registerTokensTools(server, connectorFactory, {...}) ← Token同步 ├── registerDesignSystemExtractionTools(server) ← 7个 ds_* 工具 ├── registerFigmaAPITools(server, apiFactory, ...) ← REST 读工具 ├── registerFigJamTools / registerSlidesTools / registerSlotTools ... └── registerTokenBrowserApp / registerDesignSystemDashboardApp ← MCP Apps三个值得学习的设计决策依赖注入而非 import 单例每个register*都接收getDesktopConnector/getFigmaAPI工厂函数工具模块与具体连接器完全解耦Local-only 工具显式隔离figma_ds_*系列因读写本地文件系统从未在 Cloud 入口 src/index.ts 注册 —— 代码注释明确说no Cloud Mode silent no-op is possible避免云端出现注册了但必然失败的幽灵工具计数自动化审计scripts/update-tool-counts.mjs 不再靠正则替换文档里的数字曾连续 3 个版本发错而是通过 MANIFEST 清单逐条校验 README/文档中每处N tools的准确数值--verify模式能揪出任何未登记的计数引用 —— 发布流程的守门员Cloud 模式的工具子集如何产生Cloud 模式不是复制一份代码删一半src/index.ts 的/mcp路由只调用无状态安全的register*函数并刻意排除控制台、截图、导航等依赖本地进程的工具。审计脚本甚至会静态解析这个入口来推算 Cloud 工具数95/96cannot drift from the code。五、源码导航建议的 30 分钟阅读路线顺序文件看点1docs/architecture.md4 种部署模式与数据流图2src/core/figma-connector.ts60 方法的传输抽象接口3src/core/websocket-connector.ts本地 WebSocket 实现4src/core/write-tools.ts30 个写工具的共享注册实现5src/local.ts16 个注册函数的总入口6scripts/update-tool-counts.mjs工具计数的发布守门员延伸阅读docs/setup.md4 种安装方式、docs/mode-comparison.md能力对比、tests/1400 测试覆盖每个工具路径。掌握IFigmaConnectorregister*工厂函数这两个模式后新增一个工具的完整路径就是在接口如需要加方法 → 在对应连接器实现 → 在某个register*中server.tool()→ 让计数脚本--verify通过。这正是 Figma Console MCP 能稳定维持 121 个工具、本地/云端行为零漂移的根本原因。【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考