The best tools for documenting design systems

Finally, there are options to create your own platform. This allows for more freedom in what is possible. But it also takes significantly more effort, requires technical knowledge and doesn’t support synchronisation with your design tool (unless you are a very skilled programmer, willing to create your own custom plugin). Examples of custom built platforms are Google’s Material Design, Shopify’s Polaris and IBM’s Carbon Design System.

Frontify, Zeroheight, Nuclino, Lucid and Bynder are all tools that focus more on design. Their layouts are more supportive for showing brand and design. Some of these tools even sync automatically with your design tool, making it a breeze to keep your design system up to date with the latest changes.

These host accessible websites that anyone can use to retrieve information and often feature version control. Most of these tools tend to focus on the development side, and offer ways of hosting and showing code. Native integration with design tools is nonexistent; so designers will have to upload images of design and replace those images with every change they make. Some examples are Gitbook, VuePress, Fractal and Confluence.

Design tools allow you to design any digital screen and manage all the digital assets. They also have options to share designs (e.g. exporting images, online access and shared libraries). Generally, these tools are not meant for documentation. Examples are Sketch, Figma, Adobe XD and Framer.

Before diving into each individual tool, let’s consider what different types are available. There are four types of tools you can use in your design system:

TL;DR: If you need a documentation tool that brings together design tools and development tools, Zeroheight is one of our favourites. Its integration with Storybook and most design tools, makes it a good choice for a lot of projects.

Which tools should you use when setting up a design system? With so many options, it is difficult and time consuming to properly answer this question. To help you decide we compared our favourite tools for you. At Hike One we help implement design systems for a diversity of clients: corporates, municipalities, smaller local players, you name it. Each one of them has their own culture, design process, challenges and, of course, their own budget.

Mục lục bài viết

Comparing Design System Tools

In this article, we will only focus on tools that allow you to document your design on an accessible website, on multiple pages with imagery and text. Each tool offers these features, without the need to build your own custom platform. But there are important differences, so let’s take a look at how the tools compare to one another.

Attributes Priority

In the table, we ordered attributes according to importance; integration with design tools and price* are always big deciders, so they are featured at the top. The best design systems also integrate development, so code options and version control are next. Freedom in structure can also have a big impact on your possibilities; some tools give a lot of options for page layout and page tree structure, while others use a strict template.

Less important are the options of using your own domain name, single sign-on, the option to personalize the tool’s appearance with your brand style or the possibility to host the whole tool on your own servers. Support for multiple styles is a very specific attribute for companies that have white labels or need designs for multiple brands of the same component.

Obviously, the priority of attributes can be different for your company, so study the table and see what you find important for your design system.

*A small note about the price attribute; each companies’ context is different. Perhaps you already have a tool for another purpose (e.g. brand or prototyping), then that tool might be cheaper for you. Or you work in a small team and only five people need access, compared to working with many external parties who will all need to have access. This makes it difficult to compare the prices here, so we suggest requesting price options for your context from your top three tools.

‍

A Closer Look

Now that you have a general idea of all the design tools and their features, let’s take a closer look at each individual tool.

Frontify

Originally meant for documenting your brand; this Swiss made tool works great with the Sketch plugin, allowing you to upload your Sketch artboards straight to their website. The best thing? If you have a change, select the artboard in Sketch, use the plugin and it is instantly updated on the website. No hassle with exporting, uploading and replacing images.

It can also show snippets of your code. There is no version control, but you can easily copy your project, give it a new version name and continue from there.

Zeroheight

Zeroheight hosts an accessible design system website that syncs directly with your Sketch or Adobe XD with the help of their plugin (similar to Frontify) or with Figma or Zeplin when you give Zeroheight acces to your account. One great feature is the inspect mode for components, which shows the history of all your previous syncs with Sketch and allows developers to see more details.

Another feature for developers are the code snippets that can be added, using live HTML, CSS and JS, a Storybook element or any other code snippet. Zeroheight also allows you to work on drafts and release them as versions. You have reasonable freedom to create your own page layouts and a customisable tree structure based on categories, pages and tabs. If you don’t need features like a custom domain and appearance or hidden pages, the price drops significantly.

Design System Manager

InVision’s tool for managing your design system is primarily focused on the Sketch Library. The Design System Manager (DSM) allows you to provide context around the components in there. This manager can also be accessed online and can be open to anyone.

DSM also has a nice option for versioning, but documenting is limited to a simple paragraph of text per Sketch item and the layout of pages is very restricted. Code snippets for different frameworks, like React and Vue, are supported, too.

Nuclino

Focused on supporting teams with documentation and collaboration, Nuclino is an easy to use tool that allows people to work on the same page at the same time. The tool consists of workspaces that you can fill with documents. Collaboration is supported by making information easy to find through different representations, visualizations, personal tasks and comments. They also support embedding designs from Figma, have version control and support code snippets.

Personalizable options, like your own domain or a custom theme, are not present. Also, the website is restricted, which means you will need an account before you can see any of the content.

Confluence

If you need a powerful tool for documenting, then pay attention to Confluence. Used by a lot of teams in the industry as a project documentation workspace, most of us have a love/hate relationship with Confluence. The platform offers a variety of plugins and options to customize your pages or pagetree, and integrate development. It also integrates with Jira, an industry standard project tracking tool that is also part of the Atlassian family.

A downside however is the lack of proper integration with design tools. Currently the Atlassian community has made a Figma plugin that lets you embed Figma links. But otherwise you will have to export and upload every component you want to document.

The biggest upside is that Confluence is highly flexible though. For example, it allows you to create tabs on a page, making it possible to place different styles of the same component on one page (e.g. one button for brand A and one for brand B). This can be useful for white label products or for large companies.

Bynder

Focused on marketeers, Bynder is a tool to gather all your digital assets in one place. It also allows you to create guidelines, which you could use for your design system. Just like Zeroheight and DSM, you can work with versions, and uploaded content is instantly updated in the guidelines.

They have some nice options to sync assets between Photoshop, InDesign, Illustrator and their platform. Although you can preview Sketch files in Bynder, there is no plugin or synchronisation between the two tools.

There is also no option for developers to show their code, although there are APIs and SDKs to build integrations on top of Bynder.

Gitbook

For easy and quick documentation, Gitbook is great! Developers might also like its bi-directional GitHub integration. However, layout options are limited, and you will have to export and upload images of your components. If you are looking for an efficient and extensive tool for documenting designs, you might want to look at other options.

Notion

In short Notion allows you to build your own wiki, just as Confluence does. That makes it a multi-purpose tool that can be used for project management, documentation, task tracking, and also as design documentation tool. While it is not as established as Confluence, it natively embeds Figma, Framer, Invision, Miro, Github Gists, CodePen, and a few others.

Currently, Notion does not yet provide an API which makes it hard to connect to any custom development integration, but apparently it is on the roadmap. However, little is known yet about its performance at scale. A good reason for large teams to stay with Confluence instead. Better the devil you know, than the devil you don’t.

BONUS: Storybook

Storybook

Storybook is a tool where developers can develop and store UI components. It also allows for documenting these components and embedding both Figma and Adobe XD designs. While Storybook is not meant to be purely Design System Documentation Tool, it might really help with embedding your Design System into the developing process. At Hike One we often combine it with Zeroheight for a less technical oriented presentation of the system.

‍

So which tool?

As you can see, each tool has its own features, strengths and weaknesses and it really depends on your needs to find a tool that is fitting. So ask yourself some questions. Do you use Sketch, Photoshop or Figma? Are you working closely with developers? Do you want to integrate marketing? Will your design system be static or dynamic?

This article helps you in getting familiar with the possible tools. But you will determine the best tool for yourself by answering your own questions and reflecting on your own needs.

At Hike One, we constantly help out companies figuring out what they need. But we don’t stop there; we can also help you set up, work out and implement digital dreams like design systems. Want to know more? Just drop us a line.

‍