The Design Tokens Practice
  • 27 Jan 2023
  • 1 Minute to read
  • Dark
    Light

The Design Tokens Practice

  • Dark
    Light

Article Summary

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 engine, 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.

For a visual explanation of the aforementioned process, check out this diagram:


Was this article helpful?