How we use Zeplin for an Agile workflow
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-
- Text weights
- Asset characteristics
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!
By Evnisha Malani
About Galaxy WeblinksWe specialize in human-centric user experience design services to our clients across the globe. Our innovative ideas, creative designs, industry best practices, and processes help us improve user satisfaction and solve complex design problems. Contact us for a free consultation!
At Galaxy Weblinks, we build high-performing software solutions that help teams scale. And write about it in the process. You may have spotted us on…Best Practices Design Ecommerce Web
The most important question that project managers should ask themselves is, “How do I help my customers achieve their goals on my website while still…UX Web Design
There’s a popular user experience quote: “A user interface is like a joke. If you have to explain it, it’s not that good.” While clever,…Design UI Design
Incessant scrolling while using an application is perceived as a flaw on both mobile and desktop. To address this concern, a shift to horizontal scrolling…Design UI Design UX
User Experience Design is one of our core competencies. In this blog, we will share with you the best practices of designing buttons for your…Design UI Design UX Web Design
Whether you have recently started learning Node.js or thinking about using it in your next project, this blog will help you in understanding the main…Backend Website Development
Developers use Text Editors, also known as code editors, for editing programming code. These editors basically contain features like quick navigation, syntax highlighting, automatic indenting,…App Developement Web
Your business is growing and your team is doing their best to meet the tight deadlines and increased workload. You may be exploring the idea…App Developement Web
Single Page Applications(SPAs) are all around us. Industry leaders like Google, Trello, Facebook, Gmail, Github, vouch for it. Their structure is considered the best for…Website Development
Voice search is at its peak in popularity among millions of users. According to an OC&C Strategy Consultants market research, Voice Shopping is projected grow…Ecommerce Web
We all love harmony in our lives. Harmony of tones and hues, of perfect shapes and negative spaces. Be it in music, interior design, or…Design Design Process UI Design
Even though there is no word on Angular 10’s release and to be honest it’s too early to expect a release, the developers and community…Frontend Website Development
Hello (Inserts your First name), All of us have received emails/ sms notifications, social media ads, that are sharing offers and discounts on the products…Ecommerce Web
The recently released WordPress 5.4 ‘Adderley’ update has got a lot to look forward to! Since this highly popular CMS ditched its classic editor for…CMS Web
Contemporary mobile apps have different ways of onboarding and retaining their users. Duolingo, a very popular language-learning application offers free sessions before they ask you…Design Mobile Design UX
App development frameworks are at the front and center of the development community. Backend and frontend frameworks are continuously taking inspiration from each other to…Web Design Website Development
Did you ever happen to spot some inconsistencies in your product’s design that were not there in your prototype? The color being a bit different,…Web Design Website Development
The appeal of WordPress is simplicity. The debate on Gutenberg and Page builders is much more than functionalities. It’s more about ease of use. In…Web Design Website Development
People don’t want to miss out on the digital era. And accessibility testing is how we make sure that smart devices and computers are accessible…Web Design Website Development
Design System is one of the most excessively used design terms in the software industry right now, so much so that it has given birth…Design Design Process UX
Setting up a shop online? Well it’s easier than setting one up made of bricks and mortar. But it doesn’t mean that E-commerce is easy.…Ecommerce Website Development
Modern technology has two problems: Devices have too many integrated features and everything is smaller. A good implementation of more-than-what’s-necessary features can give some users…App Developement Others Web
What is common between Pinterest, Tinder, Uber, Trivago, and Airbnb? All these companies experienced a surge in their product’s performance, user-engagement, and conversions by going…Mobile PWA Web
Kotlin has emerged as both substitute and supplement to C++ and Java. In 2018, the language had over 96,000 repositories on GitHub and had already…App Developement Galaxy Apps Others Web
When you think of hotspots for tech, don’t zero in on Silicon Valley just yet. According to Expert Market, Boston is one of the top…Galaxy Apps Internet Marketing Others Web
The experience of Disneyland is always an awe-inspiring one. No matter how many miles you have walked, you are always up for another Pirates of…Galaxy Apps Others Product Development Web
Google Play set out many criteria in their app guidelines that you need to follow. These changes may cause some issues as you try to…Galaxy Apps Mobile Others Web
Leading the AR revolution, industrial enterprises are experiencing improved ROI through AR-optimized supply chain. Enterprise sector is using AR across other functions such as product design…AR Galaxy Apps Others Web
Apple in its annual WWDC made some game changing announcements like a new Mac Pro, an exclusive OS for iPad, iOS 13 release, new Apple…Apple Galaxy Apps Others Web
If you’ve looked over these tools before, then you’ve probably wondered how they compare when facing off one with another. What’s InVision’s kryptonite? Why Framer…Design Design Tool user experience Web Design
At the time of an unsuccessful product deployment, you might ask yourself. “What went wrong with the product delivery?” The simple answer lies in configuration…Galaxy Apps Others Product Development Web
You might be familiar with Murphy’s law which says ‘Anything that can go wrong, will go wrong’. Software isn’t immune to that. But that’s often…Galaxy Apps Others QA Web
When you look at the respective market share of both the CMSs, WordPress has a clear edge over Craft CMS with 81.9% market share to a…CMS Galaxy Apps Others Web
Angular 6, released earlier in May 2018 didn’t offer much improvements on the performance part. It was mainly focused on making Angular migration-friendly. Google dropped…Frontend Galaxy Apps Others Web
Magento announced that it is pulling the plug on Magento 1 in April 2017 at the ‘Meet Magento’ conference in Prague. The announcement caused a…Ecommerce Galaxy Apps Others Web
Building a WordPress website? The WordPress community provides you with plenty of options. You can either make an easy one using WordPress themes or a…Galaxy Apps Others Web Website Development
Facebook has finally decided to monetize WhatsApp. Earlier this month, on August 1, Facebook rolled its long-in-development WhatsApp Business API for medium to large businesses.…Galaxy Apps Others Web
Craft CMS’s consistency can be seen in its regular updates & latest features. Matrix is one of those early features that helped Craft dominate the…CMS Galaxy Apps Others Web
Before introducing the Debug Tool in Craft 3, Craft CMS made you install a separate web-based application, Web-Console. You could run shell commands on your…CMS Galaxy Apps Others Web
Investors have the money, you have the idea, and the right pitch is the only thing that stands between you and them. But, pitches are…Galaxy Apps Others Product Development Web
“Personal data shall be processed in a manner that ensures appropriate security of the personal data, including protection against unauthorized or unlawful processing and against…Galaxy Apps Others Web
Google recently announced Mobile-First Indexing after a year and half of extensive experimenting and testing. The search engine giant will start migrating sites that follow…App Developement Galaxy Apps Others Web
Social media networks are mode of social interaction. It is a platform of sharing and discussing information among human beings. Social media can include text,…Internet Marketing Social Media Web