How we use Zeplin for an Agile workflow

avatar

by

on

Earlier when our designers completed the wireframe of a project, they worried about the design handoff and the tedious specification work that came with it. They prepared annotated documents and style guides to help developers implement the design.

In fact, before the handoff, designers had to identify-

  • Colours
  • Dimensions
  • Fonts
  • Text weights
  • Distances
  • Positioning
  • Asset characteristics

If it were not for Zeplin, the design specification process would have remained the same; lengthy and unproductive.

This might sound a bit exaggerated but, Zeplin changed our lives! (Our developers & designers vouch for it.)

Introducing Zeplin in our workflow

Image source: zeplin

Design specification was a part of the process for so long, it became an integral part of the workflow. Zeplin was about to change that process forever. The teams were hesitant at first but when they figured how effortless and effective Zeplin is, they made peace with it.

Introducing Zeplin in our workflow gave us the capability to accurately check our design’s build and consistency. Generating platform related code snippets is easier for developers with the reactnative extension in Zeplin.

From importing a project to collaborating with team and clients in real time, Zeplin is seamless.

Project organization in Zeplin

Image source: zeplin

Zeplin shortens the review cycles and you can handle more projects. For every project there were multiple artboards. Our Zeplin dashboard initially looked messy. Zeplin comes with several filters, so that you can organize your projects and components in the projects.

Somebody had to organize and bifurcate the completed projects from the on-going ones. Zeplin made this organization easy with tags, sections, groups, and colours.

Tags: Tags allow you to group particular artboards together. This way you can filter and find desired artboard by just clicking on the created tags.

Sections: The sections method provides a visual filter over different artboards. You can segregate two different group of artboards using an empty section.

Groups: Sections can be further organized using groups. You can create groups inside the section to organize design components.

Colours for versions: This one is for organization within a project. You can use different colours to determine the nature of change that has been made.

How Zeplin makes project collaboration easy for us?

Image source: zeplin

Zeplin uncomplicates the designer-developer handoffs. The process starts with importing the artboard in Zeplin, where the added members can access the design. They can click or hover to inspect the components and its specifications. The side panel shows these specifications.

Designers can toggle the ‘export as batch’ option for the desired components in the designing tool. This allows developers to export every minor design component.

Teammates can comment and give feedback on the design as it takes shape. They can put reminders, specifications, and ask for alterations dynamically.

The changes made in the design are stored as checkpoints and can be accessed from the versions panel. Designers can leave ‘commit message’ with the version showing the details of the change.

Why do we use Zeplin?

Image source: zeplin

  • Designers don’t have to annotate or measure layouts
  • Designers don’t have to package assets separately
  • Zeplin provides automatic spacing and positioning detection
  • Teammates and clients can give direct and dynamic feedback on designs

As our projects got bigger and more complicated we found Zeplin integrations to be very helpful. Slack, Trello, and Jira are some highly useful integrations for collaboration, project management, and issue tracking. The level of platform compatibility that Zeplin provides is praiseworthy.

Our team mainly used Zeplin with Sketch and Adobe Photoshop. We haven’t had the chance to get a hands-on experience with Adobe XD-Zeplin and Figma-Zeplin integration. Do let us know your experiences if you’re working with either of those.

The work still remains the same but the development cycle has caught its pace.

We are achieving more in less time without making any sacrifices on quality and precision.

To know more and talk to us, connect with us here!