Improving Design Collaboration with Zeplin
Phill Farrugia
Phill Farrugia

Improving Design Collaboration with Zeplin

Phill Farrugia, iOS Engineer

If building delightful products is important to you, then it is crucial that designs and mockups from your design team are communicated quickly, clearly and accurately to your engineers. Spacing and measurements need to be applied with a pixel-perfect level of precision, fonts and text styles need to be easily identifiable, and ongoing changes need to be communicated clearly to everyone involved.

Designs need to be a central source of truth for teams that have several designers, and several engineers, all working right alongside each other. Designs need to be living documents that foster two-way collaboration and open discussion that holds true to the naturally flexible way that designers and engineers work together when building software.

At Prolific we’ve discovered Zeplin, an application separate from but built to augment Bohemian Coding’s Sketch, that solves all of the issues above and then some. Zeplin is an amazing tool built by a small team originally from Istanbul, that makes building delightful, design-led products a seamless and incredibly productive process. Since discovering it, Zeplin has become a core tool in the workflow of some of our ongoing projects. If you’re like us and always looking for ways of ensuring that you’re crafting the most elegant experiences for your users, then we think you’ll love it too!

Source of Truth

For designers, Sketch is a brilliant and powerful tool that makes designing interfaces a clear and straight-forward experience. However, on product teams, it often falls short. Team members need to find a way to share one centralized Sketch document with each other, either through Dropbox or Google Drive, or break up designs into a complicated system of several Sketch files. Developers can accidentally edit documents and save them, potentially overriding important work. As designers make changes to a Sketch document, they need to distribute their changes to developers over either Slack or Email. Sketch files quickly go stale, designs inevitably change and developers run the risk of implementing features incorrectly, unless they are incessantly asking designers “Is this the latest design for what the Onboarding animation is supposed to look like?”.

Zeplin does away with the mess of Sketch files. A Zeplin project is saved in the application’s own cloud-based document system, and access is granted by inviting Users to the project. Instead of changes being delivered as separate Sketch files called “Master-Design-Final-1-Final-2-No-Really-Final-3.sketch”, changes made by designers automatically update the project and are propagated to all users, immediately. As a developer, if you’re looking at the Zeplin project then you can be certain you’re already looking at the most up-to-date design that exists and can focus on writing code without worrying that you’re building the wrong thing.

Measurements

It isn’t immediately easy to get measurements from Sketch out-of-the-box, without clicking on elements and digging through groups and folders. Sketch enables you to hold Option and mouse around the view to see a basic level of measurements between elements, but the overall implementation is far from perfect. Developers may resort to eye-balling, which isn’t accurate at all, or using a third-party tool like xScope, but then no one can be absolutely certain that each and every designer or developer is working in the same units (pixels, em, cm, mm). This is a recipe for conflicting measurements and could mean that the designer’s intended spacing isn’t correctly translated into the final product handed off to users.

When a new project is created in Zeplin, a designer is asked to specify the pixel density being used in Sketch. From this point on, Zeplin calculates all of the measurements between elements in a single, accurate system of units that translates accurately into Xcode’s AutoLayout constraint units. Each and every developer can cursor around screens to get accurate measurements and be certain that spacing will be pixel-perfect in the final product.

Annotations and Discussions

Designs aren’t a holy grail inscribed in stone like commandments that will never change. Often designers mockup screens, discuss them with engineers and fellow designers, receive feedback, and collaborate on an agreed solution that might also change at any time. Zeplin enables users to annotate screens directly on the screen itself, and open up discussions about certain elements, measurements, or points of interest. Annotations are obvious, so you won’t miss them.

Discussions are recorded as part of the design document itself, right where they belong instead of buried away within Slack history, emails or verbal conversations. At any time users can look back at the Work In Progress of different features, and discussions as versions changed.

Styleguide

One of the most powerful and valuable features of Zeplin that we use at Prolific is the Styleguide. Zeplin’s Styleguide is a way of bringing together all of the different colors, and fonts used throughout a project in one place. Colors can be added to the Color Palette where they’re named and display their HEX/RGB values. Fonts can be added to the Font Book where they’re named and display their Font-Family, Size, Weight, Color, Text Alignment and Line Spacing.

As a developer building a specific screen, having colors and fonts defined in the style guide makes identifying colors and fonts absurdly easy. Click on a Label in-situ and the Inspector Panel on the right will display all of the text style information that you need such as the name, font, size, line-height and color.

    // Row 1, Column 4
    internal class R1C4Label: StyleableLabel {
        
        override var textStyle: TextStyle {
            return TextStyle(row: .r1, column: .c4)
        }
        
    }

At Prolific we’ve defined all of the Text Styles within our style guide, as subclasses in our code named according to the names in the style guide. For example R1C4 is the name of one of our Text Styles in the style guide, and in our code we’ve created a subclass of UILabel called R1C4Label which internally applies all of the relevant style properties such as text color, line-height, word-spacing, font and font size. As a result, the work involved in creating this label on a screen within the app is as simple as dragging a UILabel into Interface Builder, changing the Class Name to R1C4Label, and setting the desired text. That’s it.

We’ve even gone ahead and made these subclasses IBDesignable! If you’re looking at a screen in Interface Builder, you’ll see all labels and components styled exactly as they would look at runtime.

Exporting Assets

When exporting Assets from Sketch for use in an XCAssets file, you’ll often need a separate asset for each screen density (@1x, @2x, @3x) or a separate asset for different formats, and then you’ll need to add them to your XCAssets file. Zeplin streamlines this process by allowing designers to mark layers within Sketch as exportable. These layers then appear within Zeplin as assets, and can be quickly and easily exported from the Inspector Panel on the right. Zeplin goes so far as to export separate files for each screen density with one click, and can export to a file, or directly into an XCAssets folder for you without you even having to open Xcode. Designers with access to the project repository can export assets directly into the XCAssets folder and update each instance of an image throughout the app without any need to interact with a developer.

Building delightful, design-led products that users love to use is all about finding ways to streamline the communication workflow from initial design through to final product. By reducing the friction between designers and engineers on projects with multiple team members constantly working closely together, designers can focus on crafting great experiences and be certain that their vision for the user’s experience is being accurately translated into the working product. Developers can focus on being productive, writing code, and know that at any point in time they have quick, and easy access to the most up-to-date, accurate designs they need without fear of being blocked by inevitably changing designs.

Using Zeplin at Prolific has meant that our teams have been able to work closer together, without stepping on each others toes. We’ve become infinitely more productive in our daily work, and the collaboration between our designers and engineers has never been as strong as it is now. If you haven’t – check out Zeplin, and see if it works as well for you as it does for us.