Designers and developers have always labored to translate polished mockups into code. Designers manually annotate mockups and create detailed style guidelines, or learn to code CSS & HTML comps. Developers might need to spend time inspecting design source files. Not only is this time consuming, it’s also easy for subtle details to be mistranslated. Compounding the problem, teams often work on products that are continually iterated upon. Producing and maintaining design guidelines and translating designs takes valuable time away from focusing on customer development, design thinking and implementing new features.

There's a Tool for That

Our team has recently starting using Zeplin.io to foster better collaboration between designers and developers. We love Zeplin so much, we’re taking the time to blog about our experience. This is not a sponsored post, rather just a helpful tip about new tools we like using here at Lab Zero. Three reasons Lab Zero likes Zeplin.io:

• CSS annotations
• Collaboration
• Version control

CSS Annotations

Zeplin automates the process of annotating and translating design guidelines to code. When designers export artboards from Sketch (or Photoshop) to Zeplin, developers can directly copy CSS code snippets, grab content for HTML, and download visual assets such as icons. It’s easy for developers to get measurements for anything on the artboard. Designers can also share style guidelines in Zeplin, keeping colors and fonts up to date.

While CSS annotations are already available in Sketch, Zeplin makes it easier for designers to share them. Options are also available for Sass, Less, and more.

Collaboration

Zeplin keeps a team on the same page by allowing designers, developers, and stakeholders to join a project. Each project has a unique URL, making it easy to share and find. You can add notes directly to a project, and developers can be instantly notified when Zeplin is updated by connecting your Zeplin project to a Slack channel.

Sketch isn’t a collaborative tool — sharing design files and artboards is tedious. When a designer exports and shares a Sketch file, developers either have to install Sketch to inspect the mockup, or ask for annotations. Zeplin, on the other hand, automates all that so developers can inspect the styling of a mockup and grab CSS code from the Zeplin project.

Version Control

At Lab Zero, we’re often working iteratively on product designs, meaning designers often need to share updated designs with developers. Zeplin helps with version control by allowing designers to copy over the previous version of an artboard, so stakeholders no longer need to ask these types of questions:

• "Can you Slack me the latest mockup?"
• "Am I looking at the latest version?"
• "Did you save your artboards on Google Drive or Dropbox?"
• "Which design version is approved?"

Zeplin's Limitations

No tool is perfect — While Zeplin makes CSS styling easier for design handoff, it has its limitations.

Zeplin is not a CSS starter kit or stylesheet template. While it does a great job annotating colors, fonts, weights, line spacing, padding, and margins, it does not give developers the whole picture. Zeplin does not, afterall, provide a fully completed stylesheet.

Zeplin could also do a better job of indicating whether or not a file has been updated, so it’s easier for developers to confirm that they’re seeing the designer’s latest version.

When teams have an existing styleguide or design pattern in place, Zeplin is again less helpful. When designing a complex site with many pages, for example, developers might waste time inspecting every mockup with Zeplin when they could instead be applying the same, established design pattern across all pages to achieve styling consistency.

Big Picture

Ultimately, we want to help designers and developers talk to one another, but not force them to be fluent in each other’s language. “Designers and developers come from different crafts,” says Lab Zero’s CTO, Matt Wilson. “There’s a healthy tension between a designer’s vision and a coder’s execution.” Tools like Zeplin take care of the translation allowing designers and developers to focus on their respective expertise and pair on more meaningful challenges.

Questions or Tips?

How does your team collaborate? What are your favorite tools? We would love to hear from you.