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


The Design Tokens Practice

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.

The design tokens practice can be broken down into a few main steps:

Centralize

  1. Manage design tokens in a single place in a platform-agnostic format (e.g., JSON or YAML).

Transform

  1. Use a build engine that takes design tokens as input and transforms them into platform-specific or framework-specific style files (e.g., CSS, Sass, iOS, Android, etc.). You can develop your own enginem, or you can use existing ones like Style Dictionary and Theo.
    InVision DSM currently supports the Style Dictionary format.

Create a pipeline to your applications’ code

  1. Add the generated platform-specific style files to the code base of your applications. How you do it in practice depends on the platform and your existing process for managing dependencies. A common method is to version and distribute style files as NPM packages.
  2. Use the generated platform-specific variables to style your applications.

Once you've completed that setup, you can implement a change across any number of platforms with a single update of a token.

As tokens change, pass the new token set through the build engine to update the platform-specific style files. After QA, release a new version of your style libraries. Application developers will then update dependencies just as they would for other type of changes and release them to production using your existing QA-production process.


Was this article helpful?

Still have a question?

Contact Us