Figma 资产导出器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_3c6cb52e/figma-rest-api-asset-exporter 到 AI 助手中。
技能介绍
问题:手动导出的重复劳动与参数限制
在处理Figma设计稿时,开发者常面临资产导出的两难——手动操作需反复切换界面、调整尺寸与格式,耗时且易出错;自行编写API调用则需熟悉端点参数与授权流程,尤其批量导出时缺乏统一控制。
技能如何工作:从文件读取到资产导出
该技能基于Figma REST API,通过两个核心端点实现资产自动化导出:
- 文件结构读取:调用
GET /v1/files/:key获取文件的JSON表示,每个图层或对象对应一个node(子树),可解析出目标资产的节点路径与属性。 - 资产导出:通过
GET /v1/images/:key端点,支持scale(缩放比例)、format(输出格式,可选SVG、PNG、PDF)等参数,直接返回可下载的资产文件。
关键步骤包括:
- 获取Figma API访问令牌并完成授权;
- 输入文件
key(Figma文件唯一标识),解析JSON结构定位目标资产节点; - 按需求配置
scale与format参数,调用图像端点导出资产。
适用边界与注意事项
- 需提前申请Figma API访问令牌,且令牌需具备对应文件的访问权限;
- 文件结构复杂时(如嵌套多层级节点),需深入解析JSON子树,避免节点路径错误导致导出失败;
- 导出格式受限于API支持范围,暂不包含Figma插件生成的特殊资产;
- 不同API版本可能存在参数差异,建议参考官方文档确认端点兼容性。
使用场景
- 开发阶段需从Figma文件批量提取SVG图标资源,用于前端界面图标库构建
- 设计交付时需将设计稿按1x/2x/3x分辨率导出PNG图片,适配iOS/Android多设备需求
- 团队需从Figma设计规范文档中导出PDF版本,供非设计岗位成员查阅技术参数
- CI/CD流程中需自动获取最新版本设计稿的PNG预览图,用于自动化测试报告生成
适合人员
- 前端开发工程师:需从设计稿提取SVG/PNG资源用于页面实现
- UI设计师:需批量导出设计稿多分辨率图片供开发适配使用
- 技术产品经理:需获取设计规范文档PDF版本进行技术评审
- DevOps工程师:需集成设计资产导出流程到自动化部署管线