Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Design Tokens Management in DSM

Follow
The Design Tokens feature is currently in beta and is available to a limited number of users. Please note that the functionality of this beta feature is subject to change.

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 a purpose-built “CMS for tokens.”
  • 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.

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.

Additional documentation

To continue learning about the Design Tokens beta, check out these other articles:


Was this article helpful?

Still have a question?

Contact Us