How Designers and Developers Can Collaborate Using Sketch and Zeplin

Collaboration between designers and developers is essential to the success of a web project, and it’s a measure of a team’s success. Whilst sharing the same workspace is invaluable, having an online source of truth that helps with this collaboration is incredibly helpful. In this article we’re going to look at Zeplin and how it works in combination with Sketch to bring teams together.

A Quick Word on Sketch

About six months ago, when I moved jobs, I was encouraged to try out Sketch. The great thing about this software is that it is specifically focused on interface and icon design; from artboards with specific sizes for web, mobile, and icons, to features which help enhance the design process, Sketch is a must have for designers.

Additionally, the learning curve if you’re an intermediate Photoshop or Illustrator user is close to none.

Here are some examples that give you an overview of what you can do with sketch:

1. Create Pages to organize your content (for example: mobile designs, desktop designs) and Artboards inside these pages to mockup your product (for example: create a step-by-step customer’s journey).
2. Use the Inspector to find all the details about a specific object (size, positioning, colours, font styles, opacity and much more).
3. Use the Export feature to export Artboards or individual objects to specific file formats (PNG, JPG, PDF, and so on).

“I’m a dev, I’ve never used Sketch!”

In recent years designers have learned to collaborate amongst themselves using tools like InVision, but this platform still lacks features which allow for a quick design hand-off to the development team.

We shouldn’t ask developers to be proficient in the same tools designers use to mockup products. That said, neither should we require designers to move away from what they do best: design! Building a “specifications document” every time they hand over a design is far from being “agile”, and can mean a lot of wasted time between handing over designs and having to iterate if need be.

Zeplin

This is where Zeplin enters the scene.

Zeplin is a collaboration tool for UI designers and front end developers. It goes beyond the design workflow and helps teams with the design hand-off.

It allows designers to upload their wireframes or visual designs straight from Sketch and add them to project folders in Zeplin. The best thing?  Annotations will automatically be added to the designs (sizes, colours, margins and even CSS suggestions for certain elements) which will leave you with an online repository that the whole team can contribute to.

“Zeplin works very well as a single source of truth, when used as such.

Also, since it’s available as a standalone app as well as a web app, you can access it pretty much anywhere. Makes it easy to check designs and things like spacing, sizes, colours, etc.” – Daniel Setas Pontes, Javascript developer @NOW TV, Sky

Exporting Designs From Sketch to Zeplin

Zeplin works as a plugin within Sketch, so uploading designs is a one click job.

Here’s how to start a project:

1. Download Zeplin (mac only) & install. Developers won’t need to be running OS X as they’ll only need to access the web-based tool to gain access to content.
2. Create projects.
3. Select the platform you’ve designed for.
4. Label the project (make sure you choose a name that is familiar to the entire team).

Within Sketch, select individual objects and make them exportable. This will allow your dev team to export each element later on from within Zeplin. Here’s how that works:

1. Next, select the artboards you want to upload into Zeplin.
2. Go to Plugins > Zeplin > Export Selected Artboards.
3. Select the project to which you want to upload your designs, then click Import.

Working With Zeplin

Once in Zeplin, you can navigate between projects and easily explore all the components within them. Finding out about specifications of certain elements is also intuitive; select the element you want , then  all the relevant information will appear in the right-hand side column.

Developers: here’s how that works, once you’ve opened the web-based tool and signed in:

1. Select the object you want to inspect.
2. Look at the right-hand side column for detailed information like font styles, color, and so on (information will be displayed according to the object you select).
3. Copy the suggested CSS.

If the design team allowed for exportable elements when importing the designs into Zeplin, the development team should be able to export individual assets. Assets will be available for download in SVG format and three different PNG sizes.

1. Here you can add notes and comments to the designs.
2. Here you can copy and share the project link, perhaps even integrate with the team’s Slack channel to get notifications or invite team members to collaborate!

Why Your Team Should Make the Move

Working with Zeplin has many advantages, here are some examples:

• You’ll avoid building a specs document; something which is neither agile nor easy to update.
• Create instant annotated designs with all the relevant information for developers and other designers.
• You can create exportable designs, so developers gain quick access to individual assets.
• Create as many projects you want, then upload and update with only a few clicks.
• Create style guides that will help the design team stay consistent.
• Take advantage of Slack integration, instantly notifiying your team every time there’s an update.

Try it!

Working with Sketch and Zeplin is a great way for designers to collaborate harmoniously with developers. My team loves working in this way–I’d love to hear your thoughts and experiences working with these tools!

Useful Links