Contents x
    Populating your Tokens section
    • 01 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Contents

    Populating your Tokens section

    • Updated on 01 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Article Summary

    Tip: DSM uses the CTI naming convention and is compatible with Style Dictionary, the popular open-source tokens build framework. Adopting the Style Dictionary format means DSM editors don’t have to create token transformations to different platforms from scratch. Style Dictionary offers great customizability and extensibility so developers can control the desired syntax of their platform-specific files and new token types.

    Building your Tokens

    ➕ Adding folders and token sets

    Tokens in DSM are organized into sets. Tokens sets correspond to JSON files with multiple tokens. You can group tokens into a folder before grouping some into a token set.

    To create a new tokens set:

    1. Open your design system in the DSM web view and navigate to the Tokens page.
    2. In the left-hand navigation, click Add > Tokens set.

    ➕ Adding a new token

    To add a new token:

    1. Open a tokens set and click Create new token.
    2. Add a Name and Value for the token.
    3. Click the checkmark icon to save.

    Once added, tokens can be renamed, reordered, or deleted. 

    ➕ Creating a reference token

    To create a token reference (often called an “alias”), enter the name of the referenced token in the value field. If the referenced token already exists, select it from the auto-complete drop-down and click the save icon.

    After creating the token reference, it will appear as a link in the Value column. Hover over the link to see the current value of the referenced token. If the referenced token is defined more than once (e.g., to support themes), the hover state will show all possible values.

    Once added, references can be removed or changed. When you remove a token, DSM will replace token references with the removed token’s value.

    Was this article helpful?
    What's Next