Sketch和Zeplin：帮助设计师和开发人员协作

Sketch和Zeplin：帮助设计师和开发人员协作

设计师和开发人员之间的协作程度对于项目的成功至关重要，并且它是衡量一个团队成功的标准。尽管在同一个办公场所工作很常见，但通过网络来协同办公也是可以的。在本文中，我们将看看如何将Zeplin与Sketch结合起来使用。

Sketch的快速入门

这个软件的好处在于它是专门用于界面和图标设计的;从具有特定尺寸的网页，移动设备和图标到具有帮助加强设计流程的功能的Sketchboard，简直是设计师必备。以下是一些示例，可以帮助你了解使用Sketch可以做些什么：

1. UI图稿

2. 使用Inspector查找有关特定对象的所有详细信息（大小，位置，颜色，字体洋式，不透明度等等）。

3. 使用“ 导出”功能可将Artboard或单个对象导出为特定的文件格式（PNG，JPG，PDF等）。

“我是一名开发者，我从未使用过Sketch！”

我们不应该要求开发人员精通设计师用于仿真产品的工具。也就是说，我们也不应该要求设计师摆脱他们最擅长的事情：设计！  每次交付设计时构建“规范文档”远非“敏捷”，并且可能意味着在交付设计和需要迭代之间浪费大量时间。

Zeplin

这是Zeplin大显身手的时候。Zeplin是面向UI设计师和前端开发人员的协作工具。它超越了设计工作流程，并帮助团队完成设计交付。

它允许设计师直接从Sketch上传他们的线框或视觉设计，并将它们添加到Zeplin的项目活页夹中。这可能是最好的工具了？ 注释会自动添加到设计中（尺寸，颜色，边距，甚至某些元素的CSS建议），这将为你提供整个团队的在线存储库。

“当Zeplin作为一个单一来源时，它可以很好地协同工作。

此外，由于它可以作为独立应用程序以及Web应用程序提供相应素材，因此你可以在任何地方访问它。可以轻松检查设计和空间，尺寸，颜色等。“ - Daniel Setas Pontes，Javascript开发人员@NOW TV，Sky

将设计稿从Sketch导出到Zeplin

Zeplin在Sketch中作为一份插件，因此上传设计是一项简单活儿。

以下是如何开始一个项目：

1. 下载Zeplin并安装。开发人员不需要运行OS X，因为他们只需访问基于Web的工具即可访问内容。

2. 创建项目。

3. 选择你设计的平台。

4. 标出项目名称。

在Sketch中，选择单个对象并将它们导出。这将使你的开发团队能够在以后从Zeplin内导出每个元素。这是如何使用的呢：

1. 接下来，选择要上传到Zeplin的画板。

2. 转到插件> Zeplin> 导出选定的画板。

3. 选择你要上传设计元素，然后点击导入。

使用Zeplin一起工作

一旦进入Zeplin，你可以在项目之间导航并轻松探索其中的所有组件。查明某些元素的规格也很直观; 选择你想要的元素，然后所有的相关信息将出现在右侧栏中。

开发者：一旦你打开了基于网络的工具并登录，以下是它的工作原理：

1. 选择你想要检查的对象。

2. 查看右侧栏中的详细信息，如字体洋式，颜色等（信息将根据妳选择的对象显示）。

3. 复制CSS。

如果设计团队在将设计导入Zeplin时允许选择素材元素，开发团队应该能够导出个人资产。资产将以SVG格式和三种不同的PNG尺寸下载。

1. 在这里，你可以将注释添加到设计中。

2. 在这里，你可以复制和分享项目链接，甚至可以与团队的Slack频道集成以获取通知或邀请团队成员进行协作！

为什么你的团队应该采取协同办公

使用Zeplin协同办公有很多优点，下面是一些例子：

• 你将避免构建规格文文件; 这既不敏捷也不容易更新。

• 为开发人员和其他设计人员创建具有所有相关信息的实时注释设计。

• 你可以创建可导出的设计，因此开发人员可以快速访问单个资产。

• 创建你想要的项目，然后只需点击几下即可上传和更新。

• 创建帮助设计团队保持一致的风格指南。

• 利用Slack，每次有更新时立即通知你的团队。

尝试一下！

使用Zeplin来进行Sketch的协同办公是设计师与开发人员合作的绝佳方式。