SuperAPI AI 工具集

figma-enumerate-component-urls

设计与创作

查看项目

更新于 11-02 04:45

技能介绍

用途

该技能用于完整枚举一个 CDS Figma 文件中的所有公开组件集,产出一份按页面分区(如 Layout、Actions、Inputs 等)分组的「[组件名称]: [Figma URL]」清单,便于在文档或沟通中按名称快速定位组件链接。

主要能力

  • 直接使用 Figma REST API 读取整个文件,而非依赖 Figma MCP 工具(后者仅能访问桌面应用中当前打开的页面)。
  • 通过 depth=1 获取全部页面,区分「分区标题页」(如 ⚡️ Actions、🔘 Inputs,仅作分组标签)与「组件页」(名称带 ↳ 前缀,包含实际组件集),并忽略封面页、暂存页与 ⛔️ 标记的废弃分区。
  • 通过 /nodes 接口批量查询页面内的 COMPONENT_SET 子节点;遇到 SECTION 容器嵌套组件集时,需再次查询该 section 的 ID。
  • 排除名称以「.」开头的内部辅助组件集(如 Carousel 的 .count、Select 的 .Dropdown Menu、Modal 的 .Header 等),它们不属于公开消费 API。
  • 生成 URL 时把节点 ID 中的「:」替换为「-」,始终链接到组件节点而非页面节点;COMPONENT_SET 与无变体的 COMPONENT 均为有效目标,CANVAS(页面)节点 ID 则需跳过。
  • 输出时按文件中的分区标题使用 Markdown「##」标题分组,保持文件自上而下的顺序;若页面为 🚧 标记的未完成页面,仍会收录并注明其 WIP 状态;组件名中的 emoji 装饰符(如表示实验性的 🔮)会保留。

使用方式

  1. 在环境中设置 $FIGMA_ACCESS_TOKEN。
  2. 默认使用 CDS Components 规范文件:文件 key 为 k5CtyJccNQUGMI5bI4lJ2g,URL 为 https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components;若用户提供了其他 Figma 链接,则取 /design/ 与下一个 / 之间的片段作为文件 key。
  3. 使用 curl 请求 https://api.figma.com/v1/files/${FILE_KEY}?depth=1 获取页面列表,并用 python3 解析输出页面 ID 与名称。
  4. 仅收集带 ↳ 前缀的组件页 ID,将其批量拼接为逗号分隔(URL 编码 : → %3A、, → %2C),请求 https://api.figma.com/v1/files/${FILE_KEY}/nodes?ids=${IDS}&depth=2,提取 COMPONENT_SET 子节点。
  5. 若某页仅返回 SECTION 节点而无 COMPONENT_SET,则对该 section ID 再查询一次(例如 CDS 的 Tray 页面,其组件集位于名为「Tray component」的 section 内)。
  6. 跳过名称以「.」开头的组件集,按 Step 4 的 URL 模板生成链接:https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id={component-set-id-with-dashes}
  7. 按分区标题分组输出;单组件页面以去掉 ↳ 与 emoji 的页面名作为名称,多组件页面则逐条列出各自的组件或组件集名称。

适用场景

适用于需要从 CDS Figma 设计文件中批量整理公开组件清单及对应链接的场景,例如汇总组件目录、生成设计文档中的组件索引,或按页面分区快速定位某个组件的 Figma 节点。

限制

  • 必须提供有效的 $FIGMA_ACCESS_TOKEN,否则无法调用 Figma REST API。
  • 输出仅针对 CDS Figma 文件结构(分区页、↳ 组件页、SECTION 嵌套等约定),对其他文件结构未必直接适用。
  • 依赖 Figma REST API 的速率限制,建议尽量批量请求。
  • 资料未说明该技能在调用失败、权限不足或节点缺失时的具体错误处理方式。