Scale Design Systems to Developers with Zeplin
Design Delivery
Berk Çebi
Jun 2021@berk
Earlier this month, I had the pleasure of chatting with Pete Fossick at DesignOps Global Conference to share a bit about Zeplin’s story, why we’re so passionate about working with users, and why Design Delivery is essential for product teams.
When we first posted the Zeplin app on Product Hunt back in 2014, we had 6,000 signups within a week. Fast forward to now, and we have over 4 million users that publish 7 million designs to Zeplin every month. Our growth has always been fueled by our awesome user community. And we still hold true to our conviction that in order to move from design to product, the whole team needs a workspace to collaborate and deliver on designs.
Why Design Delivery?
Design tools have evolved so much in the past few years, and one of the most notable advancements is the ability for real-time collaboration. This is a huge leap forward for how designers work. However, for team members that aren’t creating the design, collaboration is really an asynchronous process. Developers, testers, product managers, UX writers and others are much more likely to do their work after the design is created. Add in different timezones, international teams, multiple projects/screens and team members who haven’t used a design tool before and things get complicated — the kind of complicated that live collaboration doesn’t fix.
With asynchronous collaboration, you need a different solution with a tool built for the transition from design creation to shipped product — and one that’s built for everyone on the team.
In addition to the need for effective collaboration, there is also the issue of clarifying design intention. A developer can’t get all the necessary information for building a functioning app simply by looking at a design.
In the early days of product design, designers spent time providing this additional information by outlining specs and redlining designs to communicate things like colors and padding values. On top of specs, designers also added extra documentation to describe how the design should function — in fact, many designers continue to do this by adding text layers into the design file. But, what designers actually need is a scalable way to clarify the intention behind the designs.
These are just some of the challenges that exist today when moving from design to development. Teams have tried to solve these issues in the native design file by training team members on design tools and adding lots of instructions in text layers. While approaches like these are doable, we think there’s a better way that allows designers to spend time on design — not on workarounds. That’s what design delivery is all about, and it’s centered around three needs.
1. Finalization
Like I mentioned, when the screens are still in the “design” stage, live collaboration in your design tool is great! But, once it’s time to deliver on the design, the broader team needs a locked version to work from. And this isn’t just for the developers’ benefit — QAs, copywriters and product managers all need a place where they can intuitively find these finalized designs and have confidence that they won’t change (not even by a pixel).
If the designer shares a new version of a screen, devs need a clear way to know that a new version has been published along with clarity on exactly what has changed since the last version.
2. Inclusive Collaboration
Whether it’s tailored specs for developers or an easy way for copywriters to post UX copy changes, providing a platform that's accessible to all these different roles is critical to building good products. From the early days of Zeplin, we recognized the need for a workspace that was accessible to all of these roles while allowing for very specific use cases. We product folks sometimes forget that our nontechnical teammates also need a good user experience when building the user experiences the world relies on.
I think one of the challenges for nontechnical folks as they’re brought into the design tool is that there aren’t set rules on how to organize designs. Sure — lots of people use workarounds and create different pages, use naming conventions or other informal policies to make the canvas easier to navigate (and every designer does this a bit differently). But in Zeplin, we automatically turn that wall of screens into a structured workspace that provides the organization that the team needs.
3. Scaling Design Systems
Real-time collaboration isn’t the only big advancement in the design space — another significant change is the rise of design systems. As design systems have become more popular, it’s not just about clicking on a layer and getting the pixel values. Now, designers and developers are asking, “What are the components that are used in this design?” At Zeplin, we believe the future is designers and developers collaborating together to create these design systems.
Designers usually have their source of truth in the design world — a design file or some kind of documentation. At the same time, developers have their code base — the actual running components. Zeplin provides the bridge between these two things. We want to surface both of these worlds when you're working on a design.
I covered these areas plus some really thoughtful questions from users during my talk, and you can listen in on the entire chat here. Let us know what you think in the video comments! 🙌
Fin
