The best tools for documenting design systems
Which tool should you use when setting up a design system?
Which tool should you use when setting up a design system? Since there are so many options, it is difficult and time consuming to properly answer this question. Here at Hike One we work on implementing design systems for a diversity of clients: large international companies, municipalities and smaller local players. Each one of them has their own culture, their own design process, their own challenges and, of course, their own budget.
Four Types of Tools
Before diving into each individual tool, let’s consider what different types are available. We discovered that there are four types of tools that can be used for design systems:
- Design tools — 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 X. Interestingly, the last option combines development with design by integrating code.
- Documentation tools — 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. Integration with design tools is nonexistent; so designers will have to create an image of each design (and update), and manually (re)place them on the website. Some examples are Gitbook, VuePress, Fractal and Confluence.
- Design documentation tools — 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.
- Custom platforms — 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.
Comparing Design System Tools
In this article, we will focus on tools that allow you to document your design on an accessible website, on multiple pages with pictures 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, the option to personalize the tool’s appearance with your brand style and the ability to switch languages. 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.
Download the high resolution comparison table
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 now also has a 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 Photoshop with the help of their plugin (similar to Frontify) or with Figma 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 (similar to Zeplin).
Another feature for developers are the code snippets that can be added. Zeroheight also allows you to work on drafts and release them as versions. You have reasonable freedom to create your own page layouts, within the restrictions of set elements and the rigid page tree.
Design System Manager
InVision’s tool for managing your design system is primarily focused on the Sketch Library. Where Sketch’s own Shared Library content is hidden behind menus and buttons, content in the Design System Manager (DSM) is shown in an attractive and clear organizer. This manager can also be accessed online and is open to anyone. To use the library from the manager with Sketch, you will need to pay an extra charge per user per year, on top of your InVision license.
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. Developers can download style elements in several formats, but adding code samples of actual objects is, for now, only promised.
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. This platform offers a variety of plugins and options to customize your pages or pagetree, and integrate development. The only plugins missing are the ones integrating Sketch, Framer or Figma. That means you will have to export and upload every component you want to document.
Just like Frontify, you can duplicate sections to create a version. Confluence, however, also 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. Another advantage is its integration with Jira.
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 can 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.
Lucid
Need a simple template for your project? Then save yourself the time and effort of an elaborate tool. The website, meant for design systems, has a fixed layout and limited options to fill designs and documentation. The options allow little freedom for your own structure, but it does enable developers to add code snippets.
Similar to Zeroheight, Lucid is constantly updated with new features and they have promised that plugins for Sketch and Adobe XD are coming. For now, though, you will have to manually export and upload images of your components, and there is no versioning.
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.
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.
About the author:
Arjen Wiersma is an interaction designer at Hike One, skilled with video and photography, loves being in nature and enjoys tinkering on his car, motorcycle and house.
This article was originally published here.
