Managing Design Tokens in DSM
  • 02 Feb 2023
  • 1 Minute to read
  • Dark
    Light

Managing Design Tokens in DSM

  • Dark
    Light

Article Summary

This article applies specifically to the new DSM. If using legacy DSM, check out this article instead.

DSM helps system editors with the first step of the design tokens practicemanaging 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. (Use this example script to see it in action.)

For an illustration of the design tokens practice with DSM, check out the following diagram.

Tokens format and naming structure

DSM uses the CTI naming convention and is compatible with Style Dictionary, the popular open-source tokens build framework. Style Dictionary was built at Amazon and is used successfully by many teams. It can transform design tokens to many common platforms and technologies, including CSS, Sass, iOS, and Android.

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. They can also add custom transformations as needed.

To learn more about the format, check out the Style Dictionary documentation.


Was this article helpful?