利器分享-Zeplin

2016/5/25 posted in  Tools comments

作为一个产品汪或者设计师或者程序猿,你是否遇到过下面这些问题:

  • 程序猿拿到设计师给出的设计图,只看到花花绿绿的一片,但是不知道开发时各个元素的间距到底是多少?该用啥字体?该用多大字号?这个文字是灰色还是黑色?具体的色值是多少?是半透明还是80%透明度?
  • 为了让程序猿看得懂设计图,设计师辛苦的为每个图做出精细的标注,花费的时间比设计图本身还长?
  • 产品经理针对设计图需要沟通的地方总是沟通不到位、理解不一致?花费了很多时间,最后还是没改对地方?
  • 设计师update了设计图,程序猿拿到设计图时感到顿时懵逼?不知道哪张图改了?不知道哪些地方改了?到底要改成啥样?
  • 对于设计图通用的一些样式、形状,程序猿每个都需要机械的去写css代码?
  • 设计图中某个元素需要切图时,@1x、@2x、@3x傻傻分不清楚?

So,安利大家一个利器:Zeplin,上面的问题解决起来so easy,程序猿、产品汪、设计师又可以在一起愉快的玩耍了。

利用Zeplin可以基本实现:

  • 快速直接从Sketch文件中导出所有图层到Zeplin中,无需修改,无缝衔接;

  • 查看所有元素的长度、宽度、边距、字体、字号、字体颜色等,甚至可以生成CSS代码,无需再刻意生成标注图;

  • 给具体某个元素添加注释说明NOTE,例如某次更改的地方的注释、希望让开发同学特别注意的地方;

  • 可邀请项目成员加入协作,所有成员都能同步看到所有更改、NOTE;

  • 可以自由选择导出想导出的元素、切图;

  • 可以定义、查看整个产品的颜色样式和文字样式。

作为一个细分领域的团队协作工具,Zeplin确实是抓住了设计者和开发者的痛点。对于整体使用Mac的团队,如果可以根据自己团队的实际情况加以利用,一定会提升不少效率。

目前Zeplin仅支持与Slack连接,提供项目或页面更新提醒,如果之后能够支持更多服务(如Trello、Teambition、Worktile)就更好了。还有个小细节,目前在项目中添加的NOTE不支持导出、归档,所以在项目结束后,如果有重要的NOTE就会丢失了。这个地方如果能够稍加完善就更好了。

大家可以到Zeplin的官网了解它的更多细节。这个工具免费版只能创建一个项目,若需创建更多项目需要付费订阅。最便宜的15刀/月可以创建3个项目,不需要项目中每个成员都付费,只需一人订阅,即可全体受益。