么呵呵呵呵，随着sketch的普及，国内外很多项目团队都陆续用起了 Sketch＋Zeplin 的开发模式。今天给大家推荐这个插件给大家。
目标是让设计更专注于设计，前端更加专注于实现。将一天的工作一秒钟搞定，然后和前端小哥/软妹有更多的时间去愉快玩耍~~
设计师和前端小哥们的协作工具—— Zeplin
Zeplin 面向的用户是设计师和前端工程师，是查看设计稿详细参数的一个工具，核心功能为标注、Style Guide、备注文档与简单的团队协作。
💁🏻 吐个大槽
之前需要花将近 1 天左右的时间来标注和切图一个中型项目（使用Markman），一旦中途出了问题，返工修稿导出再标注，很消耗时间，有的时候间距和颜色会有误差，遇到多平台设计的情况，更是要多张图输出。
前端也需要两张图切换查看，图片管理也很不方便。
使用 Zeplin，只需要一个切图和上传动作就可以节省 1 天的时间去愉快玩耍啦。
Zeplin 支持 PS 和 Sketch，我们以 Sketch 为例看看怎么挽救1天的时间。
安装和创建
首先需要在官网下载客户端，安装后，在 Sketch > Plugins > Zeplin 中可以看到。
Zeplin 需要用户主动创建项目文件，可以创建3种类型的Project：Android、iOS、Web，每一种Project 的前端描述方式不同，便于前端小哥/软妹直接拷贝代码使用。
在免费账户下，每个用户可以创建1个免费 Project 。
🤔 怎么做到可以开多个项目呢？
不充值的方法：用不同的账号，分别创建 Project > 邀请给同一个账号，这样，那个账号里面就有多个 Project 啦。
建议大家有能力的还是选择购买，支持一下zeplin（毕竟为设计师提供了这么大的便捷）。
上传
1 选中 Sketch 中需要保存的画板
2 command+E 或者 Plugins > Zeplin > Export Select Artboard...，如果弹出保存提示，保存关掉就好。
3 这时候会弹出需要上传的Projects 选项，对应放入就好了，我是会默认勾选的 “替换同命名文件”。初次上传系统会提示上传的是几倍图文件。
3 上传成功后Zeplin App 和 Zeplin Web 就可以查看到。在 Project 里面可以直接查看和更改文件夹命名，以及邀请项目对应的同学加入查看（对方需要注册账号）。
查看
左侧 👈 设计稿，点击想要的图层，就会出现对应的间距和颜色字体。
右侧 👉 设计稿的具体信息，包括描述、颜色、字体信息、切图、评论，前端小哥可以自由的查看和下载想要切图，一份设计稿就能搞定全部的视觉产物。
前端和PM同学需要哪个文件，也可以直接拷贝对应的Link（web/App）查看标注＋导出切图。
文件管理
Tag -- 文件右键添加 Tag。
Tag 对于组织文件非常有用，但如果文件太多，它们还不够。 最新的 Zeplin 提供了除了 Tag 以外的分组功能，
Section -- 便于查找和分类 Project 下的不同的项目它们可帮助分组，将项目可视化组织，这样可以更快地找到特定的项目，特别是在不熟悉项目的情况下更好用
Styleguide
Zeplin 可以手动归纳出（老版本会自动归纳，容易出错），每个 Project 里面的 Style Guide Line，包括颜色和字号大小。在字号和颜色分类里面，hover 所需要的图层，点击旁边的 “+” 就可以收入到 styleguide 里面。
已经收入的颜色/字号将会显示为深色。
同样，前端同学可以通过 Styleguidde 右侧代码区查看对应的代码，也可以点击顶代码区顶部的标题切换对应的写法。
👱 标叔说“写太少啦，多写点” —— 所以...
如果大家用的是 PS 不用担心，Zeplin 是支持 PS CC2015 或者以上的版本使用，只是安装有的时候比较麻烦，至少在公司和在家安装都出现了同样的问题。
通常当您启动Zeplin时，Photoshop插件应该自动安装。如果没有，你可以从Zeplin的菜单上面安装它：“Zeplin> Photoshop集成>安装插件...”
如果还不行！！
手动安装如果从菜单安装不起作用，可以手动安装插件。需要安装两件，一个插件和一个面板。在官网上可以下载，下载见文末里的客套话。
现在当你重新启动PS，应该看到菜单中的面板顶部：“窗口>扩展> Zeplin”
Zeplin 的学习成本很低，但是和前端协作使用很非常高效，团队的开发同学都说这个工具太牛了。
🙉🙈 客套话还是要有
送上 Zeplin 官方下载链接: https://www.zeplin.io/
PS 手动安装插件和面板链接： https://support.zeplin.io/photoshop-integration/installing-photoshop-plugin-on-mac
有问题和有趣的事儿可以留言闲扯。天天开心~~
▼热文推荐
Pinterest被墙后，FFFFOUND!也要和我们说再见了！
本文由波普先生编辑/原创，如需转载请回复“转载”并取得授权，否则视为抄袭
在波普先生公众号可回复以下关键词
回复“资源”，免费领取产品、运营、交互、UI设计，地表最强500G福利资源
回复“字体”，获得苹果中文/英文字体，安卓思源黑体/宋体
回复“光效”，获得珍藏Photoshop光效制作插件
回复“壁纸”，获得精选手机壁纸，每天有新惊喜
回复“科学上网”，获得设计师翻墙神器
网友评论
欢迎来看我的文章，多多交流