企业官网建设流程全解析

Figma Console MCP FigJam+Slides双武器：AI自动创建白板流程图、表格和完整演示文稿的15个工具

【免费下载链接】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

Figma Console MCP是一个专为 Figma 打造的设计系统 MCP 服务器，让 AI 助手直接操作 Figma——不仅限于设计文件，还能创建FigJam 白板流程图、表格，以及管理Figma Slides 完整演示文稿。只需一句自然语言提示，AI 就能批量生成便签、画好分支流程图、铺满表格数据，甚至批量设置幻灯片转场动画。

🧩 它解决了什么问题？

过去，把会议纪要变成亲和图、把用户旅程画成流程图、把内容排进 PPT，全靠在 Figma 里手动拖拽。接入 Figma Console MCP 后：

• 📌FigJam 白板：AI 可以创建便签、形状、连接线、表格、代码块、分区，并自动排版
• 🎞️Slides 演示：AI 可以新建/复制/重排幻灯片、添加文字和形状、设置 22 种转场动画
• 👀双向读写：不仅能"写"，还能把白板内容和幻灯片结构完整"读"回来，供 AI 总结分析

两项能力共提供25 个工具：FigJam 10 个 + Slides 15 个，本地模式和云端模式均可用。

🚀 快速上手：三步让 AI 登上白板

FigJam 和 Slides 工具复用同一个Desktop Bridge 插件，无需额外安装第二个插件。

1. 打开文件：在 Figma Desktop 中打开任意 FigJam 白板或 Slides 演示文稿
2. 运行插件：从Plugins > Development > Figma Desktop Bridge启动插件，它会向 MCP 服务器报告当前编辑器类型
3. 直接提问：对 AI 助手说"创建一张写着 Hello from AI 的黄色便签"，验证连接后即可上复杂任务

客户端配置只需一条npx命令（如上图所示的界面），完整的配置步骤可参考 docs/setup.md。

📌 FigJam 十大工具：AI 白板画笔

所有 FigJam 工具实现于 figjam-tools.ts，详细说明见 docs/figjam.md。

创建类工具

布局与读取类工具

流程图形状支持：圆角矩形（流程步骤）、菱形（判断点）、椭圆（起止点）、平行四边形（输入输出），还有数据库、消息队列等工程符号——足够画出一整套用户旅程或系统架构图。

🎞️ Slides 十五个工具：AI 演示文稿引擎

所有 Slides 工具实现于 slides-tools.ts，详细说明见 docs/slides.md。

读取工具（5 个）

• figma_list_slides— 列出全部幻灯片的顺序、名称与跳过状态
• figma_get_slide_content— 读取指定幻灯片的完整节点树
• figma_get_slide_grid— 读取 2D 网格布局，一眼看清演示结构
• figma_get_slide_transition— 查看某页的转场样式、缓动曲线与时长
• figma_get_focused_slide— 查看编辑器当前选中的是哪一页

写入工具（10 个）

• figma_create_slide/figma_delete_slide/figma_duplicate_slide— 新建、删除、完整复制幻灯片
• figma_reorder_slides— 重新编排叙述顺序，无需手动拖拽
• figma_set_slide_transition— 应用22 种转场样式 × 8 种缓动曲线，时长 0.01–10 秒可调
• figma_skip_slide— 标记跳过，未完成的页面在演示模式中隐身
• figma_add_text_to_slide— 放置文字，支持字体、颜色、对齐、换行、大小写
• figma_add_shape_to_slide/figma_set_slide_background— 添加形状、设置整页背景色
• figma_get_text_styles— 获取所有本地文字样式

导航工具（2 个）

• figma_set_slides_view_mode— 在网格视图与单页视图间切换
• figma_focus_slide— 定位到指定幻灯片

💡 实战提示词：直接照抄就能用

白板亲和图（来自 docs/figjam.md）：

根据这些会议纪要生成亲和图，用彩色便签分组：蓝色=产品功能、绿色=技术需求、粉色=用户反馈、橙色=待解问题，每组用网格布局排列。

用户流程图：

在 FigJam 白板上为结账流程创建用户流程图：从"查看购物车"开始，判断菱形"是否有账户"，分叉到"登录"和"游客结账"，汇合后进入"填写收货信息"、"支付"，最后以"订单确认"结束。

批量设置转场（来自 docs/slides.md）：

给所有幻灯片设置 DISSOLVE 转场，时长 0.5 秒，EASE_IN_AND_OUT 缓动。

演示前检查：

跳过第 8、9 页——它们还没准备好给客户看。之后完成后再取消跳过。

⚙️ 它如何知道你在用哪个编辑器？

Desktop Bridge 插件（源码见 figma-desktop-bridge/code.js 与 figma-desktop-bridge/manifest.json）连接时会报告figma.editorType：

• 在FigJam 白板中运行 → 10 个 FigJam 工具就绪
• 在Slides 演示中运行 → 15 个 Slides 工具自动出现
• 在Design 文件中误调 → 返回清晰的错误提示，防止误操作

没有配置开关、没有模式切换，工具按上下文自动就绪，且都有运行时安全防护。

📚 相关资源

• 白板指南：docs/figjam.md
• 演示文稿指南：docs/slides.md
• 工具实现：src/core/figjam-tools.ts、src/core/slides-tools.ts
• 桌面桥接插件：figma-desktop-bridge/

一句话总结：Figma Console MCP 把 FigJam 变成了可编程的 AI 画布，把 Figma Slides 变成了可编程的 AI 舞台——25 个工具，让白板流程图、对比表格和完整演示文稿都由一句提示词驱动生成。

【免费下载链接】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