zeplin导出切图需确保设计稿已正确标记、启用权限并配置规则:一、web端手动下载单个图层切图;二、桌面客户端批量导出画板;三、用cutterman插件在ps中预标记后同步;四、用摹客插件实现高自由度导出。

如果您在使用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、点击“导出全部”,系统将按设定规则生成本地文件夹并自动打开。










