Hands-on Design System Documentation — Part 2: Token Widgets
Learn by Making with Toolabs DSM
“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.”
Design System Widgets
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.
Displaying Tokens
Token widgets let you pull and list design tokens from your design system.
When you add a token widget, the wizard then lists the token types. Selecting a token type will add the widget displaying all the tokens in your design system. Then you can customize the appearance and arrange the token items to be listed.
Customizing Appearance
You can customize the appearance of tokens from the top toolbar which is shown when the mouse is over the widget.
Customizable options include alignment, width, height, and list modes which vary according to the widget type.
Adding more options is on our roadmap. When Toolabs component designer module is available, it will also be possible to design your own Token Widgets and use them in your documents.
Arranging Token Items
By default, a token widget displays all of the design tokens of the selected token type from your design system.
If you want to show only specific tokens, then you need to apply filters from the configuration panel on the right by clicking the Token Options button on the top toolbar.
The configuration panel lets you filter and sort the items to be listed in the widget.
If you grouped your design tokens under categories in your design system, then you can also filter the tokens by those categories. If you add to or remove any token from those groups, the change will automatically be reflected here.
You can also select to show only Semantic Token Aliases from the configuration panel and then apply filter and sorting options in the same way. You can learn more about Semantic Token Aliases here.
Applying Theme Options
If you want to know more about Themes in Toolabs DSM , first check out the section for Creating Themes.
By default, token widgets use the active global theme of the document. But it is possible to break this in two ways :
➥Open the token configuration panel from the top toolbar, select the Specific Theme option and then switch the theme from the Theme Switcher to be used for the tokens in this widget.
➥Open the token configuration panel from the top toolbar, select the Theme Selector option. This option will show the Theme Switcher control above the tokens in the widget and therefore the user of the document will be able to manually switch the theme for tokens in this widget.
Exporting Tokens
Token Export widgets are similar to display widgets except they show and let the user copy or download the code for the tokens in the widget.
The widget provides the option for generating code in various formats: CSS, Less, Sass, JSON, YAML, JavaScript, Swift, or Android.
Naming and other formatting parameters are taken from the configuration made in the Export Tokens page of Toolabs DSM.
Color Contrast Accessibility Widget
This widget lets you show the color contrast ratio between two selected color tokens. The ratio is calculated on the fly. Therefore, if the value of any of these tokens changes, the ratio will be recalculated and show the current accessibility level.
Part 1: Hands on Design System Documentation — Basics
To learn more about Toolabs DSM for Creating Themes, Exporting Tokens, Querying Tokens with GraphQL and Plugins for Figma and AdobeXD, visit the learn center:
