Zeplin is a powerful collaboration tool that bridges the gap between designers and developers by creating a connected space for product teams.

Why Zeplin?

A crucial piece of any product development puzzle is the place where design meets development. 当设计准备好进入开发阶段时(“交接”), 工程师需要一种方法来理解它并将其转化为代码.

Zeplin 通过从Sketch中获取设计来简化交接, Adobe XD, Figma, and Photoshop and exporting them into a format that can easily generate code snippets, style guides, specs, and assets.

Say goodbye to the days of “redlining.“Zeplin专注于改善两家公司之间的合作 product designers 和开发团队，Airbnb的主要产品团队也在使用, Dropbox, Pinterest, Microsoft, and many others.

With Zeplin there is no need to manually write out sizes or margins, type the copy, export icons. 这实在是太棒了，节省了大量的时间来专注于设计探索. – Alex Potrivaev, Product Designer @Intercom

在我们过去的一篇文章中，Toptal Designer Micah Bowers 谈到了标准化的重要性 design language system in order to communicate efficiently across various functions of product teams working on digital products.

By versioning design assets, creating component libraries, and generating living style guides, a project ported into Zeplin can serve as the “single source of truth” for product teams.

We basically consider Zeplin to be our source of truth for collaborating with Engineering. If it’s not in Zeplin, it’s not official. ——Jason Stoff(数字产品高级设计师 @Starbucks

Zeplin Limitations

虽然Zeplin有很多有用的功能，但它并不完美. Zeplin提供免费计划，但根据该计划，它仅限于一个项目. 在为iOS和Android设计时，需要两个独立的项目. At that point, a paid plan would be needed.

Once the flow of working with Zeplin and Sketch (or the other apps mentioned above) is understood, the workflow becomes easy. However, Zeplin has a bit of a learning curve that requires some time and attention. 要查看总体概述并了解有关如何使用它的更多信息，请参阅 Zeplin demo video below:

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

1. Get started with Zeplin.

• 如果你还没有Zeplin账户，创建一个. You can sign up for free: http://app.zeplin.io/register
• Download the Zeplin desktop app for Mac or Windows.
• Download the Zeplin plugin for Sketch.

2. Prepare your Sketch file.

• 现在斯凯奇和齐普林都准备好了, 我们将设置我们的草图文件，以便无缝导出到Zeplin.
• 在Sketch中，使用一致的命名约定组织您的资产和图层. If collaborating with other designers确定适用于团队中每个人的惯例. 这取决于项目的类型(e).g., iOS, Android, or web), Zeplin将自动调整资产的命名约定, making exporting them a one-step process.
• 在Sketch中为常见元素和资产创建符号. 这将允许您在Zeplin中设置组件.
• Save colors into your “Document Colors” palette and fonts as “Text Styles” in your Sketch file. 这些将显示在您的zeplin生成的样式指南中.

3. Make assets exportable in Sketch.

• This is a very important step. Once your assets are grouped into symbols, open the Symbols page in your Sketch file.
• 单击符号内的组，例如“ic-menu”(文件夹图标)
• With the group highlighted, locate the action “Make Exportable” on the lower right-hand side of your “Inspector” in Sketch and click on this option. 切片图标现在应该出现在你的组名旁边.
• 这一步将允许工程师直接从Zeplin导出资产.

4. Create a new project in Zeplin.

• 选择要构建的项目类型. Note that you should have separate projects for iOS and Android, even if the designs are identical. This is because Zeplin will generate different code based on the type of the project.
• 选择与草图画板匹配的项目分辨率(例如.g., 1x, 320px).

5. Export the Sketch artboards to Zeplin.

• 从Sketch中突出显示您想要导出到Zeplin的所有画板.
• Go to Plugins > Zeplin > Export Selected… or press ⌃⌘E on your keyboard.
• Next, we’ll export Symbols from Sketch. 在草图中打开符号页面并突出显示所有画板. Export to Zeplin.

6. Organize the project in Zeplin.

• Now that your Sketch artboards are in Zeplin, let’s organize artwork into sections.
• From the Dashboard view of your project, select similar screens to group into categories. 高亮显示后，右键单击并从选择中选择“新建部分”.重复这个步骤，直到你的Zeplin文件被整理好.

7. Utilize components in Zeplin.

Perhaps one of Zeplin’s most useful features is the ability to organize assets into component libraries. This is important when a project’s designs are developed for multiple platforms by different team members. 正如Airbnb设计师Karri Saarinen所概述的那样，设计统一是必不可少的 Building a Visual Language:

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

• 选择Zeplin顶部中心的“Styleguide”选项卡(在“Dashboard”旁边).
• 在“Styleguide”选项卡中，选择第二个选项卡“Components”.在这里，你会看到所有的符号从草图导出.
• 将这些内容分成“图标”、“图像”、“公共元素”等部分. You can learn more about the Components tab of your project style guide in Zeplin here.

8. Export style guides from Zeplin.

• 从您的Zeplin项目的Dashboard视图中, 在应用程序的右上角找到“分享”按钮.
• 选择“分享”，然后在菜单底部找到“场景”. Select “Enable” and then “Open.这将为你的项目生成一个动态的风格指南. Share the URL with your team.

9. Annotate your designs in Zeplin.

• 添加注释的设计是很容易与Zeplin. From the detailed view of a screen, select the add note icon and pin your note to a component.
• You can add a note by holding down Cmd (Ctrl (适用于Windows和Linux用户)，并点击屏幕上的任何地方.
• You can even mention other teammates with “@” and they will receive a notification.

10. Collaborate, share, and use version control.

• 现在，您的Zeplin文件已经准备好与您的团队共享, invite users via their email address, or send them the project URL.
• 通过从Sketch导出画板，继续更新您的Zeplin文件.
• Zeplin will automatically version control your files and you can continue collaborating with team members using this dynamic “source of truth.”

Conclusion

之间创建动态的、有组织的和协作的工作流 design 开发团队对于打造伟大的数字产品至关重要. Having a workflow bridge like Zeplin empowers designers to annotate screens and eases the often dreaded handoff phase with complete and precise specifications.

从一个中心源动态更新资产的灵活性, 比如Sketch中的符号导出到Zeplin中的组件, creates tremendous flexibility. Engineers can then easily export assets into native code, saving time and tedium.

While thoughtful UX and aesthetically beautiful designs are the root of a successful product, 将设计交到用户手中的过程至关重要.

Designers wanting to be efficient and rely on a single “source of truth” should consider the Sketch to Zeplin workflow outlined above. The power behind the robust software relationship between these two design tools will help designers and development teams get to the finish line with greater ease and satisfaction.