设计系统图片压缩工作流：从 Figma / Sketch 导出到 CDN

用分级文件夹 + Zipic 预设统一压缩 Figma 或 Sketch 导出的设计系统资产，配上 CDN 友好的命名规范，工程同学拿到就能直接上线。

独立博主每篇文章就一张主图，质量参数随便拉一下就够了。但维护着组件库 + 营销站 + 三个本地化 App 的设计团队没法这么对付——一旦要管的不是”这一张图”而是”设计系统里的每一份资产”，问题就不再是压得多狠，而是同一份导出每次能不能都给出命名一致、尺寸一致、压缩一致的文件，让设计师和工程师都省心。

要把 设计系统的图片压缩 做扎实，不能靠一次性工具，得搭一条流水线：Figma 或 Sketch 导出 → 分级文件夹 → 按档位套预设自动压缩 → 交付给工程和 CDN。这篇写给在 macOS 上掌管这条流水线的 design ops 负责人、设计工程师、资深设计师——与其每天盯着流水线怕它出错，不如把规则一次性定下来。

把设计系统资产分四档

动手压缩之前先分类。成熟的设计系统最后都能拆成下面四档资产，每档对画质、格式、文件大小的要求不一样。把它们丢进同一个预设里，正是”团队号称有设计系统、营销站却还在发 8 MB JPEG”的根源。

资产档位	例子	落点	推荐格式	压缩力度
图标层（Iconography）	UI 图标、字形、品牌标志	组件库 / 图标字体	SVG（首选）、PNG 兜底	视觉无损；SVG 用 SVGO，PNG 用 level 2-3
插画层（Illustration）	点缀插画、空状态、营销场景	组件槽位、营销页面	带 alpha 的 WebP 或 PNG	视觉无损，level 3
产品图（Product imagery）	截图、设备拍摄、机型样机	文档、营销、OG 卡片	WebP（或 AVIF）取代 JPEG	偏激进 level 3-4
营销 / 社交（Marketing & social）	主视觉 banner、OG 卡片、广告创意	CDN 前置的营销页	OG 用 JPEG（兼容性）、主视觉用 WebP	level 2-3，目标 ~200-500 KB

国内的 Ant Design / Arco Design / TDesign / Fusion，海外的 Material / Carbon / Apple HIG，基本都按这条思路组织资产——叫法略有差别罢了。

为什么要分档？因为不同档位的资产该压多狠完全不一样。OG 卡片每次都会被社交平台再编码一轮，本地导出时 JPEG 就该狠压——你发一张 2 MB 的 OG 卡给 LinkedIn，对方照样会再压回 200 KB。图标则相反，要在按钮里以最小尺寸呈现，细节必须保留干净。

@1x/@2x/@3x 切图问题（以及你的设计工具到底能导出什么）

设计系统同时覆盖 Web 和移动端的话，除图标层外，每份位图资产都至少要三套尺寸。但能导出什么格式，得看你用的是哪款工具——2026 年最常见的两款刚好路线相反。

Figma 的导出文档写得很清楚：PNG 与 JPG 接受 1x、2x、3x 或任意自定义倍率，SVG 与 PDF 只能 1x 导出。Figma 至今（2026 年）没有原生 WebP 导出——Figma 的导出文件夹永远是一堆 PNG / JPG，WebP 要靠下游再起一道工序才能产出。

Sketch 走的是另一条路。这款 macOS 老牌工具一直在更新，原生支持 PNG、JPG、HEIC、TIFF、WebP 五种位图格式，向量侧覆盖 SVG、PDF、EPS；缩放倍率从 0.25x、0.5x 一路到任意自定义值。2026 年的 Barcelona 更新还把 P3 广色域加进了 WebP 导出——团队若要交付 Display P3 硬件，这一步直接省事。Sketch 从未离场，相当一批资深 macOS 设计师正是看上它原生格式覆盖更全、导出环节少一道，才从 Figma 回到了 Sketch。

国内团队还有第三条路径：Figma 在国内访问不稳，MasterGo、即时设计、Pixso 是常见的国产替代，导出能力大体对齐 Figma——PNG / JPG 多倍率没问题，能不能原生导出 WebP 各家略有差异，建议先在工具里手测一遍。本文这条流水线对它们一样适用。

不管用哪种工具，下游再走一道压缩仍然有意义。理想的交接流程是这样：

设计工具导出最高倍率（移动端通常 3x、Web 高分屏通常 2x）。Figma 出 PNG；Sketch 出 PNG 或 WebP。
一道压缩把每个倍率统一到目标格式并写进对应文件夹。Web 档位用 WebP、图标档位用 PNG。
可选第二道：从主图缩出中间倍率（2x、1x）。

下面这段视频展示 Zipic 在终端里用 URL Scheme 跑批量格式转换——用在 Figma 或 Sketch 的导出文件夹上也是同样的效果。

让文件夹结构对齐资产档位

最干净的做法是一个文件夹对应一个 Zipic 预设：文件夹名就是档位，预设决定怎么压。设计师把文件扔进对应的文件夹，工程同学从产物目录里取压缩好的。

~/Design/exports/
├── 01-icons/         → Zipic 监控 → SVGO + PNG level 2 → ~/CDN-staging/icons/
├── 02-illustrations/ → Zipic 监控 → WebP level 3，最大 1600 px → ~/CDN-staging/illustrations/
├── 03-product/       → Zipic 监控 → WebP level 4，最大 2400 px → ~/CDN-staging/product/
└── 04-marketing/     → Zipic 监控 → WebP level 3 + JPEG OG 变体 → ~/CDN-staging/marketing/

这种布局换来两个好处。第一，设计师不用记哪份资产配哪个预设——文件夹本身就是预设。第二，新成员入职或外包对接时，一张 Automation 面板的截图就把整套压缩策略讲清了，不用再去翻没人愿意读完的飞书文档或腾讯文档。

数字前缀（01-、02-）是有意为之：让文件夹按你巡查资产时的实际顺序排列，同步到任何云盘也不会被字母序打乱。

给每档资产配 Zipic 预设

打开 Zipic，点击主窗口左下角的 Compression Settings，预设列表就会出现；右上的 + 用来新建。每档资产各自配格式、宽度上限和等级（Zipic 等级 1-6，数字越大压得越狠、体积越小）。

可以直接抄的具体配置：

图标（PNG） — 格式 png、level 2、不缩放。视觉无损；level 2 仍会剥离元数据、把编码做到最优。
插画（WebP） — 格式 webp、level 3、宽度 1600。保留 alpha；高分营销页面够用。
产品图（WebP） — 格式 webp、level 4、宽度 2400。参数偏激进，但摄影类内容仍看不出与原图的差别。
营销主视觉（WebP） — 格式 webp、level 3、宽度 1920。匹配高分屏典型的 hero 尺寸。
OG 卡片（JPEG） — 格式 jpeg、level 3、宽 1200、高 630。1.91:1 的 OG 比例；JPEG 在各社交平台兼容性最好。

宽度上限和压缩等级一样关键——把导出尺寸缩到展示尺寸，几乎总比再调高一档等级更划算。一张 4000 px 的插画硬压到 200 KB，浏览器最后渲染时被缩掉的那一大堆像素仍然是浪费。等级保持中等、宽度卡到布局真正需要的最大值，重活交给 resize。

每个档位对应一个监控文件夹

Folder Monitoring 是让预设自动跑起来的关键——有了它，预设不再需要手动触发。这是 Zipic Pro 功能，详细配置见文件夹自动压缩文档；简单说就是：Settings → Automation → +，选一个文件夹，点 Compression Options 绑上预设。

四个档位的文件夹分别配一遍，最后就是四条监控记录、四套独立预设。设计师从 Figma 导出到 02-illustrations/ 时，Zipic 自动接管并跑插画预设，把压缩结果写到你指定的位置。Smart Skip 会根据文件指纹跳过已经压过的文件——改了预设参数或源文件有更新时会自动重新压缩，所以新设计师入职第一天把历史目录整个扫一遍也没问题。

监控深度默认 2，能覆盖到一层子文件夹（如 02-illustrations/empty-states/）。只有设计师真的会嵌到三层以上才值得调高，否则徒增 watcher 开销。

CDN 友好的命名规范

分级文件夹搞定了”哪类资产该怎么压”，但留下第二块硬骨头：CDN URL 一旦发布就永久存在，资产一改名就成了死链。流水线跑起来之前先把命名定下来。

实战里比较稳的一种模式：

{tier}-{component}-{state}-{scale}.{ext}

例子：

icon-arrow-right-solid-1x.svg
illustration-empty-inbox-2x.webp
product-dashboard-mac-3x.webp
marketing-hero-launch-may-2x.webp
og-launch-may.jpeg

三条能让 CDN 后期不出乱子的规则：

不要空格、不要大写。 Linux 文件系统和大多数 CDN 都区分大小写；“Hero.png” 和 “hero.png” 可能解析成两个不同对象，或者其中一个 URL 直接 404。
倍率写进文件名，不写进目录。 icon-foo-2x.png 在文件夹重组之后还能用；2x/icon-foo.png 不行——大多数 <img srcset> 流水线也更习惯同级文件，不是平行目录树。
营销档位留给带时间属性的命名。 营销主视觉天然是阶段性的，把日期烧进文件名（launch-may），下一波活动就不会盖掉上一波。

一份主图生成三个倍率时，产出就是三个文件：foo-1x.webp、foo-2x.webp、foo-3x.webp——正好对应一个 srcset 块，工程同学写一次 <img> 标签就行。

交接：设计导出 → 工程分支 → CDN

到这里流水线还停在”压缩好的文件躺在硬盘里”。剩下的事是把这些文件送进代码仓库或 CDN bucket，看团队规模和工具链来选：

小团队，手工交接。 设计师把 ~/CDN-staging/<tier>/ 直接 commit 进工程仓库的 assets/，本地压缩、PR diff 评审。10 人以内能跑；规模一上去就受不了——大量二进制进 git 历史会拖垮仓库。

中团队，以 CDN bucket 为准。 压缩产物直接进 bucket。海外团队常用 Cloudflare R2（官方价格：标准存储 $0.015/GB·月、出站免费）、AWS S3 + CloudFront，或托管图床 Cloudflare Images（$5 / 10 万张存储 + $1 / 10 万张交付）。国内团队主流是阿里云 OSS（标准存储 0.12 元/GB·月）、腾讯云 COS、七牛云 Kodo、又拍云 USS——阿里云、腾讯云胜在内网回源方便，七牛、又拍的 CDN 套餐对中小团队更友好。工程侧通过 URL 引用，不再走文件路径；压缩仍然在设计师 Mac 上跑——CDN 负责分发，不负责优化。

大团队，资产全量版本化。 Storybook 或设计系统仓库像引入组件那样引入资产。好处是资产版本跟组件版本绑死，按钮改版时旧图标不会被遗留上线、新图标也不会被遗漏。Zipic 还是按档压缩，只是终点变了。

不管哪种模式，压缩决策都收敛到一处：放在 Zipic 的预设里，发生在导出那一刻。CDN 干的是分发，不是策略。两者混在一起就容易演变成”Webpack 里再加一道 imagemin 跟上游打架，产出比谁都差”。

上线前先做一遍冒烟测试

生产营销站接到这条流水线之前，先用可控样本跑一遍冒烟测试。最小清单：

参考样本。 每档挑五份真实导出——一个真图标、一张真插画、一张真产品截图、一张真营销主视觉、一张真 OG 卡，各自跑对应预设。
先目测再看数据。 把压缩产物放到原图旁边对比。任何一档在 100% 缩放下肉眼可见变差，就是等级过激进了，往下调一档再继续。
核对数据。 记录压缩后的体积和尺寸。插画与产品图通常都能压得很狠——Figma 习惯按 3x 导出但布局只用到 2x 时，体积常常能砍到原来的几分之一。OG 卡片体积也应能轻松控制在各社交平台推荐的上限以下。某一档怎么调都达不到”肉眼看着跟原图一样、体积又合理下来”的状态，多半是宽度上限选错了，不是等级的问题。
跑一次 CDN 完整链路。 把产物上传到 bucket 再请求回来。CDN 有时会自己再编码一次（Cloudflare Images 会按需派生 AVIF / WebP；阿里云 OSS 也提供”图片处理 IMG”在线变换）。确认你设计好的那条路径，就是 CDN 最终交付出去的那条。
让设计师跑一遍。 流水线如果连设计师本人都看不出文件有没有压过，就还不算完。把产物文件夹设为 Figma 或 Sketch 的默认导出位置、或加进 Finder 收藏夹，让策略一眼看得见。

冒烟测试不为穷举边界，是为了让团队第二个加入的人不读 runbook 也能产出和第一个人一样的产物。

如果团队希望把 URL Scheme 当兜底（CI 巡检、merge 后的钩子、构建时强制执行），Workflow 集成文档列了所有参数；同一份预设可以在脚本里按名字调用。

单一预设搞不定的两种情况

有两种场景超出 Folder Monitoring 一对一的能力范围：

路由级条件格式。 营销站想给支持 AVIF 的浏览器送 AVIF、其余送 WebP，同一份源就要压两次。解法是开两个监控文件夹同步同一份源——04-marketing-webp/ 和 04-marketing-avif/ 各配各的预设。
明暗模式变体。 一对随主题切换的 logo 需要成对导出。变体写进文件名（logo-dark-1x.svg、logo-light-1x.svg），让消费端代码挑。

这两种情况下流水线的结构不变：一个文件夹、一个预设、一条明确策略。别想着把一个预设做得”够聪明”去处理三条分支——Zipic 的预设模型刻意做成扁平的，一旦开始嵌条件，团队的理解成本会很快失控。