Zeplin Sketch插件–设计与工程之间的工作流桥梁

本文概述

• 为什么选择Zeplin？
• 使用Sketch和Zeplin：步骤和技巧
• 总结

Zeplin是一个功能强大的协作工具, 可通过为产品团队创建一个连通的空间来弥合设计师与开发人员之间的鸿沟。

为什么选择Zeplin？

设计与开发相遇的地方是任何产品开发难题中至关重要的部分。当设计准备好进入开发阶段(“移交”)时, 工程师需要一种方法来理解它并将其转换为代码。

Zeplin通过从Sketch, Adobe XD, Figma和Photoshop中获取设计并将其导出为可以轻松生成代码段, 样式指南, 规格和资产的格式, 来简化切换过程。

告别” redlining”时代。 Zeplin完全专注于改善产品设计师与开发团队之间的协作, 并且被Airbnb, Dropbox, Pinterest, Microsoft等许多领先的产品团队使用。

使用Zeplin, 无需手动写出尺寸或边距, 键入副本, 导出图标。简直太棒了, 节省了很多时间专注于设计探索。 – Intercom产品设计师Alex Potrivaev

传统设计规范, 也就是诸如Zeplin之类的工具之前的”修订”

在过去的一篇文章中, srcmini设计师Micah Bowers谈到了拥有标准化设计语言系统的重要性, 以便在从事数字产品工作的产品团队的各个职能部门之间进行有效沟通。

通过对设计资产进行版本控制, 创建组件库以及生成生活风格指南, 移植到Zeplin中的项目可以充当产品团队的”单一事实来源”。

基本上, 我们认为Zeplin是与Engineering合作的真实来源。如果不在Zeplin中, 则不是官方的。 – Jason Stoff, 星巴克数字产品高级设计师

Zeplin的局限性

尽管Zeplin具有许多有用的功能, 但并不是完美的。 Zeplin提供免费计划, 但根据该计划, 它仅限于一个项目。为iOS和Android设计时, 将需要两个单独的项目。到那时, 将需要付费计划。

一旦了解了使用Zeplin和Sketch(或上述其他应用程序)的工作流程, 工作流程就变得很容易。但是, Zeplin有一些学习曲线, 需要一些时间和精力。要查看总体概述并了解有关如何使用它的更多信息, 请参见下面的Zeplin演示视频：

使用Sketch和Zeplin：步骤和技巧

1.开始使用Zeplin。

• 如果你还没有Zeplin帐户, 请创建一个。你可以免费注册：https://app.zeplin.io/register
• 下载适用于Mac或Windows的Zeplin桌面应用程序。
• 下载适用于Sketch的Zeplin插件。

2.准备你的草图文件。

• 现在我们已经准备好使用Sketch和Zeplin, 我们将设置Sketch文件以无缝导出到Zeplin。
• 在Sketch中, 使用一致的命名约定来组织资产和图层。如果与其他设计师合作, 请确定适用于团队中每个人的约定。根据这是什么类型的项目(例如, iOS, Android或Web), Zeplin将自动调整资产的命名约定, 使其导出过程只需一步即可。
• 在Sketch中为常见元素和资产创建符号。这将允许你在Zeplin中设置组件。
• 将颜色保存到”文档颜色”调色板中, 并将字体另存为Sketch文件中的”文本样式”。这些将显示在Zeplin生成的样式指南中。

3.使资产在Sketch中可导出。

• 这是非常重要的一步。将资产分组为符号后, 在Sketch文件中打开”符号”页面。
• 单击符号内的组, 例如” ic-menu”(文件夹图标)
• 在突出显示该组的情况下, 在”草图”中”检查器”的右下角找到”使可导出”操作, 然后单击此选项。现在, 群组名称旁边应显示一个切片图标。
• 此步骤将使工程师可以直接从Zeplin导出资产。

4.在Zeplin中创建一个新项目。

• 选择你要构建的项目的类型。请注意, 即使设计相同, 你也应该为iOS和Android创建单独的项目。这是因为Zeplin将根据项目的类型生成不同的代码。
• 选择与你的Sketch画板匹配的项目分辨率(例如1x, 320px)。

5.将草图画板导出到Zeplin。

• 在”草图”中, 突出显示要导出到Zeplin的所有画板。
• 转到插件> Zeplin>导出选定的…或按键盘上的⌃⌘E。
• 接下来, 我们将从”草图”中导出”符号”。在”草图”中打开”符号”页面, 然后突出显示所有画板。出口到Zeplin。

6.在Zeplin中组织项目。

• 现在, 你的Sketch画板位于Zeplin中, 让我们将插图组织成几个部分。
• 在项目的”仪表板”视图中, 选择类似的屏幕以将其分组。突出显示后, 右键单击并选择”来自选择的新部分”。重复此操作, 直到你的Zeplin文件正确组织为止。

7.利用Zeplin中的组件。

Zeplin最有用的功能之一就是能够将资产组织到组件库中。当项目的设计由不同的团队成员为多个平台开发时, 这一点很重要。正如Airbnb设计师Karri Saarinen在构建视觉语言中概述的那样, 设计统一至关重要。

统一的设计系统对于更好, 更快地构建至关重要。更好, 因为凝聚力的体验更易于为我们的用户所理解, 而更快则因为它为我们提供了一种通用的语言。

• 选择Zeplin顶部中心(“仪表板”旁边)的”样式指南”选项卡。
• 进入”样式指南”标签后, 选择第二个标签”组件”。在这里, 你将看到从Sketch导出的所有符号。
• 将它们组织为”图标”, “图像”, “公共元素”等部分。你可以在Zeplin中了解有关项目样式指南的”组件”选项卡的更多信息。

8.从Zeplin导出样式指南。

• 从Zeplin项目的”仪表板”视图中, 找到应用程序右上角的”共享”按钮。
• 选择”共享”, 然后在菜单底部找到”场景”。选择”启用”, 然后选择”打开”。这将为你的项目生成一个动态样式指南。与你的团队共享URL。

9.在Zeplin中注释你的设计。

• 使用Zeplin可以轻松地在设计中添加注释。从屏幕的详细视图中, 选择”添加注释”图标, 然后将注释固定到组件上。
• 你可以通过按住Cmd(对于Windows和Linux用户为Ctrl)并单击屏幕上的任意位置来添加注释。
• 你甚至可以使用” @”提及其他队友, 他们会收到通知。

10.协作, 共享和使用版本控制。

• 现在, 你的Zeplin文件已准备好与你的团队共享, 通过用户的电子邮件地址邀请用户或向他们发送项目URL。
• 通过从Sketch导出画板, 继续更新你的Zeplin文件。
• Zeplin将自动对文件进行版本控制, 你可以使用此动态”事实来源”继续与团队成员进行协作。

总结

在设计和开发团队之间创建动态, 组织和协作的工作流程对于构建出色的数字产品至关重要。拥有像Zeplin这样的工作流桥, 设计师可以通过完整而精确的规格来注释屏幕并简化通常令人恐惧的切换阶段。

从一个中央源动态更新资产的灵活性(例如Sketch中的符号导出到Zeplin中的组件)带来了极大的灵活性。然后, 工程师可以轻松地将资产导出到本机代码中, 从而节省时间和繁琐的工作。

尽管周到的UX和美观的外观设计是成功产品的根源, 但将其交付用户的过程至关重要。

希望提高效率并依靠单一”真理来源”的设计人员应考虑上述”从草图到Zeplin的工作流程”。这两个设计工具之间强大的软件关系所具有的强大功能将帮助设计人员和开发团队更轻松, 更满意地到达终点。

• • •

在srcmini设计博客上进一步阅读：

• Adobe XD与Sketch –哪种UX工具适合你？
• 如何构建有效的设计框架(包括免费的Sketch UI框架)
• 关于素描中的版式可能不知道的事情
• 熟悉Sketch插件开发
• 立即使用Sketch和Looper创建弯曲的插图