authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Emily has seven years of experience working in UI/UX and visual design, leading projects for clients including Samsung and Thomson Reuters.
PREVIOUSLY AT
Zeplin is a powerful collaboration tool that bridges the gap between designers and developers by creating a connected space for product teams.
A crucial piece of any product development puzzle is the place where design meets development. When a design is ready to move into the development phase (the “handoff”), engineers need a way to understand it and translate it into code.
Zeplin facilitates the handoff by taking designs from 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 is focused purely on improving the collaboration between product designers and development teams and is used by leading product teams at 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. It’s simply awesome and saves lots of time to focus on design explorations. – Alex Potrivaev, Product Designer @Intercom
In one of our past articles, Toptal Designer Micah Bowers talked about the importance of having a standardized 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, Senior Designer, Digital Products @Starbucks
While Zeplin has many helpful features, it isn’t perfect. Zeplin offers a free plan, but under that plan, it’s limited to one project. When designing for both iOS and Android, two separate projects will be required. 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. To see a general overview and learn more about how to use it, see the Zeplin demo video below:
1. Get started with Zeplin.
2. Prepare your Sketch file.
3. Make assets exportable in Sketch.
4. Create a new project in Zeplin.
5. Export the Sketch artboards to Zeplin.
6. Organize the project in 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. Design unification is essential, as Airbnb designer Karri Saarinen outlines in 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, and faster because it gives us a common language to work with.
8. Export style guides from Zeplin.
9. Annotate your designs in Zeplin.
10. Collaborate, share, and use version control.
Creating a dynamic, organized, and collaborative workflow between design and development teams is essential for building great digital products. Having a workflow bridge like Zeplin empowers designers to annotate screens and eases the often dreaded handoff phase with complete and precise specifications.
The flexibility to update assets dynamically from one central source, like a symbol in Sketch exported to a component in 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, the process of getting that design into the hands of users is critical.
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.
Zeplin is a plugin and standalone desktop application for Mac and Windows specifically designed to bridge the gap between designers and engineers. It takes designs from Sketch, Adobe XD CC, Figma, or Adobe Photoshop CC and exports them into a format which generates code snippets, design specs, and assets.
A code snippet in programming is a piece of reusable code. A “snippet” is a programming term for a small region of re-usable source code, machine code, or text. Ordinarily, these are formally defined operative units to incorporate into larger programming modules.
Sketch is a comprehensive vector-based design toolkit on the macOS platform for creating designs at various fidelities for various devices. It includes a comprehensive set of design tools, design library management, library styles, color management, reusable components, masking, and much more.
Design language systems allow diverse teams working on sophisticated digital products to communicate using a standardized visual language. UI styleguides are woven into the fabric of design language systems and serve as a tool that can be relied on for quick iteration and consistent digital experiences.
A product development process is taking a product or service from concept to market. The process sets out a series of stages—typically around 7 or 8—that new products typically go through, beginning with ideation and concept generation, and ending with commercialization, the product’s introduction to the market.
San Diego, CA, United States
November 3, 2016
Emily has seven years of experience working in UI/UX and visual design, leading projects for clients including Samsung and Thomson Reuters.
PREVIOUSLY AT
World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.