SuperAPI AI 工具集

figma-developer

设计与创作

查看项目

更新于 10-16 09:47

技能介绍

用途:用 Figma REST API 打通设计与代码之间的流程,适合把 Figma 设计系统中的样式与组件稳定同步到前端工程,例如同步设计令牌到 CSS 变量、导出图标集为 React 组件、依据 Figma 变体生成组件脚手架、在 CI 中自动同步设计变更。不适合手动一次性微调设计值、开发 Figma 插件(应使用 Plugin API)、实时协作编辑(应使用 Figma webhooks)或没有 Figma 设计系统的项目。

主要能力与接口:GET /v1/files/:key 获取完整文档树;GET /v1/files/:key/nodes?ids=... 只取所需节点以减小响应体;GET /v1/images/:key?ids=...&format=svg 将节点渲染为 SVG/PNG/PDF;GET /v1/files/:key/styles 列出已发布的颜色、文本与效果样式;GET /v1/files/:key/components 与 /component_sets 列出已发布组件及变体分组;GET /v1/files/:key/variables/local 提取 Figma Variables;POST /v1/variables 组织范围发布本地变量。令牌提取需手动解析文件响应中的样式并转换为 CSS/JSON,API 没有内置的 extractTokens 端点。CI 同步可用 GitHub Actions cron 配合 peter-evans/create-pull-request 自动创建 PR。

推荐做法:文件按 Colors、Typography、Spacing、Components、Icons 分区组织;样式名归一化为小写并用连字符替换特殊字符;Figma 颜色为 0-1 的 RGB,转十六进制前需乘 255 并取整;响应加 TTL 缓存以避免限流;导出图片的 URL 14 天后过期,使用前需重新获取;用 svgo 优化 SVG、@svgr/core 转 React 组件。可用库包括 figma-api、@figma/rest-api-spec、style-dictionary。设计系统与资源优化可分别参考 design-system、asset-manager 技能。认证配置、实体导出、组件生成、CI 自动化与排错的细节暂未提供。