Figma 导出自动化工具

要解决的问题

在 Figma 设计稿交付开发时，手工导出资源往往重复且易错。设计师把图标、按钮、色板和间距散落在不同画板里，开发要逐个下载、改名、拼 CSS，耗时还容易出现命名不一致。

核心能力

这个技能基于 Figma REST API v1 来读取文件树，而不是模拟客户端点击。它能：

• 提取 component sets 及其变体属性，保留基础语义结构。
• 拉取 design tokens，包括颜色、排版和间距，方便直接映射到代码变量。
• 将目标 frames 渲染为 SVG 或 PNG，适合图标和插画批量落盘。
• 根据 styles 生成 CSS custom properties，减少手写样式表的时间。

关键步骤

调用时先拿到文件 key，再按需请求 GET https://api.figma.com/v1/files/:key。技能会遍历节点子树，识别可导出的对象，再把资源下载到本地或写入构建流程。对于 token，它会把 Figma 的数值结构转成可维护的 CSS 变量，而不是简单截图。

适用边界

它依赖 Figma API 权限，因此需要先完成授权。节点数量很大时要注意 API 速率限制。复杂变体逻辑或条件样式可能无法 100% 自动还原，仍需要人工校对。它不会自动修复设计稿错误，也不负责打包发布。