Sketch和Zeplin:帮助设计师和开发人员协作
设计师和开发人员之间的协作程度对于项目的成功至关重要,并且它是衡量一个团队成功的标准。尽管在同一个办公场所工作很常见,但通过网络来协同办公也是可以的。在本文中,我们将看看如何将Zeplin与Sketch结合起来使用。
这个软件的好处在于它是专门用于界面和图标设计的;从具有特定尺寸的网页,移动设备和图标到具有帮助加强设计流程的功能的Sketchboard,简直是设计师必备。以下是一些示例,可以帮助你了解使用Sketch可以做些什么:
UI图稿
使用Inspector查找有关特定对象的所有详细信息(大小,位置,颜色,字体洋式,不透明度等等)。
使用“ 导出”功能可将Artboard或单个对象导出为特定的文件格式(PNG,JPG,PDF等)。
我们不应该要求开发人员精通设计师用于仿真产品的工具。也就是说,我们也不应该要求设计师摆脱他们最擅长的事情:设计! 每次交付设计时构建“规范文档”远非“敏捷”,并且可能意味着在交付设计和需要迭代之间浪费大量时间。
Zeplin
这是Zeplin大显身手的时候。Zeplin是面向UI设计师和前端开发人员的协作工具。它超越了设计工作流程,并帮助团队完成设计交付。
它允许设计师直接从Sketch上传他们的线框或视觉设计,并将它们添加到Zeplin的项目活页夹中。这可能是最好的工具了? 注释会自动添加到设计中(尺寸,颜色,边距,甚至某些元素的CSS建议),这将为你提供整个团队的在线存储库。
“当Zeplin作为一个单一来源时,它可以很好地协同工作。
此外,由于它可以作为独立应用程序以及Web应用程序提供相应素材,因此你可以在任何地方访问它。可以轻松检查设计和空间,尺寸,颜色等。“ - Daniel Setas Pontes,Javascript开发人员@NOW TV,Sky
Zeplin在Sketch中作为一份插件,因此上传设计是一项简单活儿。
以下是如何开始一个项目:
下载Zeplin并安装。开发人员不需要运行OS X,因为他们只需访问基于Web的工具即可访问内容。
创建项目。
选择你设计的平台。
标出项目名称。
在Sketch中,选择单个对象并将它们导出。这将使你的开发团队能够在以后从Zeplin内导出每个元素。这是如何使用的呢:
接下来,选择要上传到Zeplin的画板。
转到插件> Zeplin> 导出选定的画板。
选择你要上传设计元素,然后点击导入。
使用Zeplin一起工作
一旦进入Zeplin,你可以在项目之间导航并轻松探索其中的所有组件。查明某些元素的规格也很直观; 选择你想要的元素,然后所有的相关信息将出现在右侧栏中。
开发者:一旦你打开了基于网络的工具并登录,以下是它的工作原理:
选择你想要检查的对象。
查看右侧栏中的详细信息,如字体洋式,颜色等(信息将根据妳选择的对象显示)。
复制CSS。
如果设计团队在将设计导入Zeplin时允许选择素材元素,开发团队应该能够导出个人资产。资产将以SVG格式和三种不同的PNG尺寸下载。
在这里,你可以将注释添加到设计中。
在这里,你可以复制和分享项目链接,甚至可以与团队的Slack频道集成以获取通知或邀请团队成员进行协作!
为什么你的团队应该采取协同办公
使用Zeplin协同办公有很多优点,下面是一些例子:
你将避免构建规格文文件; 这既不敏捷也不容易更新。
为开发人员和其他设计人员创建具有所有相关信息的实时注释设计。
你可以创建可导出的设计,因此开发人员可以快速访问单个资产。
创建你想要的项目,然后只需点击几下即可上传和更新。
创建帮助设计团队保持一致的风格指南。
利用Slack,每次有更新时立即通知你的团队。
使用Zeplin来进行Sketch的协同办公是设计师与开发人员合作的绝佳方式。