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

为什么赞贝林?

任何产品开发难题的关键部分都是设计与开发的结合点. 当设计准备好进入开发阶段时(“交接”), 工程师需要一种方法来理解它并将其转化为代码.

赞贝林 通过从草图中获取设计来简化交接, Adobe XD, Figma, 并将它们导出为可以轻松生成代码片段的格式, 风格指南, 规格, 和资产.

告别“划红线”的日子吧.“赞贝林专注于改善两家公司之间的合作 产品设计师 和开发团队，Airbnb的主要产品团队也在使用, Dropbox, Pinterest, 微软, 还有很多其他的.

有了赞贝林，就不需要手动写大小或边距，输入副本，导出图标. 这实在是太棒了，节省了大量的时间来专注于设计探索. ——Alex Potrivaev，产品设计师 @Intercom

在我们过去的一篇文章中，Toptal 设计er 弥迦书鲍尔斯 谈到了标准化的重要性 设计语言系统 为了在数字产品团队的各个职能部门之间进行有效的沟通.

通过对设计资产进行版本控制, 创建组件库, 并生成生活方式指南, 移植到赞贝林的项目可以作为产品团队的“唯一真实来源”.

我们基本上认为赞贝林是我们与工程部合作的真实来源. 如果不在齐普林，那就不算正式. ——Jason Stoff(数字产品高级设计师 @Starbucks

赞贝林的局限性

虽然赞贝林有很多有用的功能，但它并不完美. 赞贝林提供免费计划，但根据该计划，它仅限于一个项目. 在为iOS和安卓设计时，需要两个独立的项目. 在这一点，a 支付计划 是需要的.

一旦了解了使用赞贝林和草图(或上面提到的其他应用程序)的流程, 工作流程变得简单. 然而，赞贝林有一点学习曲线，需要一些时间和精力. 要查看总体概述并了解有关如何使用它的更多信息，请参阅 齐普林演示视频 下图:

与草图和齐普林工作:步骤和技巧

1. 从赞贝林开始.

• 如果你还没有赞贝林账户，创建一个. 你可以免费注册: http://app.Zeplin.io/register
• 下载赞贝林 桌面应用程序 适用于Mac或Windows.
• 下载赞贝林 插件 对素描.

2. 准备草图文件.

• 现在斯凯奇和齐普林都准备好了, 我们将设置我们的草图文件，以便无缝导出到赞贝林.
• 在草图中，使用一致的命名约定组织您的资产和图层. 如果与他人合作 设计师确定适用于团队中每个人的惯例. 这取决于项目的类型(e).g., iOS, 安卓, 或网络), 赞贝林将自动调整资产的命名约定, 使导出它们成为一个一步的过程.
• 在草图中为常见元素和资产创建符号. 这将允许您在赞贝林中设置组件.
• 将颜色保存到“文档颜色”调色板中，并将字体保存为草图文件中的“文本样式”. 这些将显示在您的赞贝林生成的样式指南中.

3. 在草图中导出资产.

• 这是非常重要的一步. 一旦你的资产被分组成符号，在你的草图文件中打开符号页面.
• 单击符号内的组，例如“ic-menu”(文件夹图标)
• 突出显示小组, 在草图中“Inspector”的右下方找到“Make Exportable”操作，然后单击该选项. 切片图标现在应该出现在你的组名旁边.
• 这一步将允许工程师直接从赞贝林导出资产.

4. 在赞贝林中创建一个新项目.

• 选择要构建的项目类型. 请注意，即使设计相同，你也应该针对iOS和安卓开发不同的项目. 这是因为赞贝林将根据项目的类型生成不同的代码.
• 选择与草图画板匹配的项目分辨率(例如.g.， 1x, 320px).

5. 导出草图画板到赞贝林.

• 从草图中突出显示您想要导出到赞贝林的所有画板.
• 去 Plugins > 赞贝林 > Export Selected… 或按 ⌃⌘E 在键盘上.
• 接下来，我们将从草图导出符号. 在草图中打开符号页面并突出显示所有画板. 出口到齐普林.

6. 在赞贝林组织项目.

• 现在你的素描画板是在赞贝林中，让我们组织艺术作品到部分.
• 从项目的Dashboard视图中，选择类似的屏幕分组到类别中. 高亮显示后，右键单击并从选择中选择“新建部分”.重复这个步骤，直到你的赞贝林文件被整理好.

7. 利用赞贝林中的组件.

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

A unified 设计 system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, 更快是因为它给了我们一种共同的语言.

• 选择赞贝林顶部中心的“Styleguide”选项卡(在“Dashboard”旁边).
• 在“Styleguide”选项卡中，选择第二个选项卡“Components”.在这里，你会看到所有的符号从草图导出.
• 将这些内容分成“图标”、“图像”、“公共元素”等部分. 你可以在赞贝林中了解更多关于项目风格指南的Components选项卡 在这里.

8. 从赞贝林导出样式指南.

• 从您的赞贝林项目的Dashboard视图中, 在应用程序的右上角找到“分享”按钮.
• 选择“分享”，然后在菜单底部找到“场景”. 选择“启用”，然后选择“打开”.这将为你的项目生成一个动态的风格指南. 与您的团队共享URL.

9. 在赞贝林中注释您的设计.

• 添加注释的设计是很容易与赞贝林. 从屏幕的详细视图中，选择添加注释图标并将注释固定到组件上.
• 长按可以添加注释 Cmd (Ctrl (适用于Windows和Linux用户)，并点击屏幕上的任何地方.
• 你甚至可以用“@”来提到其他队友，他们就会收到通知.

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

• 现在，您的赞贝林文件已经准备好与您的团队共享, 邀请用户通过他们的电子邮件地址, 或者把项目网址发给他们.
• 通过从草图导出画板，继续更新您的赞贝林文件.
• 赞贝林将自动控制你的文件的版本，你可以继续与团队成员合作，使用这个动态的“真相来源”.”

结论

之间创建动态的、有组织的和协作的工作流 设计 开发团队对于打造伟大的数字产品至关重要. 有了像赞贝林这样的工作流桥梁，设计人员就可以对屏幕进行注释，并通过完整而精确的规格说明简化了通常令人恐惧的交接阶段.

从一个中心源动态更新资产的灵活性, 比如草图中的符号导出到赞贝林中的组件, 创造了极大的灵活性. 然后，工程师可以轻松地将资产导出为本机代码，从而节省时间和繁琐.

而周到的用户体验和美观的设计是成功产品的根源, 将设计交到用户手中的过程至关重要.

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