Learn InVision Design System Manager

Design tokens

Copied URL to clipboard

Tutorial Breakdown

Design tokens elegantly bridge the gap between design and development, making everyone’s life a little easier.

Design tokens are named properties that represent visual attributes in your system, such as colors and text styles.

DSM exports design tokens into different file formats that developers can access programatically. This allows developers to propagate the visual properties of your system into different applications and platforms—so when your design team updates a color for example, every instance of that design token will update to reflect the change in code.

Transcript

InVision DSM doesn’t just keep designers connected to one another—it also bridges the gap between design and development using design tokens.

Design tokens are named properties that represent visual attributes in your system, such as colors and text styles. DSM exports design tokens into different file formats that developers can access programmatically. This allows developers to propagate the visual properties of your system into different applications and platforms. When your design team updates a color, for example, every instance of that design token will update to reflect the change in code.

To access design tokens for your library, click the Design Tokens button in the top right corner, and then choose your desired code format from the left-hand side.

Each format page includes files with your up-to-date style assets in the relevant format. You can either download the files from the browser or copy a link directly to the code itself. You can also grab a ZIP file containing all of the icon assets from the library directly from here.

Let’s look at an example of how design tokens make life easier.

Imagine your brand uses a yellow with the hex value FFFF00. Because this is your standard brand-yellow, your development team then inserts this hex value into their code in dozens or hundreds of places across your product line. Now, if you ever wanted to change the hex value for that yellow, your developers would have to track down every place that value appears and update it manually.

But by using design tokens in DSM, you can associate that hex value with a name—like “warning yellow.”

The developer can then reference “warning yellow” in their code, rather than the hex value itself. Then, if your design team were ever to push a change to “warning yellow” inside DSM, the developer can choose to pull that change and have it automatically update the look of “warning yellow” everywhere it appears in their code.

We’re just getting started with the potential of design tokens and their implementation inside DSM, and we’re looking forward to bringing you more features to further close the gap between design and development.

Read More

Live Training: Get started with InVision DSM

Make the most of your design system with a live DSM webinar that covers best practices, practical advice, and more.

SCHEDULE YOUR SESSION