How we use Zeplin for an Agile workflow — Galaxy Weblinks

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-

If it were not for Zeplin, the design specification process would have remained 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 snippet is easier for developers with the React Native 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. As there are multiple artboards for every project, our Zeplin dashboard initially looked messy. Zeplin made it easy to organize and bifurcate the completed projects with tags, sections, groups, and colors.

Tags: Tags allow you to group particular artboards together. This way you can filter and find the 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 groups 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.

Colors for versions: This one is for the organization within a project. You can use different colors to determine the nature of the 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 a ‘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 detects positions
• 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. The work 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!

Originally published at https://blog.galaxyweblinks.com on September 17, 2018.