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

为什么赞贝林?

任何产品开发难题的关键部分都是设计与开发的结合点. When a 设计 is ready to move into the development phase (the “handoff”), engineers need a way to understand it and translate it into code.

赞贝林 facilitates the handoff by taking 设计s from 草图, Adobe XD, Figma, 并将它们导出为可以轻松生成代码片段的格式, 风格指南, 规格, 和资产.

告别“划红线”的日子吧.” 赞贝林 is focused purely on improving the collaboration between 产品设计师 and development teams and is used by leading product teams at Airbnb, Dropbox, Pinterest, 微软, 还有很多其他的.

有了赞贝林，就不需要手动写大小或边距，输入副本，导出图标. It’s simply awesome and saves lots of time to focus on 设计 explorations. ——Alex Potrivaev，产品设计师 @Intercom

In one of our past articles, Toptal 设计er 弥迦书鲍尔斯 talked about the importance of having a standardized 设计语言系统 为了在数字产品团队的各个职能部门之间进行有效的沟通.

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

我们基本上认为赞贝林是我们与工程部合作的真实来源. 如果不在齐普林，那就不算正式. – Jason Stoff, Senior 设计er, Digital 产品s @Starbucks

赞贝林的局限性

While 赞贝林 has many helpful features, it isn’t perfect. 赞贝林 offers a free plan, but under that plan, it’s limited to one project. When 设计ing for both iOS and 安卓, two separate projects will be required. 在这一点，a 支付计划 是需要的.

一旦了解了使用赞贝林和草图(或上面提到的其他应用程序)的流程, 工作流程变得简单. 然而，赞贝林有一点学习曲线，需要一些时间和精力. To see a general overview and learn more about how to use it, see the 齐普林演示视频 下图:

Working with 草图 and 赞贝林: Steps and Tips

1. 从赞贝林开始.

• Create a 赞贝林 account if you don’t have one already. 你可以免费注册: http://app.Zeplin.io/register
• 下载赞贝林 桌面应用程序 适用于Mac或Windows.
• 下载赞贝林 插件 对素描.

2. 准备草图文件.

• Now that we have 草图 and 赞贝林 ready to go, we’ll set up our 草图 file for a seamless export to 赞贝林.
• In 草图, organize your assets and layers using consistent naming conventions. 如果与他人合作 设计师, determine conventions that work for everyone on your team. Depending on what type of project this is (e.g., iOS, 安卓, 或网络), 赞贝林 will automatically adjust the assets’ naming convention, 使导出它们成为一个一步的过程.
• Create symbols for common elements 和资产 within 草图. This will allow you to set up components in 赞贝林.
• 将颜色保存到“文档颜色”调色板中，并将字体保存为草图文件中的“文本样式”. These will show up in your 赞贝林-generated style guide.

3. 在草图中导出资产.

• 这是非常重要的一步. 一旦你的资产被分组成符号，在你的草图文件中打开符号页面.
• Click on a group within a symbol, such as “ic-menu” (the folder icon)
• 突出显示小组, 在草图中“Inspector”的右下方找到“Make Exportable”操作，然后单击该选项. A slice icon should now appear next to your group’s name.
• This step will allow engineers to export assets directly from 赞贝林.

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

• Select the type of project you are building. 请注意，即使设计相同，你也应该针对iOS和安卓开发不同的项目. 这是因为赞贝林将根据项目的类型生成不同的代码.
• Select the project resolution which matches your 草图 artboards (e.g.， 1x, 320px).

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

• From 草图, highlight all artboards that you would like to export to 赞贝林.
• 去 Plugins > 赞贝林 > Export Selected… 或按 ⌃⌘E 在键盘上.
• 接下来，我们将从草图导出符号. Open the Symbols page in 草图 and highlight all artboards. 出口到齐普林.

6. 在赞贝林组织项目.

• 现在你的素描画板是在赞贝林中，让我们组织艺术作品到部分.
• 从项目的Dashboard视图中，选择类似的屏幕分组到类别中. Once highlighted, right click and select “New Section from Selection.” Repeat this until your 赞贝林 file is properly 有组织的.

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

也许赞贝林最有用的特性之一就是能够将资产组织到组件库中. 当一个项目的设计是由不同的团队成员针对多个平台开发时，这一点非常重要. 设计 unification is essential, as Airbnb 设计er Karri Saarinen outlines in 构建视觉语言:

A unified 设计 system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.

• Select the “Styleguide” tab at the top center of 赞贝林 (next to “Dashboard”).
• Once in the “Styleguide” tab, select the secondary tab, “Components.” Here, you will see all of your symbols exported from 草图.
• Organize these into sections such as “Icons,” “Images,” “Common Elements,” etc. 你可以在赞贝林中了解更多关于项目风格指南的Components选项卡 在这里.

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

• From the Dashboard view of your 赞贝林 project, locate the “分享” button in the top right corner of the application.
• Select “分享,” then find “Scene” at the bottom of the menu. 选择“启用”，然后选择“打开”.” This will generate a dynamic style guide for your project. 与您的团队共享URL.

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

• 添加注释的设计是很容易与赞贝林. 从屏幕的详细视图中，选择添加注释图标并将注释固定到组件上.
• 长按可以添加注释 Cmd (Ctrl for Windows and Linux users) and clicking anyw在这里 on the screen.
• 你甚至可以用“@”来提到其他队友，他们就会收到通知.

10. Collaborate, share, and use version control.

• Now that your 赞贝林 file is ready to share with your team, 邀请用户通过他们的电子邮件地址, 或者把项目网址发给他们.
• Continue to update your 赞贝林 file by exporting artboards from 草图.
• 赞贝林将自动控制你的文件的版本，你可以继续与团队成员合作，使用这个动态的“真相来源”.”

结论

创建动态, 有组织的, and collaborative workflow between 设计 and development teams is essential for building great digital products. 有了像赞贝林这样的工作流桥梁，设计人员就可以对屏幕进行注释，并通过完整而精确的规格说明简化了通常令人恐惧的交接阶段.

The flexibility to update assets dynamically from one central source, like a symbol in 草图 exported to a component in 赞贝林, 创造了极大的灵活性. 然后，工程师可以轻松地将资产导出为本机代码，从而节省时间和繁琐.

而周到的用户体验和美观的设计是成功产品的根源, the process of getting that 设计 into the hands of users is critical.

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