Figma

🎨 设计到代码,一键贯通

通过 ClawLink 安全连接 Figma API,实现设计文件读取、资源导出、评论协作、设计令牌提取及自动化 webhook,适合设计与开发团队协作。

收藏
10.5k
安装
2.3k
版本
1.0.5
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心功能

figma-design 是一套面向设计与开发协作场景的 Figma 集成技能,通过 ClawLink 托管的 OAuth 流程实现免密钥安全连接。核心能力覆盖四大维度:

1. 设计文件深度解析

  • 支持从任意 Figma URL 智能提取 file_keynode_idteam_id 等资源标识
  • 获取完整设计文件 JSON,支持节点级精准查询
  • 提取已发布的样式(颜色、文字、效果、网格)、组件及组件集

2. 资产与令牌导出

  • 图片渲染与下载:支持 PNG、SVG、JPG、PDF 格式,可指定缩放比例
  • 设计令牌自动提取:从 Figma Styles 和 Variables 中提取结构化令牌
  • Tailwind CSS 一键转换:将设计系统直接转换为前端可用的 Tailwind 配置

3. 协作与评论管理

  • 完整评论生命周期:读取、添加、删除评论及表情回应
  • 支持回复线程(仅支持单层回复结构)

4. 自动化与团队管理

  • Webhook 全生命周期管理:创建、更新、删除、查询请求历史
  • 团队级资源洞察:项目列表、文件库、团队级组件与样式库

显著优势

| 维度 | 亮点 |
|------|------|
| **接入体验** | 三步完成连接(安装 → 配对 → 授权),无需管理 API Token |
| **安全架构** | OAuth 令牌由 ClawLink 托管,聊天中永不暴露凭据 |
| **开发友好** | 设计令牌 → Tailwind 转换打通设计与开发断层 |
| **细粒度权限** | 读写分离,所有写入操作强制用户确认 |

局限性与注意事项

  • 文件类型限制:仅支持 Design 文件(figma.com/design/),FigJam 看板和 Slides 返回 400 错误
  • 设计令牌覆盖:未编码为 Figma Styles 或 Variables 的设计元素会被静默忽略
  • 图片 URL 时效性:下载链接 14 天后过期,需即时处理
  • Webhook 标识依赖team_idproject_idfile_key 无法通过 API 反查,必须从 URL 提取或使用资源发现工具
  • 嵌套回复限制:评论回复不支持多层嵌套,仅支持对根评论的回复

适用人群

  • 前端开发者:需要从设计稿提取 Tailwind 配置、导出切图资源
  • 设计系统维护者:管理团队组件库、样式库,监控设计一致性
  • 产品经理/项目经理:通过评论协作追踪设计反馈,或设置 webhook 接收文件变更通知
  • 自动化工程师:构建设计→开发流水线,实现设计变更自动同步

风险等级与使用建议

安全等级:S — 读写分离架构完善,OAuth 托管避免密钥泄露风险。但需注意:

  • 写入操作(评论、webhook、删除)必须显式确认,避免误操作
  • 团队级 webhook 需要管理员权限,普通成员可能遭遇 403
  • 建议定期通过 clawlink_list_integrations 验证连接状态

来源可信度:T2 — 由 ClawLink 官方验证并托管,依赖第三方集成平台的稳定性与合规性。

Figma 内容

手动下载zip · 6.2 kB
skill-card.mdtext/markdown
请选择文件