Organizing Design Tokens
This article applies specifically to the new DSM. If using legacy DSM, check out this article instead.
With DSM, you can organize tokens sets into folders. This article walks through how to manage tokens sets with folders.
Creating a tokens folder
To create a tokens folder:
- Open your design system and navigate to the Tokens page.
- In the left-hand navigation, click Add > Folder.
- Type a name and press Enter.
If necessary, you can add a second level folder within any existing folder.
Organizing sets into folders
To move a tokens set to a folder, hover over the set in the left-hand navigation. When the reorder control appears, click and drag the set into an existing folder.
)
Deleting a tokens folder
Deleting a folder also deletes any nested folders or tokens sets.
To delete a tokens folder:
- In the left-hand navigation of the Tokens page, hover over a folder and click the action menu.
- Click Delete.
- To confirm, click Delete again.
)
Renaming a tokens folder
To rename a tokens folder:
- In the left-hand navigation of the Tokens page, hover over a folder and click the action menu.
- Click Rename.
- Type a new folder name and press Enter.
Best practices for organizing tokens
For examples of how to best organize your tokens, check out the following resources:
- How to manage your Design Tokens with Style Dictionary by Cristiano Rastelli
- The Style Dictionary examples. Specifically, check out the advanced / multi-brand-multi-platform example.
- Sprout Social's Seeds design system tokens. The team organizes token types into separate packages and uses Lerna to manage inter-package dependencies in a mono repo.
