设计稿切图如何自动化导出

本文目录导读：

1. 基于 Figma 的自动化方案（目前最主流）
2. 基于 Sketch 的自动化方案
3. 通用第三方协作工具（设计师和开发配合）
4. 最终的前端开发自动化集成
5. 可落地的推荐流程（实战方案）
6. 总结与建议

实现设计稿切图自动化导出，通常需要借助设计工具（如 Figma、Sketch、Adobe XD）的插件或第三方工具（如 Zeplin、Avocode），并结合 构建工具（如 Webpack、Vite） 来实现全流程自动化。

以下是针对不同设计工具和开发场景的具体方案：

基于 Figma 的自动化方案（目前最主流）

Figma 基于 Web，API 开放程度高,是当前自动化切图的首选工具。

使用 Figma 原生功能 + 插件（最常用）

• 命名规范：在设计稿中，将需要导出的图层或组命名为 icn_profile、btn_primary、bg_header@2x 等格式，Figma 会自动识别“@2x”“@3x”后缀生成多倍图。
• 标记为导出：选中图层 -> 右侧面板点击“+”号标记为导出。
• 批量导出插件：
  • Slack Design 插件：可以一键导出所有标记为导出的切图,并支持压缩。
  • ImageOptim 插件：导出时自动无损压缩图片。
  • Figbatch 插件：可以批量导出选中 Frame 内的所有切片。
• 自动化触发：配合 Figma API 或 Figma Plugins API，可以在 CI/CD 流程中自动化拉取设计稿并导出。

使用 “Figma Tokens” + “Style Dictionary”（设计 Token + 代码生成）

这是目前最前沿的“Design to Code”自动化方案，无需手动切图。

• 原理：设计师在 Figma 中定义颜色、间距、字号、图标（SVG）为 Token。
• 工具：安装 Figma Tokens 插件。
• 自动化：使用 Style Dictionary（亚马逊开源工具）将 Figma Tokens 自动转换为 SCSS 变量、JS 常量、Swift 或 Kotlin 代码。
• 图标自动生成：Figma 中的 SVG 图标可以直接作为 React/Vue 组件，或导出为 SVG Sprite。
• 优势：彻底告别手动导出图片，前端直接引用变量和 SVG 图标。

基于 Sketch 的自动化方案

Sketch 是 macOS 的经典工具，自动化依赖于 Sketch 插件 和 命令行工具。

使用 Sketch 插件

• Sketch Measure：不仅能导出切图，还能自动生成标注（尺寸、间距）。
• Zeplin（工具集成）：将 Sketch 设计稿上传到 Zeplin，开发者在 Zeplin 中直接下载切图和查看标注，Zeplin 支持自动生成多倍率图片。
• Avocode：类似 Zeplin，支持自动识别图层并导出 PNG/SVG。

命令行自动化（Sketch CLI）

• 步骤：
  1. 打开终端，输入 sketchtool export layers ~/path/to/file.sketch --output=~/path/to/output。
  2. 脚本化：可以通过编写 Node.js 脚本（如使用 shelljs）调用 sketchtool 命令，并集成到 Git 钩子或 CI 中。
• 缺点：仅限 macOS 环境运行，Windows 不行。

通用第三方协作工具（设计师和开发配合）

这些工具本质上是“切图平台”,可以自动解析设计稿并供开发者批量下载。

1. Zeplin：
   • 设计师上传设计稿后，开发者打开 Zeplin，点击任意图层，右侧自动显示尺寸、颜色、坐标。
   • 可以一键“下载所有切图”，支持多种导出格式（PNG、SVG、WebP）。
   • 自动化：可以通过 Zeplin 的 Webhook 或 API,在设计稿更新后自动触发构建脚本。
2. Avocode：
   • 支持 Figma、Sketch、Adobe XD、Photoshop。
   • “Export All”功能可以按文件夹结构导出所有切片。
3. PixelSnap：

   更轻量，适合手动测量和截取,自动化程度较低。

最终的前端开发自动化集成

无论使用哪种设计工具导出切图,最终的前端工程化通常通过以下方式自动化：

图片压缩自动化

将导出的图片放入前端项目的 src/assets/ 文件夹后,在构建时自动压缩。

• Webpack 配置：使用 image-webpack-loader。
• Vite 配置：使用 vite-plugin-imagemin。
• 效果：提交切图时自动压缩,无需手动操作。

SVG 雪碧图/SVG 组件自动化

如果设计稿导出的都是 SVG 图标：

• 工具：svg-sprite-loader（Webpack）或 vite-plugin-svg-icons。
• 流程：设计导出 SVG -> 放入 icons/ 目录 -> 构建工具自动生成 sprite 图或直接作为组件导入（如 <Icon name="setting" />）。

通过 Git Hooks 自动执行

1. 方案：设计师将设计稿文件（.fig/.sketch）提交到 Git 仓库的特定分支。
2. 自动化脚本：在 post-merge 钩子中，自动运行 sketchtool 或 Figma API 脚本,导出更新后的切图并替换本地文件。

可落地的推荐流程（实战方案）

针对这个场景：你需要在项目中自动化导出设计稿切图。

推荐组合：Figma + GitHub Actions + 构建工具

1. 设计阶段：
   • 设计师在 Figma 中使用统一的组件库和命名规范（icn-*、img-*）。
2. 触发阶段：

   设计师保存设计稿，触发（或定时触发） GitHub Actions 工作流。

3. 自动化脚本（Node.js）：
   • 使用 Figma API（axios 请求 https://api.figma.com/v1/...）获取文件数据。
   • 解析节点，筛选出标记为“export”的图层。
   • 调用 Figma Image 导出 API（GET /v1/images/:key）。
   • 下载 PNG/SVG 文件到项目 src/assets/ 目录。
4. 构建阶段：
   • GitHub Actions 自动创建 Pull Request,提交新图片文件。
   • 开发者合并后，构建工具（Webpack/Vite）自动压缩图片并打包。

总结与建议

方案类型	工具/方法	自动化程度	适用场景
最推荐	Figma + Figma Tokens + Style Dictionary	极高（几乎消除切图）	新项目、UI 组件库、图标库
高效协作	Figma/Zeplin + CI (Figma API)	高	成熟团队，需要频繁更新切图
经典稳定	Sketch + sketchtool + npm scripts	中高	macOS 开发环境，传统设计流程
懒人方案	Photoroom / Background Burner	低（仅处理背景）	只需要去除背景的临时图片

核心建议：

• 如果切图是静态图片（PNG/JPG）：主要靠 Figma 的“标记导出” + 构建工具自动压缩，这已经能覆盖 80% 的需求。
• 如果切图是图标（SVG）：强烈建议采用 Design Token + SVG 组件化，彻底消除“导出图标”这个步骤（前端直接引用 Figma 里的 SVG 作为代码组件）。

你目前使用的设计工具是什么？ 是 Figma、Sketch，还是其他？我可以提供更具体的配置代码。

标签： 解放生产力 流程优化