Zeplin Tool
Designers are always looking to streamline handoff to development. Zeplin is a great solution tool for asset management, team collaboration, and documentation.
Background
Before the release of Zeplin, in the MCoE design process, the design team had to provide mockups with annotated specs for each screen to the development team. The process involved manually measuring each asset through a photoshop plugin, as well as a lot of back and forth questions and answers between developers and designers on how individual elements should be styled and positioned. This was bogging down the process and ultimately adding many hours to our builds, and sometimes led to a styling disconnect at launch, leaving us to rush and make adjustments. Assets also had to be individually sized at 1x, 2x and 3x and uploaded to a shared folder for developers to grab from. This often times involved a lot of hours especially when revisions to designs had to be made.
Better Workflow
To help remedy some of the workflow issues, we looked into a software company named Zeplin, a collaboration tool for designers and developers. With plugins available for most layout programs, we were able to export mockups directly out of Sketch into the Zeplin platform. The MCoE Design team first used Zeplin when working on KP Mobile’s E-visits. The use of Zeplin for this project made the design handoff more efficient and saved the team hours of work that would have gone to manually creating specs for each screen. The developers were able to download assets directly and post questions or answers on specific layouts, making dialogue and documentation between MCoE designers and Offshore developers possible.
Since E-visits, the MCoE Design Team has continued to use Zeplin for other projects. Among the benefits listed above, Zeplin also provides developers with access to exported icons and imagery and a style library. It even has extensions to export code snippets in CSS, HTML, React Native, and other languages.
Using Zeplin means designers do not have to export and take the extra step to save onto box folders anymore. Developers also don’t have to track down the correct folders with the latest assets, which is especially helpful for projects involving numerous and frequent iterations. Below are additional benefits of using Zeplin along with sample screenshots of the tool:
Dynamic Specs
Zeplin makes determining the specifications of designs very simple. When a user clicks on objects, it displays their measurements and the distance between them. It will also generate simple CSS, which can be handy for determining styling of a button or re-usable component.
Artboard Cataloging
Zeplin allows users to create folders of artboards, as well as tag artboards, and search via artboard name or tag. This method of cataloging artboards makes locating the designs a user might be looking for a lot simpler and more efficient than going through box folders.
Commenting Features
One of the most valuable features of Zeplin for the MCoE Design team is the ability to annotate designs via its commenting feature. The MCoE teams use this feature to track updates that need to be made to the designs. Developers, Scrum Masters, Product Owners or stakeholders can also use it to ask clarifying questions about design requirements. Being able to color-code the comments means teams can work out a system. For example, a designer may like to use red for items that they need to go back and update and blue for items that do not require immediate action.
Maintaining Consistent Styles
Zeplin is also a great tool for creating a simple style guide. It will keep track of all colors and font styles used in the imported Sketch files. Reviewing this style guide has helped designers keep styles consistent.
Annotated Comps Access
The MCoE Design Team uses Zeplin to post annotated comps in addition to individual screens to provide stakeholders and Product Owners with easier access to latest Annotated Comps. This provides an opportunity for more cross-functional team collaboration. The process of updating annotated comps through Zeplin is also a lot faster and more efficient than converting to PDF and storing it on a Box folder. Each time the designer makes an update to a screen, all they have to do is upload the Annotated Comp artboard through a single click action. This ensures accuracy and faster access to source of truth for Product Owners and stakeholders. The development team can also use the Annotated Comps as a reference for how the flows need to be organized and how each screen and transition needs to function.
ADA Compliant Alt Tags
Through the commenting feature, the MCoE design team is able to include ADA alt tags that help ensure accessiblity compliance design for all users. In the example above, the ADA tags are color-coded in blue to indicate to developers where tags are applicable and make them easy to identify. Since Zeplin offers different color options for commenting, each team using Zeplin can establish an agreed upon universal color to call out ADA alt tags. Incorporating ADA alt tags into Zeplin removes the burden on the development team from creating alt tag descriptions for graphic elements on the page.
Want to learn more? Check out these case studies below:
 |
Figma Tool Figma is a design platform that features good tools for UX/UI design, prototyping, collaboration, and specifications |
 |
Hamburger Menu v. Tab Bar Determine which navigation style – hamburger or tab bar menu- provides the most intuitive and positive user experience as well which one was preferred by users. |
 |
Search Tool Best practices in implementing search functionality. |
 |
Sign Out Button Inconsistencies of sign out button locations and design. Provides recommendations for a button standard. |