Search

Documenting design tokens

Vinh
Vinh
  • Updated
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 managerToken source examples3. Click Add tokensTokens block4. Select the tokens you want to displayTokens to pick from token manager5. Your tokens are displayed in zeroheight!Tokens displayed in table view in styleguide

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 circleToken hovered over
  2. Select Remove Token selected to be removed
  3. Your token has been removed from your displayTable view without removed token

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:

Was this article helpful?