Figma

🎨 Figma 设计资产一站式管理与导出

基于 Figma REST API 的官方技能,支持设计文件读取、评论管理、设计令牌提取与 Tailwind 转换、资源下载及 Webhook 创建。通过 ClawLink 托管 OAuth 认证,无需手动配置 API 密钥。

收藏
10.4k
安装
2.3k
版本
1.0.4
CLS 安全性认证2026-08-10
点击查看完整报告 >

使用说明

核心用法

figma-design 技能通过 ClawLink 托管服务与 Figma REST API 建立安全连接,为 OpenClaw 用户提供完整的设计资产管理能力。核心工作流分为三步:安装 ClawLink 插件、完成设备配对、在 Dashboard 中授权 Figma 账户。认证完成后,所有 API 调用均由 ClawLink 自动注入 OAuth Token,用户无需接触敏感凭证。

技能覆盖四大功能维度:

1. 设计文件解析:通过 figma_get_file_json 读取完整设计文件结构,figma_get_file_nodes 提取特定节点,figma_discover_figma_resources 从任意 Figma URL 解析 file_key 与 node_id;
2. 资产导出:支持 PNG/SVG/JPG/PDF 多格式图片下载(figma_download_figma_imagesfigma_render_images_of_file_nodes),以及 image fills 临时 URL 获取;

3. 协作与评论:完整的评论生命周期管理,包括读取、添加、删除评论及表情反应(reactions),适用于设计评审场景;

4. 设计系统与自动化:提取设计令牌(figma_extract_design_tokens)并直接转换为 Tailwind CSS 配置,同时支持文件/项目/团队级 Webhook 创建,实现设计变更事件推送。

显著优点

  • 零配置集成:ClawLink 托管 OAuth 流程,消除 API Key 管理负担,降低泄露风险;
  • Tailwind 原生支持:设计令牌到 Tailwind 配置的自动转换,打通设计-开发链路;
  • 细粒度权限控制:读取操作开箱即用,写入操作(评论、Webhook、删除)强制要求用户显式确认;
  • 资源发现智能化:URL 自动解析功能让用户无需手动查找 file_key 和 node_id。

潜在缺点与局限性

  • 文件类型限制:仅支持 Design 文件(figma.com/design/),FigJam 画板与 Slides 文件会返回 400 错误;
  • 设计令牌覆盖不全:未编码为 Figma Styles 或 Variables 的设计元素会被静默忽略;
  • Webhook 权限门槛:团队级 Webhook 需管理员权限,项目/文件级需编辑权限;
  • 图片 URL 时效性:下载链接 14 天过期,需立即消费;
  • 评论结构限制:回复不支持嵌套,仅可附加于根评论。

适合人群

  • 前端开发者需要从 Figma 提取设计令牌并生成 Tailwind 配置;
  • 产品经理与设计师需要批量导出设计资源或自动化设计评审流程;
  • 工程团队需要建立设计变更监听与 CI/CD 联动(通过 Webhook)。

常规风险

  • OAuth 范围风险:授权后 ClawLink 可访问用户所有可访问的 Figma 文件,需信任托管方安全能力;
  • 写入误操作:评论删除、Webhook 删除等破坏性操作需严格遵循确认流程,避免不可逆数据丢失;
  • 文件权限漂移:共享文件权限变更可能导致后续 API 调用 403/404,需保持连接状态监控。

安全解读

核心用法

该 Skill 通过 ClawLink 托管服务代理访问 Figma REST API,用户无需自行申请 Figma API Token 或配置 OAuth 流程。安装 ClawLink 插件后,通过三步配对即可启用:安装插件 → 设备配对 → 连接 Figma 账号。

Skill 提供六大功能模块:文件与资源发现(从 URL 提取 file_key、node ID)、文件内容读取(获取设计 JSON、样式、组件)、评论与互动(读取、添加、删除评论及表情反应)、资源下载(PNG/SVG/JPG/PDF 格式导出)、设计令牌处理(提取变量并转换为 Tailwind CSS 配置)、Webhook 管理(文件事件通知)。所有写操作(评论、Webhook、删除)均需用户显式确认,读操作可直接执行。

典型工作流:使用 figma_discover_figma_resources 解析 Figma URL → figma_get_file_json 获取设计数据 → figma_extract_design_tokens 提取令牌 → figma_design_tokens_to_tailwind 生成前端配置,实现设计到代码的无缝衔接。

显著优点

零配置接入:ClawLink 托管 OAuth 流程,用户无需管理 API 密钥,Token 安全存储于 ClawLink 服务端,降低泄露风险。全功能覆盖:支持 Figma 官方 API 的读取、写入、Webhook 等完整能力,远超简单的文件预览工具。设计开发闭环:独有的 Tailwind CSS 配置生成功能,可直接将 Figma Variables 和 Styles 转换为前端可用的主题配置。团队协作增强:内置评论管理和 Webhook 通知,支持设计评审自动化和工作流集成。安全可控:写操作强制确认机制,破坏性操作(删除评论/Webhook)标记为高影响,权限边界清晰。

潜在缺点与局限性

类型限制:仅支持 Figma Design 文件(figma.com/design/...),FigJam 画板和 Figma Slides 返回 400 错误,无法获取白板类设计资源。外部依赖集中:功能完全依赖 ClawLink 服务可用性,若 ClawLink 或 Figma API 服务中断,Skill 将无法工作。ClawLink 作为第三方代理,虽经过验证但仍引入信任链延长风险。令牌提取有限figma_extract_design_tokens 仅识别 Figma Styles 和 Variables 编码的令牌,未使用这些功能的设计文件将静默遗漏大量视觉属性。Webhook 配置门槛:团队级 Webhook 需管理员权限,文件/项目级需编辑权限,且 team_id、project_id 无法通过 API 发现,必须从 URL 手动提取。图片链接时效:下载的图像 URL 14 天后过期,需立即持久化存储。

适合的目标群体

前端开发者:需要将 Figma 设计快速转化为 Tailwind 配置或提取 CSS 变量的场景。设计系统维护者:管理组件库、样式库,需批量提取设计令牌并同步到代码仓库。产品经理与设计师:需要跨团队协作评审,通过 API 自动化评论收集和设计反馈流转。DevOps/自动化工程师:构建 CI/CD 设计资产同步流程,利用 Webhook 实现设计变更自动触发构建。

使用风险

网络与可用性:依赖 ClawLink (claw-link.dev) 和 Figma API (figma.com) 的网络可达性,企业防火墙可能需要放行白名单。OAuth 范围审查:用户需仔细审查 ClawLink 请求的 OAuth 权限,避免过度授权。误操作风险:评论删除、Webhook 删除为不可逆操作,执行前务必通过 clawlink_preview_tool 确认。数据隐私:设计文件内容通过 ClawLink 代理传输,虽采用 TLS 1.2+ 加密,但敏感商业设计需评估是否接受第三方代理模式。版本兼容性:Figma API 更新可能导致部分工具行为变化,建议关注 Figma Developers 公告。

Figma 内容

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