Figma 桌面 MCP 技能

通过 Figma 桌面应用内置的本地 MCP 服务器 (http://127.0.0.1:3845/mcp) 访问完整的 Figma 功能，包括 Figma Make、代码生成等高级特性。

核心优势

• - ✅ 无需 OAuth - 通过 Figma 桌面应用自动认证
• ✅ 完整功能 - 支持 Figma Make、代码生成、Code Connect
• ✅ 本地运行 - 低延迟，数据不经过第三方服务器
• ✅ 实时同步 - 与 Figma 桌面应用实时同步选择和状态

前置要求

1. 安装 mcporter

mcporter 是连接 MCP 服务器的必需工具：

bash

使用 npm 安装

npm install -g mcporter

验证安装

mcporter --version

2. 安装 Figma 桌面应用（最新版本）

• - 下载地址：https://www.figma.com/downloads/
• 确保更新到最新版本

3. 启用 MCP 服务器

• - 打开任意 Figma 设计文件
• 切换到开发模式（Dev Mode）
• 在右侧面板启用 MCP 服务器
• 复制服务器地址（默认 http://127.0.0.1:3845/mcp）

4. 保持 Figma 运行

• - MCP 服务器随 Figma 桌面应用启动
• 关闭 Figma 后 MCP 服务不可用

配置步骤

步骤 1：安装 Figma 桌面应用

bash

macOS（使用 Homebrew）

brew install --cask figma

或从官网下载

https://www.figma.com/downloads/

步骤 2：在 Figma 中启用 MCP

1. 1. 打开 Figma 桌面应用
2. 打开或创建一个设计文件
3. 点击工具栏的切换开关，进入 开发模式（Dev Mode）
4. 在右侧面板找到 MCP 服务器 选项
5. 点击启用 MCP 服务器
6. 点击 复制 URL 复制服务器地址

步骤 3：配置 mcporter

bash

添加 Figma 桌面 MCP（已预配置）

mcporter config add figma-desktop --url http://127.0.0.1:3845/mcp --transport http

步骤 4：验证连接

bash

测试连接（需要在 Figma 中打开设计文件）

mcporter list figma-desktop

使用方法

基本命令

bash

列出可用工具

mcporter list figma-desktop

调用工具

mcporter call figma-desktop.<工具名称> --param 值

Figma Make 功能（设计生成）

bash

生成设计建议

mcporter call figma-desktop.makesuggestlayout {description: 登录页面, width: 375}

从描述生成组件

mcporter call figma-desktop.makegeneratecomponent {description: 带图标的主按钮}

优化选中设计

mcporter call figma-desktop.make_optimize {goal: 提高可访问性对比度}

代码生成

bash

生成 React 组件（基于 Figma 中的选择）

mcporter call figma-desktop.generate_code {framework: react, typescript: true}

生成 Vue 组件

mcporter call figma-desktop.generate_code {framework: vue}

生成 CSS/Tailwind

mcporter call figma-desktop.generate_code {framework: css, tailwind: true}

生成 React Native

mcporter call figma-desktop.generate_code {framework: react-native}

获取设计上下文

bash

获取当前选中的设计节点

mcporter call figma-desktop.get_selection

获取选中节点的样式信息

mcporter call figma-desktop.get_styles {nodeId: 节点ID}

获取设计变量

mcporter call figma-desktop.get_variables

获取组件信息

mcporter call figma-desktop.get_component {componentKey: 键值}

Code Connect 集成

bash

获取组件代码连接

mcporter call figma-desktop.codeconnectget {componentId: ID}

同步代码到设计

mcporter call figma-desktop.codeconnectsync

文件操作

bash

获取当前文件信息

mcporter call figma-desktop.getcurrentfile

获取文件结构

mcporter call figma-desktop.getfilestructure

获取页面列表

mcporter call figma-desktop.get_pages

使用场景示例

场景 1：从设计生成代码

1. 1. 在 Figma 桌面应用中打开设计文件
2. 选中要生成代码的框架/组件
3. 在 OpenClaw 中执行：

bash
mcporter call figma-desktop.generate_code {framework: react, typescript: true, includeStyles: true}

场景 2：AI 辅助设计（Figma Make）

1. 1. 在 Figma 中创建新页面
2. 在 OpenClaw 中描述需求：

bash
mcporter call figma-desktop.makesuggestlayout {description: 电商商品详情页，包含图片轮播、价格、购买按钮, width: 1440}

场景 3：设计系统同步

bash

获取组件库

mcporter call figma-desktop.getcomponentlibrary

获取样式定义

mcporter call figma-desktop.getstyledefinitions

同步到代码

mcporter call figma-desktop.syncdesignsystem

故障排除

MCP 服务器仅在当前活动标签页为设计文件或 FigJam 文件时可用

原因：Figma 中没有打开设计文件

解决：

1. 1. 在 Figma 桌面应用中打开任意设计文件
2. 确保处于开发模式
3. 确保 MCP 服务器已启用

连接被拒绝 或 无法连接

原因：MCP 服务器未运行

解决：

1. 1. 检查 Figma 桌面应用是否正在运行
2. 在 Figma 中重新启用 MCP 服务器
3. 检查端口是否正确（默认 3845）

工具调用返回空结果

原因：Figma 中没有选中任何元素

解决：

1. 1. 在 Figma 中选中要操作的框架或组件
2. 再次调用工具

代码生成功能不可用

原因：需要开发模式权限或特定文件访问权限

解决：

1. 1. 确保文件有编辑权限
2. 检查是否处于开发模式
3. 确保文件不是只读模式

注意事项

1. 1. Figma 必须保持运行

- MCP 服务器是 Figma 桌面应用的一部分 - 关闭 Figma 后所有 MCP 调用都会失败

1. 2. 需要打开设计文件

- 大多数工具需要在 Figma 中打开文件才能工作 - 部分工具需要选中特定元素

1. 3. 开发模式要求

- 某些高级功能需要处于开发模式 - 确保有文件的编辑权限

1. 4. 网络要求

- 虽然是本地服务器，但仍需要网络连接 Figma 服务 - 防火墙不能阻止 localhost:3845

1. 5. 版本兼容性

- 确保 Figma 桌面应用是最新版本 - MCP 功能在旧版本中可能不可用

与第三方 MCP 对比

特性	figma-desktop（推荐）	figma-mcp（第三方）
Figma Make	✅ 完整支持	❌ 不支持
代码生成

✅ 完整支持 | ⚠️ 基础支持 | | 认证方式 | 自动（通过桌面应用） | API 令牌 | | 需要 Figma 桌面 | ✅ 必须 | ❌ 不需要 | | Code Connect | ✅ 支持 | ❌ 不支持 | | 实时选择同步 | ✅ 支持 | ❌ 不支持 |

相关链接

• - Figma 桌面应用下载：https://www.figma.com/downloads/
• Figma MCP 文档：https://developers.figma.com/docs/figma-mcp-server/
• Figma Make 介绍：https://www.figma.com/blog/introducing-figma-mcp-server/
• Code Connect 文档：https://developers.figma.com/code-connect/