Install
openclaw skills install @thcjp/figma-design-tool-proopenclaw skills install @thcjp/figma-design-tool-pro功能说明: 本技能涵盖 中文交互、化工作流场景 等核心能力。
Figma设计集成工具专业版是企业级 Figma 工作区管理平台,覆盖 Figma REST API 全部核心能力。除了免费版的文件浏览、节点读取和图片导出外,专业版新增组件库管理、设计变量提取、评论管理和批量操作,支持设计系统构建、团队协作和开发资产获取全流程。 本版本与免费版完全兼容——免费版的 API Key 配置和基础操作可直接使用。专业版新增评论管理、组件库、设计变量和批量工作流等高级能力。
| 能力维度 | 免费版 | 专业版 |
|---|---|---|
| 文件浏览 | 支持 | 支持 |
| 节点读取 | 支持 | 支持 |
| 图片导出 | 单次导出 | 批量导出 |
| 评论查看 | 仅查看 | 查看+发表+回复+删除 |
| 版本历史 | 支持 | 支持 |
| 文件组件 | 不支持 | 支持 |
| 团队组件库 | 不支持 | 支持 |
| 组件变体 | 不支持 | 支持 |
| 文件样式 | 不支持 | 支持 |
| 设计变量 | 不支持 | 本地+发布变量 |
| 批量操作 | 不支持 | 支持 |
| 工作流自动化 | 不支持 | 支持 |
| 处理: 解析能力对比的输入参数,完成核心逻辑,返回结构化响应。 | ||
| 输出: 返回能力对比的响应数据,包含状态码、结果和日志。 |
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| input | string | 是 | Figma设计集成-专业版处理的输入数据或指令 |
| options | object | 否 | 附加配置选项,如模式选择、格式偏好等 |
| callback_url | string | 否 | 异步处理完成后的回调通知URL |
评论管理:
- list_comments 列出评论
- post_comment 发表/回复评论
- delete_comment 删除评论
# .
组件库管理:
- get_file_components 文件内组件
- get_team_components 团队组件库
- get_file_component_sets 文件内组件集(变体)
- get_team_component_sets 团队组件集
- get_file_styles 文件样式
- get_team_styles 团队样式库
# .
设计变量(Design Token):
- get_local_variables 文件本地变量
- get_published_variables 发布的跨文件变量
- 变量类型: COLOR / FLOAT / STRING / BOOLEAN
- 多模式值: valuesByMode
# .
批量操作:
- 批量图片导出
- 批量节点信息获取
- 设计系统全量检查
- 开发资产批量获取
处理: 解析核心能力的输入参数,完成核心逻辑,返回结构化响应。 输出: 返回核心能力的响应数据,包含状态码、结果和日志。
input_params参数,支持创建/查询/导出操作用input_params参数进行配置。
处理: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应。
输出: 返回核心功能执行的响应数据,包含状态码、结果和日志。
input_params参数,支持创建/查询/导出操作
能力覆盖范围:本skill的核心能力覆盖以下场景关键词:企业级、Figma、集成平台、支持组件库管理、设计变量提取、批量导出与团队协、作工作流、设计集成工具专业、Use、when、、品牌视觉时使用、不适用于、建模和动画制作、适用于独立开发者、企业团队和自动化、工作流场景等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。对设计文件进行全量检查,提取组件、样式和设计变量。
# 设计系统检查脚本
class FigmaDesignSystemChecker:
"""Figma设计系统检查器"""
# .
def __init__(self, file_key, team_id=None):
self.file_key = file_key
self.team_id = team_id
self.report = {
"file_key": file_key,
"components": [],
"component_sets": [],
"styles": [],
"variables": [],
"issues": []
}
# .
def run_full_check(self):
"""执行全量检查"""
self._check_components()
self._check_component_sets()
self._check_styles()
self._check_variables()
if self.team_id:
self._check_team_library()
return self.report
# .
def _check_components(self):
"""检查文件组件"""
# mx_figma: get_file_components, file_key: self.file_key
self.report["components"] = [
{"id": "C001", "name": "Button", "type": "COMPONENT"},
{"id": "C002", "name": "Input", "type": "COMPONENT"},
{"id": "C003", "name": "Card", "type": "COMPONENT"},
]
# .
def _check_component_sets(self):
"""检查组件变体"""
# mx_figma: get_file_component_sets, file_key: self.file_key
self.report["component_sets"] = [
{"name": "Button", "variants": ["Primary", "Secondary", "Ghost"]},
{"name": "Input", "variants": ["Default", "Error", "Disabled"]},
]
# .
def _check_styles(self):
"""检查文件样式"""
# mx_figma: get_file_styles, file_key: self.file_key
self.report["styles"] = [
{"name": "Primary/Background", "type": "FILL"},
{"name": "Primary/Text", "type": "TEXT"},
{"name": "Spacing/Base", "type": "EFFECT"},
]
# .
def _check_variables(self):
"""检查设计变量"""
# mx_figma: get_local_variables, file_key: self.file_key
self.report["variables"] = [
{"name": "color/primary", "type": "COLOR", "value": "#1a1a2e"},
{"name": "color/accent", "type": "COLOR", "value": "#e94560"},
{"name": "spacing/base", "type": "FLOAT", "value": 4},
{"name": "radius/md", "type": "FLOAT", "value": 8},
]
# .
def _check_team_library(self):
"""检查团队组件库"""
# mx_figma: get_team_components, team_id: self.team_id
self.report["team_library"] = {
"total_components": 150,
"total_styles": 45
}
# .
# 执行检查
checker = FigmaDesignSystemChecker("abc123DEF456", "123456789")
report = checker.run_full_check()
print(f"组件: {len(report['components'])}个")
print(f"组件集: {len(report['component_sets'])}个")
print(f"样式: {len(report['styles'])}个")
print(f"变量: {len(report['variables'])}个")
为开发团队批量获取设计资产。
# 开发资产获取全流程
1. mx_figma: get_file, file_key: "未指定", depth: 2
→ 获取页面和 Frame 结构
# .
2. mx_figma: get_file_nodes, file_key: "未指定", node_ids: ["target_node"]
→ 获取指定节点详细属性
# .
3. mx_figma: get_file_components, file_key: "未指定"
→ 获取可复用组件列表
# .
4. mx_figma: get_file_component_sets, file_key: "未指定"
→ 获取组件变体(Primary/Secondary 等)
# .
5. mx_figma: get_local_variables, file_key: "未指定"
→ 获取颜色/间距/字体等设计 Token
# .
6. mx_figma: export_images, file_key: "未指定", node_ids: ["icon1","icon2",.], format: "svg"
→ 批量导出图标资源
# 批量导出脚本
class BatchAssetExporter:
"""批量资产导出器"""
# .
def __init__(self, file_key):
self.file_key = file_key
self.exported = []
# .
def export_all_icons(self, icon_node_ids, format="svg", scale=1):
"""批量导出所有图标"""
# mx_figma: export_images 支持多节点
result = {
"format": format,
"scale": scale,
"exports": {}
}
for node_id in icon_node_ids:
result["exports"][node_id] = f"https://files.example.com/{node_id}.{format}"
self.exported.append({"node_id": node_id, "url": result["exports"][node_id]})
return result
# .
def export_design_tokens(self):
"""导出设计变量为 Token 文件"""
# mx_figma: get_local_variables
variables = {
"color": {
"primary": "#1a1a2e",
"secondary": "#16213e",
"accent": "#e94560"
},
"spacing": {"base": 4, "scale": [4, 8, 12, 16, 24, 32]},
"radius": {"sm": 4, "md": 8, "lg": 12},
"typography": {
"heading": "Playfair Display",
"body": "IBM Plex Sans"
}
}
return variables
# .
def export_component_specs(self):
"""导出组件规格"""
# mx_figma: get_file_components + get_file_component_sets
specs = [
{"name": "Button", "variants": ["Primary", "Secondary", "Ghost"],
"props": {"size": ["sm", "md", "lg"], "disabled": "boolean"}},
{"name": "Input", "variants": ["Default", "Error", "Disabled"],
"props": {"placeholder": "string", "type": ["text", "email", "password"]}},
]
return specs
# .
# 批量导出
exporter = BatchAssetExporter("abc123DEF456")
icons = exporter.export_all_icons(["1:2", "3:4", "5:6", "7:8"], format="svg")
tokens = exporter.export_design_tokens()
components = exporter.export_component_specs()
print(f"已导出 {len(icons['exports'])} 个图标")
完整的团队设计走查工作流,含评论管理。
# 设计走查工作流
# .
# 1. 查看文件结构
mx_figma:
action: get_file
file_key: "未指定"
depth: 2
# .
# 2. 查看指定页面详情
mx_figma:
action: get_file_nodes
file_key: "未指定"
node_ids: ["page_id"]
# .
# 3. 查看现有评论
mx_figma:
action: list_comments
file_key: "未指定"
# .
# 4. 添加走查反馈
mx_figma:
action: post_comment
file_key: "未指定"
message: "这个按钮的圆角需要改为 8px,与设计系统一致"
# .
# 5. 回复设计师的疑问
mx_figma:
action: post_comment
file_key: "未指定"
message: "已确认,圆角统一为 8px,间距基准为 4px"
comment_id: "12345"
# .
# 6. 删除已解决的评论
mx_figma:
action: delete_comment
file_key: "未指定"
comment_id: "12345"
# 依赖说明
skill-platform plugins install skill-platform-morphixai
# .
# 配置 API Key
export MORPHIXAI_API_KEY="${API_KEY:?请设置环境变量}"
# .
# 链接 Figma 账号
# 访问 morphix.app/connections
# 一键检查设计系统
1. mx_figma: get_file_components, file_key: "未指定"
2. mx_figma: get_file_component_sets, file_key: "未指定"
3. mx_figma: get_file_styles, file_key: "未指定"
4. mx_figma: get_local_variables, file_key: "未指定"
5. mx_figma: get_team_components, team_id: "未指定"
# 批量导出图标
mx_figma:
action: export_images
file_key: "未指定"
node_ids: ["1:2", "3:4", "5:6", "7:8", "9:10"]
format: "svg"
scale: 1
变量类型说明:
COLOR → 颜色变量 (#RRGGBB)
FLOAT → 数值变量 (间距/圆角/字号)
STRING → 字符串变量 (字体名称)
BOOLEAN → 布尔变量 (显示/隐藏)
# .
变量模式:
valuesByMode → 各模式下的不同值
例: 颜色变量在 light/dark 模式下有不同值
团队组件库查询:
get_team_components
team_id: "123456789"
page_size: 30 # 分页大小
# .
get_team_component_sets
team_id: "123456789"
# .
get_team_styles
team_id: "123456789"
专业版检查清单:
[ ] 设计系统全量检查已完成
[ ] 设计变量已提取为 Token 文件
[ ] 组件库已盘点(文件+团队)
[ ] 图标资产已批量导出
[ ] 评论管理流程已建立
[ ] 团队组件库已同步
[ ] 免费版功能正常可用
[ ] 组件变体已验证一致性
A: API Key 和插件配置无需变更,直接使用专业版的评论管理、组件库和设计变量功能即可。
A: 变量 API 可能需要 Figma Enterprise 计划才能完整使用。本地变量 get_local_variables 一般可用,发布的跨文件变量 get_published_variables 可能需要高级计划。
A: export_images 支持多 node_ids,建议单次不超过 50 个节点。超大批量请分多次执行。
A: 可以。使用 post_comment 并传入 comment_id 参数即可回复指定评论。
A: 组件集是包含多个变体的容器(如 Button 组件集含 Primary、Secondary 等变体),组件是单个可复用单元。
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|---|---|---|---|
| LLM API | API | 必需 | 由Agent内置LLM提供 |
| morphixai 插件 | 工具 | 必需 | skill-platform plugins install skill-platform-morphixai |
| Figma 账号 | 服务 | 必需 | figma.com 注册 |
| MorphixAI API Key | 认证 | 必需 | morphix.app/api-keys 获取 |
| Figma Enterprise | 服务 | 可选 | 设计变量完整功能可能需要 |
mk_xxxxxx,与免费版共用)MORPHIXAI_API_KEY| 错误场景 | 原因 | 处理方式 |
|---|---|---|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令,参考国内替代方案 |
{
"success": true,
"data": {
"result": "Figma设计集成-专业版处理结果",
"execution_time": "0.5s",
"metadata": {
"version": "1.0",
"processor": "figma design pro"
}
},
"execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
"error": null
}
| 风险类型 | 防范措施 |
|---|---|
| API密钥泄露 | 通过环境变量配置,禁止硬编码到代码或配置文件中 |
| 命令执行风险 | 仅执行白名单命令,避免拼接用户输入到命令行参数中 |
| 网络通信安全 | 使用HTTPS协议,验证SSL证书有效性 |
| 敏感数据暴露 | 输出结果中不包含密钥、令牌等敏感信息 |
| 使用前请确认已阅读依赖说明章节,确保运行环境满足安全要求。 |
| 操作场景 | 手动耗时 | 自动化耗时 | 效率提升 |
|---|---|---|---|
| 文件解析与提取 | 5-10分钟/个 | <5秒/个 | 60-120x |
| 批量文件处理(100个) | 8-16小时 | <5分钟 | 96-192x |
| API调用与响应解析 | 2-3分钟/次 | <1秒/次 | 120-180x |
| 多接口数据聚合 | 15-30分钟 | <10秒 | 90-180x |
| 命令执行与结果收集 | 3-5分钟/次 | <2秒/次 | 90-150x |
| 重复任务批量执行 | 因任务而异 | 线性缩减 | 5-50x |
| 错误排查与修复 | 10-30分钟 | <30秒 | 20-60x |
| 对比维度 | Figma设计集成-专业版 | 传统手动方式 | 通用脚本工具 |
|---|---|---|---|
| 自动化程度 | 全流程自动 | 完全手动 | 部分自动 |
| 错误处理 | 内置错误恢复 | 依赖人工经验 | 基本try-catch |
| 可复用性 | 参数化配置 | 一次性脚本 | 模板化 |
| 安全合规 | 内置安全检查 | 无安全保障 | 无安全保障 |
| 适用场景 | 企业级Figma集成平台,支持组件库管理、设计变量提取、批量导出与团队协作工作流 | 通用场景 | 通用场景 |