Zeplin for mac

Zeplin for mac是一款为设计师和工程师提供产品原稿交接与沟通的高效平台，用户可对产品进行标注、Style Guide 注释，还提供了简单的团队协同工作功能，通过插件，设计师可将Sketch的Artboard单独或批量导入Zeplin的Project里供开发者做业务功能与前端交互的实现。

软件介绍：

Zeplin面向的用户是设计师和前端（Web、Mobile）工程师，相当于做的是中间桥梁这一块，核心功能为标注、Style Guide、备注文档与简单的团队协作。这块软件由四名在伊斯坦布尔的开发者制作，目前仅支持 Sketch，但是 PS 也已经出现在官网，应该也快了。

在使用 Zeplin 之前，最早是使用马克曼进行标注的，也就是直接在输出效果图上量尺寸；使用 Sketch 插件 Measure 之后，可以在画板中生成尺寸标注信息，导出标注图提供给开发同学使用。无论是马克曼还是 Measure，最后的交付物是一致的，大概如下图所示：

这样的标注图有个问题，就是已经破坏了原本的视觉效果图，标注的信息一定会对原设计稿形成遮挡，因此一般效果图和标注图要分开给，开发也经常需要在两个图之间切换，图片管理不太方便。如果你的设计稿同时要适配多个尺寸，还要要输出多份标注图，交付给多个开发同学。更重要的是，如果对页面进行了迭代修改，就需要重新标注、重新输出、重新交付，即开发与设计之间的联结是断的，每次都要人工把这个缺口接上。

另外，如果时间有允许，设计师还需要制作 Style Guide，一方面是为了方便切图，另一方面是为后期迭代做好准备。Style Guide 大概要包含的是字体信息、色彩信息、icon 样例、常用间距等内容，如果自己制作的话，大概类似于是这样：

Zeplin 主要就是为了解决上述问题的，使用它之后，可以在 Sketch 中一键导入 Artboard，在设计师做好图层管理（命名、分组）的前提下，它可以自动生成标注信息（并且可以标注为 pt 或 dp），允许添加注释形成类 prd 文档，并且自动提取 Style Guide，同时还允许添加项目组成员，提供给团队组查看项目。

这是项目组管理界面，还有关于项目的简单统计，比如多少页屏幕、多少色彩和多少注释等。

Guideline，可以承载字体、颜色。

图片界面，当鼠标不悬浮在某个元素上时，可以查看整个界面的效果图。右侧可以看到所有使用的颜色列表。当需要查看标注时，点击对应的元素即可：

这样的话，设计师和工程师就可以无缝衔接了，团队的开发同学都说这个工具太牛了：）

缺点的话，目前有一些体验上的小问题。比如图片是存储在境外服务器上的，，一开始就是因为被墙的原因多次登录不上。其次是产品本身还是 Beta 版，处于邀请码阶段，所以肯定会有一些 bug 存在，像全屏之后右上角没有常用的放大缩小关闭按钮，还有 Sketch 插件一键导入快捷键经常失败等。

使用方法：

基础使用介绍

Zeplin 对于专业人员来说很好上手，创建一个 Project，你可以看到软件支持 Android、iOS、Web 三种工作环境，另外开发者还提供可实验性质的 Mac OS X 软件开发环境。

此时到 Sketch 里找到 Menubar – Plugins 目录，如果你安装了 Zeplin 专为 Sketch 开发的插件，可以直接在插件目录里选择“Export Selected Artboards”将文件导入 Zeplin，这个速度很快。

标注与Style Guide

作为项目人员，你可以随时通过软件和 Web 版进入 Project 对原稿进行标注（添加 Note，与对方就产品进行沟通），设计师可以制作 Style Guide，包括字体样式、色彩构成、Icon 样例、常用间距等内容。

高效的协同工作机制

作为一款项目组协同工作软件，Zeplin 可以让团队成员一共参与整个原稿的交流工作，项目创建者只需输入其他同事的邮箱或 Zeplin 账户名即可发出邀请。而如果当前工作环境不是 Mac，你也仍然能通过 Web App 参与工作。