Are the designs in Zeplin yet?

Why Zeplin became a vital part of our toolset, helping to optimise our daily workflow when building mobile applications.

Our in-house developers and designers here at ribot have a great collaborative relationship, working together to make visually pleasing and polished products. Communication, teamwork and regular design reviews have always ensured our finished products are completed to a high standard, aligned with the initial vision of carefully produced visual designs.

In the past, we had a process which worked, but was not optimal. Time was being wasted in design reviews. Designers would sit down with developers to review the latest implementation, only to find that what had looked like a grey in the designs was meant to be a 60% transparent black.

We have always considered taking time to go back and make these small visual changes important, thus ensuring our finished products are polished to our own high standards. However, as a team we are always searching for ways to improve and optimise our processes. We love trying out new tools which have the potential to make our daily workflow both smoother and simpler.

We wanted to find a way to minimise the time spent going back and forth making visual changes by improving the communication of the designs up front.

Enter Zeplin

Zeplin is a tool which aims to bridge the gap between designers and developers by providing a central store where the whole team can access the designs and see the specifications. We’ve been using Zeplin across several of our mobile projects over the past few months, and have found it really beneficial for the whole team. In fact, when we begin implementing visuals into our apps, one of the first questions from our developers is now “Are the designs in Zeplin yet?”.

There are a number of great features of Zeplin which have had a positive impact on our daily workflow:

Colors

Zeplin allows you to produce a style guide and set of visual rules at the beginning of a project. This saves a lot of time as previously developers would reference a set of visual designs whilst building the screens, and either use a color picker to find the hex code, or go to the designer and ask for the specific hex code for each component, in turn requiring the designer to open up the design document to find this value. This also relied on the developer adding the color to the codebase with a name that could be identified and reused by other developers later on.

This flow has been transformed completely with the addition of Zeplin. Each screen comes with a list of the colors used alongside it, including hex colors and level of transparency, which can be added to a color palette within Zeplin. From this color palette, code to define each color is automatically generated in either XML, Objective-C or Swift, ready to be copied straight into the application. This ensures the exact colors and transparencies from the designs are used, matching the designers vision throughout the app and keeping naming consistent across the project.

Sizes and Measurements

Zeplin has helped developers get spacing and sizing dimensions right first time. Previously, as with colors, our developers would determine the size of a component, block of text, title or margin by eye from a set of designs. Our developers have excellent knowledge of platform design guidelines which are descriptive about which values should be used for margins and texts, so were able to replicate designs well the first time round. However, this was not foolproof and there were still times when the designer had intended a slightly larger offset or some extra line spacing.

Zeplin has more or less completely eradicated any spacing or sizing issues coming up in design reviews. The tool shows the exact dimensions of each component, including text size, line height, letter spacing and typeface for texts. It also shows the component’s height, width and position in relation to other components.

Assets

Zeplin is able to generate assets from the designs in the appropriate file type for the target platform, and in all the required device densities. It then enables you to export them directly into a specified project’s resources folder (or any other folder).

This is a massive time saver for our designers. Prior to this assets needed to be generated in all sizes manually. Now, just by making each asset component exportable in Sketch before uploading to Zeplin, the designer has done all they need to do. Developers can just export them when needed.

Tags and Filters

Our latest Android project was Playbook, by Google Play. During this project we provided full support for both phones and tablets, and naturally the designs differed to optimise the experience for each device. We used tags and filters in Zeplin to find the individual screens for different devices.

After uploading the initial designs, our designer came up with a number of keywords which represented each section of the app, and created tags for them in Zeplin. In addition, tags were created for ‘phone’, ‘tablet’ and ‘assets’. Associating each screen with the relevant tag, or tags, replicated a previously complex folder structure with a simpler way to navigate to individual screen designs. This saved time in meetings, making it quick and easy to bring up a design to discuss with the team, and also saved time when developers moved between tasks. Having an ‘assets’ tag also made it very obvious to the developers which screens contained exportable components.

Exportable Links

There are often occasions when it is useful to share a particular screen with a client or the rest of the team. Zeplin makes this very easy by generating links for every screen. The links direct to a screen either within the Zeplin Mac app, or in the Zeplin web app. This is particularly useful for us to share screens in meetings with a team working from different locations — one of our designers is based in Luxembourg, the development team are in Brighton and we have clients all over the world.

In a short space of time, Zeplin has become a core part of our daily workflow. The features play a big part in the team’s ability to produce polished, visually pleasing mobile applications without the previous pain of lots of review rounds resulting in small changes.

But Zeplin is still in its infancy, version 1.0 was released in July 2015. The Zeplin team appear to be working hard to bring an even more enhanced experience for their users, with regular updates and new features.

Perhaps the future will bring a smarter, automated tagging system for newly updated screens, screens containing assets or screens of different sizes? Perhaps we will have the ability to export screens into a pdf presentation, enabling us to quickly produce documents valued by our clients. Or perhaps the next feature will open our eyes to an aspect of our flow we didn’t even realise needed changing!

At ribot, we are continually looking to improve our processes. If you’ve got more ideas on how Zeplin can be used to streamline development, we’d love to hear about them!

Tweet me at @jemmsla !