Chapter 6
How will other teams contribute?
How detailed will your instructions be?
Who are our consumers?
How many design system maintainers do we have?
Also, consider the following:
Ease of use
How easy is it to embed designs, code, downloadable assets, connect pages, etc.
Integration with other tools
How easy is it to connect with other tools? Is it plug-and-play, or is there much going back and forth for things to work?
Collaboration
How easy is it to add new team members? How expensive is it to add the whole team? Can you add specific rules? Can you lock certain content (for public use, for example)?
Built-in resources (templates, guides)
When you need to follow legal rules
Tools
Basic
Notion, GitHub Pages, Airtable
Advanced
Custom
Basic

When you don't have a fully-fledged design system yet, you can create a robust, automated table in Airtable with the list of design components with status for the platforms you serve.
Airtable is a spreadsheet-database hybrid. It provides a powerful API and built-in support for several popular apps. You can add triggers when a record is updated or created or when a record matches conditions.
🌈 If you want the Design Component Airtable template, click here.

Notion works fine if you want a simple version of the design system. It's impossible to connect Figma files or Storybook easily, but it can work well if you only want to describe components. You might use it as the learning phase to see what works best and then upgrade to another third-party app or even a custom one.
You can duplicate a template for Design system from Notion's page. Open it.

You can host GH Pages directly from your GitHub repository and just edit, push, and your changes are live. You may have to spend some time teaching designers how to use Github, but it is relatively easy. The downside is that this differs from using an editor, and you will have to add links manually or embed stuff from Storybook, Figma, etc.
"Off-the-shelf" solutions

Zeroheight is a central hub for designers, engineers, and product and marketing teams, and their editor allows you to add or edit pages. Some predefined templates help set up the design documentation for the first time, like dos and don'ts, where to add Storybook links (for code), how to add Figma links, how to describe the component, etc. Once ready, you can publish the site and share it with others (internal or external).

Supernova is a new player in the design systems field, but a very powerful one. They are focusing a lot on design tokens, and recently, they added themes too. At first glance, it might look like Zeroheight app; however, their no-code features help a lot when adding new sections. They also offer a built-in code editor that allows you to render live code examples directly in your documentation.

Knapsack is another design system platform that unites code and design, so developers and designers can work together in real-time. You can host live-rendered components, use multiple editors, developer contribution tools, and even prototypes.

Specify is a design API connecting all the tools within organization’s design system. It allows you to collect, store, and distribute design tokens and assets—automatically. You can get automatic Pull Requests for every design update on your GitHub repository. They currently support Figma and provide a GitHub app, an API, and a CLI to match the developer's needs.

Backlight combines design tokens, components, stories, and tests. To add the content, they've built embedded components and playgrounds. It's compatible with most frameworks. You can review visual pull requests and embed designs (Figma, Adobe XD, ...) or components via links. It's possible to manage versioning on repositories.

Storybook is a tool for building and testing user interface components in isolation. It allows developers to create a library of components that can be used throughout an application and provides a way to preview and interact with those components live. It helps to ensure that each component works correctly and that changes to one component don't break other application parts. However, if we want to make a design system accessible to everyone and add written guidelines, the StoryBook itself is not enough. We will have to embed "stories" in another tool, such as Zeroheight.
Custom solutions

Figma offers Plugin API, Widget API, and REST API. There are many options to automate tasks, add functionalities and improve your workflow. You will move mountains by using Figma API and your custom code for the documentation site. And piles of money, too. (Yep, it takes time and team effort).

If you are not using Figma, Sketch also offers API, so you can connect it to your tech stack.
Vercel is another platform that helps people build, host, and deploy websites and web applications.

You can use Netlify and combine tools and APIs manually. You have all the freedom to build the custom documentation site, but be careful when making the documentation for the first time because you can quickly come to analysis paralysis and spend a lot of resources, even for no-brainer stuff.
Last tips
Make it logical
Before you start uploading your stuff and code, think about the structure and the language. Make it predictable and discoverable. Make sure everyone understand what you are writing about.
Do it iteratively.
Try out different approaches, put it in the wild, collect feedback and adapt quickly. Feedback loop is important, since organization's needs will change and grow over time.
Make it relevant
Write instructions in human language.
Make it searchable
Save the user's time and make it easy to skim through the docs.
What to put in?
Components
Documentation structure
Getting started
What’s new?
Brand
Design Tokens
Components
What’s new?
Categories
Marketing
Categories
Marketing
