Zeplin教程(设计师端、开发端)

1 什么是Zeplin

Zeplin是一款为设计师和开发者提供设计图交接与沟通的高效平台，核心功能为标注。设计师可通过插件(目前仅支持PS和sketch)将已完成的设计图直接导入到Zeplin中，无需手动标注，开发者在Zeplin查看设计图时可通过鼠标点击设计图 显示相应位置的尺寸、色值、文字大小等信息。

实际效果图如下:

image

2 Zeplin的作用

• 对于设计师来说:
  不用做标注，省很多事，也不需要总担心标注漏了什么，程序员又来问来问去
• 对于开发者来说:
  不需要费心将标注的px换算成自己需要的尺寸，也不用担心设计师标注漏了什么

3 注册并验证Zeplin账户，下载安装客户端

3.1 打开Zeplin官网(https://zeplin.io/)

image

3.2 注册账户

image

3.3 去邮箱接受验证邮件，并激活账户(可能会被误认为辣鸡邮件)、

image

3.4 下载并安装客户端(windows或mac)

image

4 操作教程

如果你是码农，请直接跳到开发端即可，如果你是设计师呢？恭喜你，需要全部看完！

4.1 设计师端(Photoshop版)

4.1.1 打开并登录客户端

4.1.2 安装PS导出插件(需先关闭PS)

image image

4.1.3 新建Zeplin项目

image image image

4.1.4 在Zeplin项目中邀请开发者参与

image

4.1.5 从PS中导出设计图到Zeplin

• 首先，我们需要确保ps中已经安装好了zeplin插件，我们可以在窗口，扩展功能中看到
• 然后，我们打开一个psd文件，打开zeplin插件，可以看到说明，是将画板导入到zeplin
• psd中默认是以图层的形式呈现的，我们需要先将图层转换成画板，先选中所有的图层（按住shift键，分别选中第一个图层和最后一个图层），右键-来自图层的画板。
• 这样，软件会提示我们即将从图层新建画板，可以为画板重命名，定义高度和宽度，我们直接点击确定即可。
• 此时选中画板，Zeplin面板就会显示这个黄色的按钮，点击按钮会提示你选择要导入到哪个Zeplin项目中(勾选下方的蓝色框会覆盖更新相同命名的画板)，点击“import”即可开始上传，然后等待上传完成即可。

4.2 开发端

4.2.1 打开并登录客户端

4.2.2 等待参与的Zeplin项目同步更新完成

4.2.3 刷新一次项目

image

4.2.4 查看数值尺寸与切图

5 注意事项

免费版账户仅能同时存在一个项目，设计师可注册多个设计师账户+1个公用的开发者账户，设计师账户创建的项目均邀请公用账户参加。

6 参考资料

Zeplin与sketch-入门教程
Zeplin 的使用体验如何？