SuperAPI AI 工具集

figma

设计与创作

查看项目

更新于 10-15 23:34

技能介绍

用途:从 Figma 文件提取设计数据,获取设计令牌、组件规格,并基于设计数据生成代码。

主要能力:通过 Figma REST API 获取文件、指定节点、图片、评论、版本;提取颜色与文字排版等设计令牌;列出并检查组件、导出组件为 SVG;获取样式并以 CSS 导出;结合 AI 工具将节点数据生成 React 组件代码;提取间距值;同步设计令牌、批量导出图标。

使用方式:先设置环境变量 export FIGMA_ACCESS_TOKEN=figd_xxxxx,令牌在 Figma 的 Settings > Account > Personal Access Tokens 获取。可选安装 CLI:bun add -g @figma-export/cli。命令行方式:figma-export components FILE_KEY -o ./output、figma-export styles FILE_KEY -o ./styles,或使用 .figmaexportrc.js 配置文件后运行 figma-export use-config。API 方式用 curl 加请求头 X-Figma-Token: $FIGMA_ACCESS_TOKEN 调用 https://api.figma.com/v1/files/$FILE_KEY 等端点,并用 jq 处理输出。FILE_KEY 取自 Figma URL,NODE_ID 来自 Figma 节点。

适用场景:设计令牌同步、图标批量导出、组件规格检查、设计到代码的转换。

限制:API 有速率限制,建议缓存响应;优先按节点 ID 获取而非整文件;建议在构建时提取而非运行时;需对提取结果做校验,因为 Figma 结构各异;令牌与具体收费、价格、平台支持等资料暂未提供。