3 reasons to create your design system documentation today

All images courtesy of zeroheight

By Zach Perkins

Posted on 11-18-2020

The long-term success of a design system depends on its maintenance, usage, and adoption across an organization. The work is far from finished when the first set of UI components and guidelines has been created. You still need to get people to use, contribute to, and improve your design system indefinitely.

This is where documentation comes in – the key to a successful design system. No matter where you are in your design system process, documenting the guidelines behind your product is essential and enables a design system to progress through three crucial stages – birth, adoption, and maintenance.

“If you see your components as LEGO pieces, the documentation is your manual,” explains Jerome de Lafargue, co-founder and CEO of zeroheight, an online editor that makes it easy for teams to create design system documentation collaboratively. “Without any instructions, you’re just left with some components that may be well-designed and coded, but you’ll be very limited in terms of how many people can benefit from them. Documentation is at the core of design systems. It makes them come alive and allows you to scale design.”

State of Creativity 2020

Get a global pulse on how 600 creatives from around the world are rising to the challenges of 2020, where they see the most permanent change in their industry, and how they are redefining their craft.

Read the full report

Documentation for all

Documentation is a critical – and often deprioritized – part of the design process for a wide range of companies. De Lafargue points out that as soon as it’s no longer practical for a design team to share knowledge in a room, you’ve reached an inflection point. Now is the time to start documenting – starting with core styles and components initially – so everyone can refer to the design language whenever needed. With the majority of teams around the world currently working remotely, this applies to pretty much everyone.

Creating and maintaining a bespoke documentation site for a design system can be time-consuming. Initially, founders Jerome de Lafargue and Robin Tindale therefore expected zeroheight to prove especially useful for smaller companies and startups that didn’t have the resources to build their design system documentation from scratch. But they soon discovered that their product was being picked up by Fortune 100 companies as well.

“We found that organizations would waste a lot of time building the documentation themselves,” de Lafargue points out. “Eventually, the project gets abandoned and fails because the documentation has become too cumbersome to update. Companies also realized that the documentation required a huge amount of continuous investment – so larger companies started looking to third parties to help solve the problem for them, so their engineers could get back to working on core products.”

Organizations with multiple products such as Red Bull use zeroheight as a centralized home for all of their design languages. Once one product team starts building its documentation with zeroheight, other teams see how easy it is to get their design system up and running and do the same – spurring design system adoption within their organization.

zeroheight showcase page

Better together: Using zeroheight with Adobe XD

zeroheight also provides a single point of reference. Documentation is no longer scattered across different tools, which can lead to conflicting information and interfere with the cohesiveness of a project. zeroheight breaks down silos of information. All the documentation is in the same place, easily accessible, and every stakeholder knows where to look. If a new person joins the team or comes to a project late, all they need is the link to the design system documentation site.

At the same time, you can continue to use your favorite tools. zeroheight integrates with Adobe XD, for example, so designers can update the documentation without leaving XD, which makes the process seamless and improves collaboration.

Adobe XD

Create and share designs for websites, mobile apps, voice interfaces, games, and more.

Learn more

“People like to have documentation, but no one likes updating it,” de Lafargue laughs. “So it’s really important to make it effortless and remove the manual step that you’d need to go through to update your documentation. With the XD plugin, your UI kits, component libraries and code just sync. It makes it a lot easier for developers to implement designs because everything is well-documented and ready to go. This integration with XD can give your design system a major boost.”

You can design, manage, and distribute your design system with XD and then use zeroheight to create living style guides, which essentially become an external, central hub for design, code, brand, marketing, and copywriting. You can then share that source of truth with everyone inside and outside your design team, whether technical or not. And zeroheight provides a user-friendly editing environment so anyone can easily contribute to the documentation.

“Using zeroheight in combination with XD provides a true end-to-end design system experience,” de Lafargue explains. “Design systems are all about seamless connections, and one of the real benefits of XD is that it integrates with so many other tools. You have a whole ecosystem to play with, which is incredibly powerful.”

More efficient design-development collaboration

To improve collaboration and close the gap between design and development even further, companies are increasingly turning to design tokens – cross-platform design language properties that speed up the design-development workflow. Tokens are another key element of documentation. They need to be well-defined, centralized and documented in order to be useful to design and development teams. Once they’ve been documented and implemented, developers can then use those tokens to easily stay in sync with design by automatically importing the latest styles into their code – ensuring brand consistency as well as maintainability.

“If you have a brand value, for example,” de Lafargue explains, “your design token enables you to define that value in a way that’s agnostic to tools and platforms. When the brand value changes, you update the design token, and as it’s centralized, you can then update all your different code bases – Android, iOS, CSS, React, Angular – to the latest design value.”

De Lafargue expects that more people will adopt design tokens as part of their workflow in the future. zeroheight therefore hopes to one day be able to propagate these centralized token values to design tools such as Adobe XD – synchronizing the whole process and streamlining the unnecessary steps that would typically be part of designer/developer collaboration. The result will be robust two-way design systems that can easily scale across platforms as well as teams.

Topics: Design, Creativity, Creative Cloud, Partner Story,

Products: XD, Creative Cloud,