Intro to DSM design tokens

What are design tokens?

Design tokens are platform-agnostic variables that represent the look and feel of your brand and product. They constitute the atomic building blocks of your design system and can be used to define colors, text styles, spacing, and other property types. They provide the foundation for theming and design process automation.

We can further define design tokens as named entities that store visual attributes and are platform-agnostic:

• Named entities: Tokens consist of a name and a value.
• Store visual attributes: Tokens represent visual attributes such as color, spacing, line height, elevation, and animation time.
• Platform-agnostic: Tokens are an abstraction layer on top of platform-specific variables. They create a common language for design properties independent of the implementation framework.

With DSM, you can build documentation for your design tokens that lives alongside all the other elements of your design system.

The Design Tokens Practice

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

1. Centralize
   1. Manage design tokens in a single place in a platform-agnostic format (e.g., JSON or YAML).
2. 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.) 
3. 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.

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