DSM helps system editors with the first step of the design tokens practice—managing design tokens in a platform-agnostic format, in a single place. Specifically, DSM provides the following benefits:
- Tokens editor. Edit tokens in table mode with auto-suggest and cycle detection.
- Auto-complete for token values. Use the table editor's auto-complete feature to quickly create token references while eliminating errors and typos.
- Easily navigable tokens dependency graph. View the token reference list and count, and click to follow links to referencing tokens.
- Viewing and editing tokens in JSON. Toggle between a table and JSON view, plus edit JSON with confidence using a built-in validator for JSON and Style Dictionary format.
- Versioning. Create snapshots of your entire design system—including tokens, documentation, and design libraries—so you can always refer to a stable version where everything is in sync.
- Centralized documentation. Add tokens to your DSM documentation site, making them accessible to both designers and developers.
- Automating via an API. Access your data programmatically with an API to speed up your change management process.
A - Tokens: Access Tokens via the top menu for a design system.
B - Organization: You can organize tokens sets into folders, available via sidebar navigation and add additional documentation to the design systems site.
C - DSM Tokens API: Select </> View JSON to automate the process. The DSM Tokens API provides programmatic access to your tokens. It allows you to download a ZIP file that includes the entire folder tree, where each token set is available as a JSON file.
D - Tokens editor: The table is where you add and edit tokens.
You can add a value by typing it in.
You reference an existing token by selecting it.
E - Referencing: DSM lets you know which tokens reference existing ones.