Learn

Documenting Design System

"A simple style guide is like a diagram of all the elements that make up a piece of IKEA furniture without the instructions telling you how to assemble them."
— Andrew Couldwell, Laying the Foundations
Toolabs DSM provides an easy to use built-in editor to document your design systems.
First of all, our editor is similar to other rich-text editors with easy text formatting features.
In addition to plain text, it lets you embed media content from several sources, such as Unsplash images, Youtube or Vimeo videos and, Lottie animations .
What makes our editor special is the design system widgets that you can embed into your documents as easily as using other media objects. These widgets are connected to your design system repository and therefore they are in full-sync with your design tokens and components . With this feature, your documents are always up to date with your design system.
You will find more information on section for Design System Widgets.
When you create a new design system, a default document is automatically created with predefined pages for each token type. You can either customize these pages if you like or delete them and start from scratch.
We are planning to make it possible to build multiple documents for the same design system library. Therefore it will be possible to publish one document focused on the needs of designers, one for developers or others for different parties with different focus areas on the same design system.