figma-desktop

Figma 桌面 MCP Skill - 通过 Figma 桌面应用本地 MCP 服务访问完整功能，包括 Figma Make 设计生成、代码生成、设计系统管理等，无需 OAuth 认证

Install

openclaw skills install figma-desktop

Figma 桌面 MCP Skill

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

核心优势

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

前置要求

1. 安装 mcporter

mcporter 是连接 MCP Server 的必需工具：

# 使用 npm 安装
npm install -g mcporter

# 验证安装
mcporter --version

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

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

3. 启用 MCP 服务器

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

4. 保持 Figma 运行

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

配置步骤

步骤 1：安装 Figma 桌面应用

# macOS (使用 Homebrew)
brew install --cask figma

# 或从官网下载
# https://www.figma.com/downloads/

步骤 2：在 Figma 中启用 MCP

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

步骤 3：配置 mcporter

# 添加 Figma 桌面 MCP（已预配置）
mcporter config add figma-desktop --url http://127.0.0.1:3845/mcp --transport http

步骤 4：验证连接

# 测试连接（需要在 Figma 中打开设计文件）
mcporter list figma-desktop

使用方法

基本命令

# 列出可用工具
mcporter list figma-desktop

# 调用工具
mcporter call figma-desktop.<tool-name> --param value

Figma Make 功能（设计生成）

# 生成设计建议
mcporter call figma-desktop.make_suggest_layout '{"description": "登录页面", "width": 375}'

# 从描述生成组件
mcporter call figma-desktop.make_generate_component '{"description": "带图标的主按钮"}'

# 优化选中设计
mcporter call figma-desktop.make_optimize '{"goal": "提高可访问性对比度"}'

代码生成

# 生成 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"}'

获取设计上下文

# 获取当前选中的设计节点
mcporter call figma-desktop.get_selection

# 获取选中节点的样式信息
mcporter call figma-desktop.get_styles '{"nodeId": "NODE_ID"}'

# 获取设计变量
mcporter call figma-desktop.get_variables

# 获取组件信息
mcporter call figma-desktop.get_component '{"componentKey": "KEY"}'

Code Connect 集成

# 获取组件代码连接
mcporter call figma-desktop.code_connect_get '{"componentId": "ID"}'

# 同步代码到设计
mcporter call figma-desktop.code_connect_sync

文件操作

# 获取当前文件信息
mcporter call figma-desktop.get_current_file

# 获取文件结构
mcporter call figma-desktop.get_file_structure

# 获取页面列表
mcporter call figma-desktop.get_pages

使用场景示例

场景 1：从设计生成代码

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

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

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

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

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

场景 3：设计系统同步

# 获取组件库
mcporter call figma-desktop.get_component_library

# 获取样式定义
mcporter call figma-desktop.get_style_definitions

# 同步到代码
mcporter call figma-desktop.sync_design_system

故障排除

"MCP server is only available if your active tab is a design or FigJam file"

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

解决：

在 Figma 桌面应用中打开任意设计文件
确保处于 Dev Mode
确保 MCP server 已启用

"Connection refused" 或 "Cannot connect"

原因：MCP 服务器未运行

解决：

检查 Figma 桌面应用是否正在运行
在 Figma 中重新启用 MCP server
检查端口是否正确（默认 3845）

工具调用返回空结果

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

解决：

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

代码生成功能不可用

原因：需要 Dev Mode 权限或特定文件访问权限

解决：

确保文件有编辑权限
检查是否处于 Dev Mode
确保文件不是只读模式

注意事项

Figma 必须保持运行
- MCP 服务器是 Figma 桌面应用的一部分
- 关闭 Figma 后所有 MCP 调用都会失败
需要打开设计文件
- 大多数工具需要在 Figma 中打开文件才能工作
- 部分工具需要选中特定元素
Dev Mode 要求
- 某些高级功能需要处于 Dev Mode
- 确保有文件的编辑权限
网络要求
- 虽然是本地服务器，但仍需要网络连接 Figma 服务
- 防火墙不能阻止 localhost:3845
版本兼容性
- 确保 Figma 桌面应用是最新版本
- MCP 功能在旧版本中可能不可用

与第三方 MCP 对比

特性	figma-desktop (推荐)	figma-mcp (第三方)
Figma Make	✅ 完整支持	❌ 不支持
代码生成	✅ 完整支持	⚠️ 基础支持
认证方式	自动（通过桌面应用）	API Token
需要 Figma 桌面	✅ 必须	❌ 不需要
Code Connect	✅ 支持	❌ 不支持
实时选择同步	✅ 支持	❌ 不支持