Contact
Vraag jij je af welke tools je het beste kan gebruiken voor je design system? Er zijn veel verschillende opties op de markt, en het is niet makkelijk de perfecte tool voor jouw situatie te vinden. Om het je gemakkelijk te maken hebben wij onze eigen favorieten op een rij gezet. Hike One helpt verschillende klanten bij het opzetten en onderhouden van hun design system — grote corporate, lokale overheid, start-up, niets is ons vreemd. Elke klant heeft zo zijn eigen manier van werken, met unieke culturen, ontwerpprocessen, uitdagingen, en natuurlijk budgetten. We hebben daarom allerlei opties en implementaties van design systems kunnen uitproberen. Dus laten we samen uitvogelen wat er bij jou past.
Before diving into each individual tool, let's take a look at the various types of tools available for documenting your design system. There are four main categories of tools you can use:
Design tools are essential for creating your designs and managing digital assets. This is typically where you begin with building components, creating libraries, and all of the other elements of your design system. While these tools are intended for design, we sometimes also see designers starting here with the first steps of their documentation, including component behaviour and annotations. However, it's important to note that design tools are not specifically designed for comprehensive documentation. As your design system expands, the organisation may become more challenging and less structured. We advise to transition to a dedicated documentation tool once the foundational components are in place and your system begins to scale. But if there is nothing established yet, your current design tool is a great place to start.
Examples are Figma, Sketch, Adobe XD and Framer.
Documentation tools are accessible websites that anyone (with access) can easily use to view information. Because they are hosted on the web, they are accessible from anywhere on any device. They offer multiple pages and layers for organising and structuring documentation, making it easy to create structured overviews. However, while many of these tools excel in integrating with development tools, they often lack options for integrating with design tools. Some offer some plugins but in our experience the implementations are limited or unstable. That means that a lot of the time you will have to upload exports of your designs and update these every time you make a change. There are also no options to import stuff like tokens. Despite these limitations, they remain strong documentation tools. Especially if your team is still doubting the purpose of this whole design system documentation thing or if you do not have the budget for design documentation tools, this can be a great option.
Examples are Gitbook, Notion, Nuclio and Confluence.
Nowadays there are also a lot of tools out there that are focused specifically on design documentation. They provide content elements that are tailored for showcasing brand and design, making sure that your designs are effectively displayed. Most of these tools even sync automatically with your design tool, making it a breeze to quickly set-up the system, upload new content and keep your design system up to date with the latest changes.
Examples are Zeroheight, Supernova & Lingo
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 tools (unless you have 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.
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.
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 personalise 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. The pricing models for tools also differ: some tools offer specific editor/viewer seats, which might turn out to be cheaper if you don’t need editing rights for the entire company. This makes it difficult to compare the prices here, so we suggest requesting price options for your context from your top three tools.
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.
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, you can work with versions, and uploaded content is instantly updated in the guidelines.
Although you can upload Figma files in Bynder, there is currently only a third party plugin, and it doesn’t allow linking files for automatic updating.
There is also no option for developers to show their code, although there are APIs and SDKs to build integrations on top of Bynder.
Confluence is a powerful documentation tool that has been used in the industry by both designers and developers for many years. The platform offers a variety of plugins and options to customise your pages or pagetree, as well as to integrate development. You can add columns to the pages, and there are over 80 types of content blocks you can use to display your content, providing you with a lot of flexibility.
However, none of these content blocks are designed for displaying design system elements or designs in general. While there are many elements you can use to create what you want, it requires a bit more time and creativity. Currently, the Atlassian community has developed a Figma plugin that lets you embed Figma links, allowing you to preview the files, though it only shows previews and does not allow you to specify frames or components. This means that if you want to include the designs, you either need to link to the files or export the designs and upload them to Confluence.
Geared towards Digital Asset Management, the Swiss made tool Frontify offers possibilities to edit assets inside the tool itself. It can’t extract a design system from a design file, but it has a Figma plugin, allowing for live previews on a frame level. It can show custom snippets of code and a Storybook integration is available.
It offers pretty robust versioning on asset level, with an added comparison mode, but no snapshots on library level though. Sharing is simple and can be pretty granular through defining target groups. Integrated analytics allow you to keep track of the performance of your assets.
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.
A lightweight asset library from the creators of The Noun Project, Lingo allows automatic import of your design system from a Figma file. Options for sharing and managing assets are plentiful, as it automatically generates alternate file types for assets and allows for storing workfiles. Documentation options are basic though, and it offers no integration for external code.
Lingo offers versioning and releases on a kit level, but not on asset level. It does offer granular analytics, so you can keep track of the health of your library.
In short, Notion enables users to create their own wikis, much like Confluence. This makes it a versatile tool for project management, documentation, task tracking, and also design documentation. While Notion isn't explicitly designed as a tool for design documentation, it offers seamless integrations with platforms like Figma, Framer, Miro, GitHub Gists, CodePen, and others. Similar to Confluence, building a comprehensive design system in Notion may require some additional time and creativity, but we've already seen some impressive design documentation created on the platform.
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, visualisations, personal tasks and comments. They also support embedding designs from Figma, although your file has to be published in order to work. It offers version control on page level and supports code snippets.
Personalisable options, like your own domain or a custom theme, are not present. Also, the sharing options are limited, which might make it less useful for larger organisations.
Supernova is a comprehensive platform for design system documentation. It took us a bit longer to figure out how to set everything up due to the sheer number of features. However, once we got everything sorted, syncing new components, assets, and tokens became effortless.
Setting up the documentation looks similar to what we are used to from tools like Zeroheight. They especially excel in their token blocks, and they also offer the option to track your component health, which makes it really easy to look at next steps and ensure that your design system is up to date. It is also possible to embed Figma prototypes and files, but it is not possible to embed them on a component level. Instead, Supernova will import them as images.
What makes Supernova stand out are the separate design token, component, and asset overviews, which are distinct from the general documentation. The pipeline offers, among other things, the option to export those assets and tokens directly into code, presenting some interesting opportunities. Imagine updating a new icon directly into the code with the push of a button.
If you are working a lot with tokens and want to be able to work with the pipelines, Supernova can be a great option for you.
Zeroheight hosts an accessible design system website that syncs directly with your Figma, Sketch, or Adobe XD. It is super quick to set up your design documentation by syncing up your designs and utilising their clean content blocks. They offer some really nice content blocks to display components and other design elements. You have reasonable freedom to create your page layouts and a customisable tree structure based on categories, pages, and tabs. Zeroheight also allows you to work on drafts and release them as versions.
A great feature is the inspect mode for components, which shows the history of all your previous syncs with your design files and allows developers to see more details. Another feature for developers is the code snippets that can be added, using live HTML, CSS, and JS, a Storybook element, or any other code snippet.
As you can tell, each tool comes with its own strengths and weaknesses. Choosing the right one really depends on what you're looking for.
We recommend exploring specialised design system documentation tools like Zeroheight or Supernova. These tools are designed to streamline design work, making it a breeze to set up your design system and share it with your team seamlessly.
However, it's important to remember that what works for one team might not work for another. Every team has its own needs and preferences. Take the time to assess factors such as your budget, the number of users who need editing access versus those who only need viewing capabilities, and your plans for future growth. Additionally, consider features like token integration and compatibility with your existing design tools, as these can significantly impact your workflow.
If you have the resources and support, we definitely recommend investing in a design system documentation tool. But for instance, if your design team is still relatively new and not everyone is fully on board, starting with a tool you're already familiar with, like Confluence, could be a smart move. But the most crucial thing is to get started and to begin documenting your work. Use the tools you have available and go from there. Don’t forget, tools are just tools, you can always upgrade once your design system matures and you grow.
We hope this helps you get started. If you're still feeling overwhelmed, we at Hike One are here to assist. We specialise in helping companies figure out their needs and can also help set up and implement design systems. Want to learn more? Just reach out to us.
Feel free to contact me!
