Figma Dev Mode 适合读数,却不替你写「文件合同」:像素对齐、整数倍率、sRGB 任一处漂移都会让前端素材掉链子。本文给设计师与对接同学一份可贴进 README 的决策矩阵:先钉导出参数表,再把抽检放到 远程 Mac mini M4 上批处理晋升。透明与工具差异见 Figma/Sketch PNG 导出对比;帧上网格习惯见 Auto Layout 像素对齐清单。
导出参数表
下表建议贴进交付说明首段,并与工程 @1x/@2x 资源表对齐。
| 项目 | 推荐(Web/App UI) | 风险说明 |
|---|---|---|
| 格式 | PNG(RGBA,需透明时保留 alpha) | JPEG 不适合硬边与透明通道 |
| 倍率 | 仅整数:1x、2x、3x… | 非整数倍率易与 CSS transform 叠算,造成 0.5px 糊边 |
| 坐标与尺寸 | 导出框与内容锚在整数 px | 子像素排版会让 1px 描边在明暗背景下表现不一致 |
| 色彩 | sRGB 全链路一致 | 广色域屏预览≠文件 ICC;详见 sRGB 与 Display P3 验收清单 |
| 背景 | 按 SKU 选择透明或品牌底 | 误开「包含背景」会把调试色块栅格进交付物 |
| 切片命名 | 组件_状态@2x.png 等与组件词典一致 |
连字符、大小写、语言前缀需与仓库静态资源规范一致 |
可执行检查项(导出前 30 秒):① 倍率列是否全部为整数;② 色彩是否已选定为「嵌入 sRGB ICC」或「无配置文件但全链路按 sRGB」之一;③ 切片/图层命名是否与词典逐字匹配(含
@2x 后缀)。
批量验收清单
将导出目录放到 Apple Silicon 远程 M4 工作机,本机专注改稿,质检命令可与 CI 共用。
- 数量:导出预设条目数与落盘文件数一致,无漏导、无重复覆盖。
- 几何:每个 PNG 的宽高等于「设计稿逻辑像素 × 文档化倍率」,允许误差 0 px。
- 透明:规格要求透明的 SKU 必须存在非全不透明的 alpha;误导出成实底应整批打回。
- sRGB/ICC:用
magick identify -verbose等核对 Colorspace 与配置文件,与 README 单行策略一致。 - 体积:按业务线文档化的
max_bytes执行;超标仅在已签字的 pngquant 等回退方案下处理。 - 命名:前缀、语言、暗黑模式标记与禁止字符集符合仓库规范。
- 溯源:将 sha256、Figma 文件版本、导出工具版本与 pass/fail 写入 JSONL 后再晋升到
out/。
常见问题 FAQ
Q. Dev Mode 标注会写进 PNG 吗?
常规切片导出不会栅格化 Dev Mode 叠加;若 PNG 出现标尺色块,优先排查是否把调试层框进了导出范围或使用了会合并叠加的导出入口。
Q. 与前端量到的宽高差 1px?
常见于边框居中方式、阴影外扩、以及小数坐标四舍五入组合。请在 README 固定「贴边裁切」或「包含效果外接矩形」之一,并在评审样机上用同一缩放比例验收。
Q. Windows 客户屏上发灰/发艳?
多为显示端色彩管理与文件 ICC 组合问题。先固定验证显示器的配置文件,再按上文 sRGB 清单统一「嵌 ICC」或「无配置」策略,避免双重指派。
下一步
技术见解、首页、购买/租用、价格与节点、帮助中心均可免登录浏览;适合把远程 M4 固定为「唯一晋升节点」,与 Figma 文件版本和 JSONL 日志交叉审计。