SuperAPI AI 工具集

figma-sync

设计与创作

查看项目

更新于 10-15 17:26

技能介绍

figma-sync 是一个 Figma ↔ 代码双向同步技能,主要用于读取 Figma 设计文件、提取设计令牌、生成前端代码,并将本地模型与 Figma 进行对比或写回。

配置:需导出个人访问令牌,命令为 export FIGMA_TOKEN="your-personal-access-token",令牌可在 https://www.figma.com/developers/api#access-tokens 获取。

主要命令与用途:拉取(读取并生成代码),例如 python3 scripts/figma_pull.py --file-key <KEY> --platform rn-expo --output-dir ./out,支持 --node-ids 1:2,3:4 与 --platform web-react,输出 designModel.json、tokens.json、codePlan.json 及生成的组件文件;推送(写回),例如 python3 scripts/figma_push.py --file-key <KEY> --patch-spec patch.json,默认干跑,加 --execute 才实际应用;差异对比,例如 python3 scripts/figma_diff.py --file-key <KEY> --local-model designModel.json,输出变更与用于同步的 patchSpec;预览,例如 python3 scripts/figma_preview.py --file-key <KEY> --operations ops.json,展示将发生的变更但不实际改动。

支持平台:rn-expo(React Native + Expo + TypeScript,主要)与 web-react(React + Tailwind CSS,次要)。

限制与注意事项:使用指数退避、ETag 缓存并遵守 Figma 速率限制(约 30 req/min),缓存存于 .figma-cache/ 目录;推送默认不执行,需显式加 --execute。其他收费、价格或更多平台支持暂未提供。