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


The Design Tokens Practice

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:


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

Learn about InVision DSM, the design system platform for collaborative teams. Find the plan that's right for you and your team and set up your DSM organization.

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