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


Managing Design Tokens in DSM

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.


Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

InVision Design System Manager gives you one centralized place to maintain all of your brand and UX components across design and code–providing the speed and confidence to power design at scale.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo