Zeplin切图导出技巧全解析

本文详细解析了在Zeplin中高效导出切图的四种实用方法——从Web端单图手动下载、桌面客户端批量画板导出，到借助Cutterman插件在Photoshop中预标记同步，再到使用摹客插件实现高自由度、精细化的切图控制；无论你是被“找不到导出按钮”困扰的新手，还是追求交付效率与规范性的资深设计师，都能从中快速定位最适合当前工作流的解决方案，真正打通设计到开发的资源交付最后一环。

如果您在使用Zeplin查看设计稿后需要将其中的图层或画板导出为独立图片资源，但未在界面中找到直接导出选项，则可能是由于设计稿未正确标记、未启用导出权限或未配置切图规则。以下是实现Zeplin导出切图的具体方法：

一、通过Zeplin Web端手动下载单个图层切图

该方式适用于已上传至Zeplin项目中的PSD、Sketch或XD文件，且图层/画板已被正确命名并具备导出属性。Zeplin会自动识别带@倍率标识（如icon@2x.png）的图层名称，并生成对应分辨率切图。

1、登录Zeplin官网（https://zeplin.io），进入目标项目页面。

2、点击需导出的画板，在右侧样式面板中找到「Assets」标签页。

3、在Assets列表中定位目标图层，鼠标悬停其上，点击出现的下载图标（↓）。

4、选择所需分辨率（@1x、@2x、@3x）及格式（PNG、SVG、WebP），点击确认下载。

二、使用Zeplin桌面客户端批量导出画板切图

当设计稿中包含多个需导出的画板时，桌面客户端支持按画板维度一键打包下载，避免逐个点击操作，提升交付效率。

1、确保已安装最新版Zeplin桌面客户端（macOS或Windows），并完成账户登录。

2、在客户端中打开对应项目，右键点击项目名称，选择“Download assets”。

3、在弹出窗口中勾选需导出的画板，设置目标平台（iOS / Android / Web）、分辨率倍率及图片格式。

4、点击“Download”，系统将自动生成ZIP压缩包并保存至默认下载路径。

三、借助Cutterman插件在Photoshop中预标记后同步至Zeplin

该方法将切图逻辑前置到设计阶段，通过命名规范与图层结构控制Zeplin的导出行为，适用于需严格匹配开发调用路径的项目。

1、在Photoshop中安装Cutterman插件（需注册账号并下载安装包）。

2、选中待切图的图层或编组，点击Cutterman面板中的“Mark for Export”按钮。

3、在弹出的命名框中输入符合规范的文件名，例如button_primary@2x.png，注意保留@倍率与扩展名。

4、保存PSD文件后，在Zeplin插件面板中点击“Export to Zeplin”，上传完成即可在Web端Assets中下载。

四、利用摹客插件替代Zeplin完成高自由度切图导出

当Zeplin对特定图层结构识别异常或需自定义压缩、背景透明等参数时，可切换至摹客插件作为补充方案，其导出控制粒度更细且无需依赖图层命名规则。

1、前往摹客官网下载并安装Photoshop插件，重启PS后在「窗口 > 扩展功能」中启用。

2、登录摹客账号，选择对应项目与分组，确保PSD文件已同步至摹客云端。

3、选中需切图的图层/画板/编组，点击插件面板中的“标记切图”按钮。

4、在右侧面板导出设置中，分别配置格式、倍率、压缩等级（高/中/低）、是否保留背景色等参数。

5、点击“导出全部”，系统将按设定规则生成本地文件夹并自动打开。

到这里，我们也就讲完了《Zeplin切图导出技巧全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！