zeroheight for Adobe XD: Build Design System Documentation Sites in Just a Few Hours

Graphic of people using Adobe XD.

Design systems have become part of the zeitgeist of the user experience world. Everyone’s talking about them, on Medium, at conferences, in tweets, and leading brands are implementing them, all with good reason. A well implemented design system can help product design teams collaborate better, bring products to market faster, and improve user experience and brand consistency. But, if you’re like most, the thought of implementing a design system for your team or your company can seem daunting. Where do you begin? How do you get started?

According to zeroheight founder, Jerome de Lafargue, it all starts with documentation. While implementing a successful design system is way more than just documenting your design system or style guide, it is the cornerstone. It is the very thing that enables a design system to progress through the three crucial stages that are necessary for it to succeed: birth – convincing stakeholders and getting the design system funded; adoption – getting people to use and contribute to the system; and finally, maturity – making sure the system lasts.

With hundreds of paying customers including Redbull, Staples, and The Guardian, zeroheight is a collaborative online editor that helps teams quickly create and maintain design system sites that serve as your single source of truth for documentation. It syncs with design tools like Adobe XD through plugins to make the process seamless.

Get started with zeroheight to give your design system efforts a major boost

The zeroheight plugin for XD launched in August of last year alongside the new XD Plugin Panel feature; it’s quickly gaining traction with XD customers that are using XD and zeroheight to jumpstart their design systems journey. It’s fast and easy to get started. Some customers that already have design system UI components in XD are able to get a beautifully branded design system documentation site up in as little as a few hours. This is especially significant when you compare it to the heavy lift of building and maintaining a custom website, or the limitations of just using generic documentation tools. I love what customers have been able to create already – check out zeroheight’s showcase page below, which highlights some live examples:


https://zeroheight.com/showcase

With the zeroheight integration, Adobe XD users can create beautiful, living style guides and document all their design systems resources in one place. Here’s how you can get a zeroheight design system site up and running in three simple steps:

Step 1: Upload some XD components and styles to zeroheight

First sign up to zeroheight, then download the zeroheight XD plugin. After installing the XD plugin and logging in, you can upload your components and styles to zeroheight.

A GIF demonstrating the process of uploading files and components from Adobe XD to zeroheight.

Step 2: Create and populate your documentation site using your XD uploads

It’s super quick and easy to create and populate a style guide with your XD content. You can also edit documentation inline and move things around easily to get the layout you want. When you change the components and styles in XD, all you need to do is re-upload them and your zeroheight docs site will update automatically.

A GIF demonstrating the process of adding uploaded Adobe XD files and components to a zeroheight style guide.

Step 3: Add some branding and share the style guide with your team

In no time, you’ll have a good-looking, branded design system site that you can share with your team members and stakeholders. Having a polished documentation site for your design system is not only key to getting others up to speed with your design system, but it can also help you communicate the value of having one – encouraging adoption and stakeholder buy-in.

If that sounds useful and you’d like to kickstart your own design system site, head over to zeroheight and you can have one up and running in no time.

A GIF demonstrating the interface and features in a zeroheight style guide dashboard.

For help on how to use zeroheight with XD, head over to zeroheight’s XD getting started guide. If you’d like to play around with the Dashboard UI Kit by design agency Impekable in the demo above, you can download it here. Have fun creating your own design system site using XD and zeroheight!