The magic of Zeplin: 7 principles that drive what we do
Product News
Pelin Kenez
Dec 2023@pelin
2023 was quite a ride. I’m excited to ring in the new year… but before we do, I want to share something we worked on this year. Something I’m pretty proud of. We had lots of amazing product announcements, but that’s not what I’m referring to.
I’m talking about the collection of ideas and principles that guide us as we improve the design to development workflow, even after 8 (!!) years. When I get up in the morning, these are the values that get me excited about everything we’re building. I’m talking about the principles of design delivery.
These principles existed in our heads from the moment we started working on Zeplin, and ever since they have been the main source of our product roadmap. They represent how we think about the transition from design to production — they are the foundation for building beautiful products. These principles are not tied to Zeplin or any other tool, and can be applied in your team regardless of your tool or platform of choice.
In this post I’ll try and summarize all these principles, but honestly, this is also an excuse to share all these lovely illustrations our design crew has put together! 🍭
The 7 principles of design delivery
1. Separate ready-to-build designs from designs in-progress
Building products is an iterative process, a continuous cycle. There’s no single moment where all design stops and then development begins.
That means it’s important to clearly separate designs for development from designs that are still in-progress so there’s no confusion about what to reference for the build.
2. Track changes to shared designs deliberately
Version control in design is something I’m particularly passionate about. Designs constantly change during the product development cycle. And if you don’t track those changes in a standardized way, developers can’t follow the design intent. As a result, there’ll be rework later on that you could have avoided.
In our recent survey of DesignOps professionals, nearly half (47%) of design teams said they struggle with design version management — and that’s only those who recognize it’s a problem for their devs. Designers should track changes to shared designs deliberately, so developers can clearly understand iterations to designs and build it right the first time.
3. Organize designs in a standardized way
As your team works on more designs and perhaps more complex features, it gets more and more difficult to keep everything organized. 67% of product teams said they struggle with design file organization for developers and other stakeholders.
It’s also not just about being organized yourself, you should standardize how you organize designs across your teams, so no one has to wait on anyone or anything to get what they need.
4. Communicate the complete user journey
While developers build only a part of a design layout at a time, they need to see how the designs fit together for the entire user journey.
You should communicate the complete user journey for your designs, so developers don’t miss any edge cases or conditional paths and can deliver the best experience for all your users.
5. Document behavior and requirements in context
We know documentation is important, yet 66% of product teams struggle with it. Whether it’s design behaviors, requirements, or user flows, these pieces of design documentation have to be easy for your developers (and other product team members) to find and understand…otherwise, how can you expect them to use it?
You should document design behavior and requirements in context, next to designs, so your team spends less time clarifying the design intent.
6. Display design system elements that are used
Design systems have so many benefits, like unifying your team around a common visual language, optimizing development, and reducing tech debt. But first, your developers have to know how to adopt it. 68% of design teams struggle to promote design system adoption within their design delivery workflows.
You should consistently show which parts of the design system apply to the design so your developers can actually use it and get value from it.
7. Include technical specs & assets tailored to the development stack
Designers focus so much on the final product experience for users, but we must remember developers are the first internal "users" of designers’ work. Their collaboration matters: The majority (68%) of design leaders estimate that their team wastes between 25% and 75% of their weekly time because of design-dev inefficiencies.
We designers should deliver designs with devs in mind so both teams can maximize their time when collaborating and together can ensure what was designed actually gets built.
What about the features? The best of 2023, and what’s to come
Our top releases this year came directly from this principled approach to design delivery. Here are the 8 that you loved the most:
Approvals: A structured and systematic way to secure approvals on finalized designs to prevent builds from taking off before stakeholder sign-off.
Styleguides color palette, upgraded: Automatically create collections of colors using naming conventions from Figma and Sketch. Rename, delete, or organize them in Styleguides, the central reference for your design system.
Color variables: If you’re still reading this, we just released support for Figma color variables in Styleguides. 🤫 Export color variables along with their modes and hierarchy via the plugin.
Version Diff: Visual version tracking that helps your team document and communicate changes to screen versions, down to the pixel level.
Component Version Control: Version diff, change history, and component recurrence data. Check whether a component is recent or outdated and its before/after states.
Tag Groups: Assign screens to owners and track statuses with assignee & status tags. Also, nest multiple tags into groupings that make sense for your team.
Azure DevOps integration: Attach your screens, sections, and projects to ADO work items, so the team can preview and quickly access them.
…And Omlet 1.0: Our first product since launching Zeplin eight years ago! 🍳 Get data-driven design system insights and intelligence for front-end devs and design system teams.
Looking ahead
Zeplin and these design delivery principles bring more standardization and empathy to how we collaborate during product development — not only for the sake of our end users but also for our internal teams and stakeholders who are part of the journey.
This drives our crew and me as we build Zeplin, and hopefully, it opens your eyes to our product philosophy and everything we’re working towards.
You could try to configure your design tool (plus other tools in your stack) to manage some of these 7 principles — but none approach design delivery in a standardized way. That's important, because standardization is how you make any process more efficient while maintaining quality. Zeplin is purposefully built for that, and there’s so much more to come next year and beyond. 🎉
As the year ends, I’ll leave you with a sneak peek… 👀 We’ve been heads down working on a pretty big design refresh and can’t wait to share more in the new year!
Sign up for a small group demo to see how Zeplin can improve and standardize your design delivery process, or start a 30 day free trial to see for yourself.
Fin
