Zeplin for Mac是非常热门且高效的mac前端设计工具，主要面向的用户是设计师和前端开发工程师，相当于在他们两个之间建立起了一座桥梁，其核心的功能是标注、style guide、备注文档，以及团队协作。小面就让小编带大家一起了解一下~
Zeplin for Mac使用说明
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，可以承载字体、颜色。
图片界面，当鼠标不悬浮在某个元素上时，可以查看整个界面的效果图。右侧可以看到所有使用的颜色列表。当需要查看标注时，点击对应的元素即可：
这样的话，设计师和工程师就可以无缝衔接了。如果喜欢小编的文章欢迎关注，第一时间为您带来最新、最高效的分享！