SuperAPI AI 工具集

ingest-figma

设计与创作

查看项目

更新于 10-16 05:01

技能介绍

用途:从 Figma 文件提取设计系统信息,包括颜色、阴影、文字样式与组件,输出为 tokens JSON,供后续设计系统构建使用。

主要能力:通过 Figma REST API 拉取指定节点与样式定义;解析 SOLID 填充并转为十六进制颜色,识别 DROP_SHADOW 效果、字体相关文字样式,以及 COMPONENT 与 COMPONENT_SET 组件;同时读取 /styles 返回的命名变量。输出写入 artifacts/ingested/figma-<fileKey>-tokens.json,schema 与 ingest-github 一致,并附带 source 字段记录 figma_url、file_key、node_id。

使用方式:先做预检,检查环境变量:Bash(test -n "$FIGMA_TOKEN" && echo has-token || echo no-token)。有令牌时解析 URL,格式为 https://www.figma.com/(file|design|proto)/<fileKey>/<name>?node-id=<nodeId>,提取 fileKey 与 nodeId(需 URL 解码)。随后用 curl 请求节点与样式,例如:Bash(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" "https://api.figma.com/v1/files/<fileKey>/nodes?ids=<nodeId>&depth=2" -o /tmp/figma-<ts>.json) 以及 Bash(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" "https://api.figma.com/v1/files/<fileKey>/styles" -o /tmp/figma-styles-<ts>.json)。完成后提示提取数量,并可继续 /create-design-system 或启动 artifact 技能。

无令牌回退:提示用户二选一,去 https://www.figma.com/developers/api#access-tokens 获取令牌并 export FIGMA_TOKEN=...,或在 Figma 中右键画板 → Copy as → Copy as SVG,将文件放入 artifacts/ingested/ 后解析 SVG。SVG 路径会提取 fill、stroke、style 颜色属性与 text 元素的字体信息,生成带 confidence 标记的部分 tokens.json,source 记录 svg 路径;注意 SVG 导出会丢失组件结构,仅保留视觉图元。

限制:Figma API 免费层限速 50 请求/分钟,单次拉取一帧加样式共 2 个请求。FIGMA_TOKEN 仅存于环境变量,不写入磁盘或日志。其余细节资料未提供。