Update: Today our teams use and advise the tool Figma. From mockups to the design system, it's the most comprehensive tool we've tested so far. If you want to know more about how we use Figma, especially for creating a design system, we recommend this article: Create a design system adapted to each client when you are an agency.

‍

Since October, our UX team has made the choice To use Sketch for the creation of models. Before Sketch now seems obscure and complicated to us, not only in terms of graphic creation but also in terms of impact on developments. This is largely thanks to a collaboration software called Zeplin.

‍

Prologue

To explain to you the reason for our use of Zeplin, it seems important to me to explain to you how to use Zeplin BAM in our UX process... The story starts with an average project, let's call it Leopard, as on all our other projects, the Xion user journey will be defined during UX workshops where the whole team is present. Indeed, one of the particularities of our methodology at BAM is that our teams work in close collaboration. From the wireframes produced during these workshops, the UX will develop models using the famous Sketch creation software. However, despite the numerous benefits of using Sketch, we quickly ran into a problem. Although collaboration during the UX design phase was facilitated by UX workshops, it was not easy during the model integration phase: loss of time during integration, use of the wrong versions of the models, lack of communication between team members, loss of time exporting, etc.

Then we discovered Zeplin. And it made our lives easier.

Do you want ZEPLIN?

Zeplin is a software that greatly facilitates collaboration between designers and developers. How?

• Export speed:

The software allows UX designers to quickly upload their screen mockups directly from Sketch (or Photoshop) to Zeplin.

• Decreases integration time:

Developers have access to all screens in one place. With Zeplin, there is no need to estimate the size of each element on the screen: integration is done more quickly thanks to tools that allow you to define the margins, sizes, colors and fonts of all elements on the pages. For example, our developers saved approximately 1/2 hour per screen, that's not nothing!

• Pixel-perfect:

A second advantage of having easy and quick access to the different sizes and spacings is, of course, that the models are respected and that the integration can be done to the nearest pixel.

• Understanding between the different parties:

In case of doubts or questions about certain design elements, any member of the team can post a comment directly on the relevant element of the model.

Why should everyone use Zeplin?

Tools & tips for UX:

EXPORT

• A plugin directly implemented on Sketch allowing quick export into the software
• An instant update of each screen but with a history of versions to find out what has been done
• An export of Zeplin screens in PNG
• A direct export of icons in PNG, SVG or PDF

GRAPHIC DESIGN

• The possibility of defining a graphic charter based on the colors and fonts present in the models in order to check the consistency of the colors and fonts used
• The possibility of adding annotations on the screens for the rest of the team in order to describe certain functionalities or paths more preciselywithout the need to make a clickable prototype.

PROJECTS

• Easy navigation between the different Zeplin projects thanks to a dashboard grouping the different projects
• Notifications when you are the owner of the project as soon as someone uploads screens or makes comments to follow the progress of the projects.

Tools & tips for developers:

“Before I used a PNG and I was wondering: How am I going to treat this screen? With Zeplin I have the real information to work in good conditions. It's great.” Nicolas, developer at BAM

INTEGRATION

• Precise integration thanks to margin, spacing, color, and font size tools
• The ability to retrieve the CSS of the elements saved in the stylesheet
• The possibility to name the colors/fonts of the stylesheet as on the code

TIP! The possibility of opening a screen in a separate window and reducing its transparency to check the integration on a simulator

ORGANIZATION

• Be sure to have the latest version of a screen because screens with the same name are automatically updated
• Easily find the screen you are looking for thanks to a tag system that allows you to sort the screens by functionalities

Tools & tips for the team:

“I think it's cool. It's a great solution because it's a single place where I can search for designs quickly, unlike Drive, Trello, etc.” Xavier, developer at BAM

COLLABORATION

• Possibility to comment on parts of a design and to open a discussion so that all members of the team can give their opinion (dev, UX and customer)
• An easy export of each screen in PNG format for customers who want to show the latest screens to their stakeholders
• Notifications when you have been tagged on a screen so that you can easily follow the conversations
• A link specific to each screen to easily share and find the screen

TIP! Sharing the Zeplin link on Trello allows you to always automatically have the latest version of the screen - unlike a PNG that must be uploaded very frequently.

TIP 2! You can organize the screens by last added or by name to find them more easily.

• The easy invitation of members to the team via their email address (they will still have to create a Zeplin account)

AS A GIFT

• Funny emoticons like cats or balloons to post in the comments
• A very intuitive tool with new features almost every week that meet your exact needs:)

We really like Zeplin. If you too have experiences to share, do not hesitate to leave us comments:)

For more information: zeplin.io

The explanatory video: https://www.youtube.com/watch?v=tbKZAGthUgQ