面向设计师、运营、前端素材处理用户：在远程 Mac上做Sketch或Figma的批量导出 PNG时，尺寸规范与命名规范直接影响交付效率与前端对接。本文提供可落地的步骤清单 + 校验清单，涵盖 @1x/@2x/@3x 尺寸表、前缀/后缀/切图规则、推荐工作流，以及常见导出偏色与分辨率问题排查；文末可直达站内博客、首页与购买页。📐✅
为什么尺寸与命名规范影响交付效率
尺寸不统一会导致前端需要手动换算或重复切图；命名混乱则难以做自动化校验、CDN 缓存与版本管理。在远程 Mac上集中做批量导出 PNG时，若事先约定尺寸规范（如统一 @2x 或按倍率出 @1x/@2x/@3x）和命名规范（前缀表模块、后缀表密度或尺寸），可减少返工、便于脚本校验与团队协作，整体交付效率明显提升。
Sketch/Figma 批量导出 PNG 的常用设置对比
在远程 Mac上，两款工具在批量导出时的入口与选项略有不同，建议按下面要点设置，保证输出一致。
| 对比项 | Sketch | Figma |
|---|---|---|
| 批量导出入口 | 选中多个图层/画板 → 右下角「Make Exportable」→ 选 PNG | 选中对象 → 右侧 Export → 添加 PNG，可多倍率 |
| 倍率 | 1x, 2x, 3x 可多选，每个切片独立设 | 1x, 2x, 3x 等，在 Export 里添加多份 |
| 透明背景 | 画布无背景即透明；导出选 PNG-24 或 PNG-32 | 默认透明；导出时选 PNG 即可，注意「Include 'id' in file name」可关 |
| 命名 | 以图层/画板名为基础，可加后缀如 @2x | 以节点名为基础，可关掉「id」避免冗长 |
@1x/@2x/@3x 与尺寸规范表
设计稿通常按某一逻辑尺寸（如 375pt 宽）绘制，导出时需按倍率出图。下表为常用对应关系，便于统一尺寸规范。
| 逻辑尺寸（pt） | @1x（px） | @2x（px） | @3x（px） |
|---|---|---|---|
| 44×44 | 44×44 | 88×88 | 132×132 |
| 100×100 | 100×100 | 200×200 | 300×300 |
| 375×812（整屏示例） | 375×812 | 750×1624 | 1125×2436 |
校验要点： 导出后抽检尺寸是否为整数、宽高比是否与设计一致；若为图标/按钮，确认与规范表一致，避免前端用错倍率。
命名规范（前缀/后缀/切图规则）与校验要点
建议采用「前缀表模块 + 名称 + 后缀表尺寸/密度」的形式，便于自动化与人工核对。
- 前缀： 如
ico_（图标）、btn_（按钮）、banner_（横幅），便于按模块筛选与 CDN 目录划分。 - 后缀： 如
@2x.png、_2x.png或-44x44.png，明确倍率或物理尺寸，避免与 @1x 混用。 - 切图规则： 一图一切片；画板/组件名即导出文件名基础；避免空格与特殊字符，用下划线或连字符。
校验要点： 用脚本或手工检查：① 文件名是否含约定前缀/后缀；② 是否出现重复文件名（不同画板导出到同一目录时）；③ 扩展名是否为 .png 且大小写统一。
可执行步骤与推荐工作流
- 设计稿内： 为需要导出的图层/画板设置好导出预设（PNG、倍率、命名），统一勾选「透明背景」或「无背景」。
- 批量导出： 在远程 Mac上打开 Sketch/Figma 文件，全选目标画板或图层，执行批量导出到同一目录（建议按模块分子目录）。
- 命名与目录： 导出前确认命名规则（前缀/后缀）与工具中的「Export」名称一致；导出后按清单核对文件名与数量。
- 尺寸与格式校验： 用
sips -g pixelWidth -g pixelHeight（macOS）或 ImageMagick 批量检查尺寸；抽检 Alpha 与 sRGB 标签。 - 交付： 打包或上传至 CDN/设计交付平台，附上本次导出的尺寸与命名说明，便于前端直接引用。
常见导出偏色与分辨率问题排查
- 偏色： 统一使用 sRGB 色彩描述文件导出；在远程 Mac 与本地预览时尽量使用相同色彩设置。若 Figma 在浏览器中导出，注意浏览器色彩管理差异，建议用桌面端或远程 Mac 原生应用导出。
- 分辨率/模糊： 确认导出倍率与设计稿画布倍率一致（如设计稿是 @2x 画布，导出选 @2x 即 1:1）；大图避免用「缩放导出」导致插值模糊。
- 透明区域发灰/发黑： 导出格式选 32-bit RGBA；检查画布背景是否为「无」或「透明」。
- 尺寸不对： 检查画板边界是否包含多余空白、是否勾选「Trim transparent pixels」等，避免导出画布与预期不符。