Zeplin Sketch 插件——设计和工程之间的工作流程桥梁

Zeplin 是一个强大的协作工具，它通过为产品团队创建连接空间来弥合设计师和开发人员之间的差距。

为什么选择齐柏林？

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

Zeplin 通过从 Sketch、Adobe XD、Figma 和 Photoshop 中获取设计并将它们导出为可以轻松生成代码片段、样式指南、规范和资产的格式来促进移交。

告别“红线”的日子。 Zeplin 纯粹专注于改善产品设计师和开发团队之间的协作，并被 Airbnb、Dropbox、Pinterest、Microsoft 和许多其他公司的领先产品团队使用。

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

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

通过对设计资产进行版本控制、创建组件库和生成生活方式指南，移植到 Zeplin 中的项目可以作为产品团队的“单一事实来源”。

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

齐柏林限制

虽然 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 文件。

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

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

• 这是非常重要的一步。 将资产分组为符号后，打开 Sketch 文件中的符号页面。
• 单击符号内的组，例如“ic-menu”（文件夹图标）
• 突出显示该组，在 Sketch 中的“Inspector”的右下方找到“Make Exportable”操作，然后单击此选项。 切片图标现在应该出现在您的组名称旁边。
• 此步骤将允许工程师直接从 Zeplin 导出资产。

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

• 选择您正在构建的项目类型。 请注意，即使设计相同，iOS 和 Android 也应该有单独的项目。 这是因为 Zeplin 会根据项目的类型生成不同的代码。
• 选择与您的 Sketch 画板匹配的项目分辨率（例如，1x、320px）。

5. 将 Sketch 画板导出到 Zeplin。

• 在 Sketch 中，突出显示您想要导出到 Zeplin 的所有画板。
• 转到Plugins > Zeplin > Export Selected...或按键盘上的⌃⌘E 。
• 接下来，我们将从 Sketch 中导出符号。 在 Sketch 中打开 Symbols 页面并突出显示所有画板。 导出到 Zeplin。

6. 在 Zeplin 中组织项目。

• 现在您的 Sketch 画板已在 Zeplin 中，让我们将图稿组织成多个部分。
• 从项目的仪表板视图中，选择相似的屏幕以进行分类。 突出显示后，右键单击并选择“从选择中新建部分”。 重复此操作，直到您的 Zeplin 文件组织正确。

7. 利用 Zeplin 中的组件。

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

统一的设计系统对于更好更快地构建是必不可少的； 更好，因为我们的用户更容易理解有凝聚力的体验，更快，因为它为我们提供了一种通用的语言。

• 选择 Zeplin 顶部中心的“Styleguide”选项卡（“Dashboard”旁边）。
• 进入“样式指南”选项卡后，选择辅助选项卡“组件”。 在这里，您将看到从 Sketch 导出的所有符号。
• 将它们组织成“图标”、“图像”、“公共元素”等部分。您可以在此处了解有关 Zeplin 中项目样式指南的“组件”选项卡的更多信息。

8. 从 Zeplin 导出样式指南。

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

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

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

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

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

结论

在设计和开发团队之间创建一个动态、有组织和协作的工作流程对于构建出色的数字产品至关重要。 拥有像 Zeplin 这样的工作流桥使设计师能够对屏幕进行注释，并通过完整和精确的规范简化通常令人恐惧的移交阶段。

从一个中央源动态更新资产的灵活性，例如导出到 Zeplin 中的组件的 Sketch 中的符号，创造了巨大的灵活性。 然后，工程师可以轻松地将资产导出为本机代码，从而节省时间和单调乏味。

虽然深思熟虑的用户体验和美观的设计是成功产品的根源，但将设计交到用户手中的过程至关重要。

想要高效并依赖单一“真实来源”的设计师应该考虑上面概述的 Sketch 到 Zeplin 工作流程。 这两种设计工具之间强大的软件关系背后的力量将帮助设计人员和开发团队更轻松、更满意地到达终点。

• • •

进一步阅读 Toptal 设计博客：

• Adobe XD 与 Sketch – 哪种 UX 工具适合您？
• 如何构建一个有效的设计框架（包括一个免费的 Sketch UI 框架）
• 关于 Sketch 中的排版你可能不知道的事情
• 熟悉 Sketch 插件开发
• 立即使用 Sketch 和 Looper 创建令人费解的插图