Documenting design tokens
Brienne Wong
This is available for all non-legacy plans.
You can document your design tokens in your styleguide. This allows you to centralize everything in one tool. Once you’ve added your token set to your organization, you can display it as a table, in JSON format or as ‘@ mentions’ inline within your text.
Adding a tokens table
1) In your styleguide page, open Design tokens from the toolbar
2) Select Token manager
3) Click Add tokens
4) Select the tokens you want to display
5) Your tokens are displayed in zeroheight!
Removing tokens from the table
You can remove a token from your display.
1) Hover over the token you want to remove and click the transparent circle
2) Select Remove
3) Your token has been removed from your display
Inline design token mentions
zeroheight allows you to reference individual tokens within the text of your documentation. Known as as ‘inline token mentions’, these elements can be inserted by typing the ‘@’ symbol when adding text to the page.
After typing ‘@’, followed by a search term, you’ll see a dropdown appear with a list of matching tokens from all available token sets. Initially, up to five tokens will display from any token set, but you can expand this to show all tokens from a set by clicking ‘more results’.
Select your desired token from the list and it will be inserted into the documentation. Color tokens will display a color swatch representing the associated value, whereas other token types will show a generic token icon. Hover over the insert to reveal the text value.
When a token set is published, all relevant inline token mentions will be updated with the new value automatically. For tokens which no longer exist in the set, the inline mention will be ‘orphaned’, displaying a ‘token not found’ message. These will have to be removed and re-inserted to fix.
The inline token mentions can be interacted with as though they are normal text elements. This includes text selection, copy/paste, and removal with backspace.
See also: