DSM Design Tokens

[[ section.name ]]

[[ subSection.name ]] [[ articles[subSection.id] ? "(" + articles[subSection.id].length + ")" : "" ]]

Intro to DSM Design Tokens

As digital transformation accelerates, companies face the challenge of scaling design across an increasing number of screens, tech stacks, and product teams. As the product footprint grows, propagating even simple design decisi...

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

The Design Tokens Practice

The design tokens practice can be broken down into a few main steps: Centralize Manage design tokens in a single place in a platform-agnostic format (e.g., JSON or YAML). Transform Use a build engine that takes design tokens...

Managing Design Tokens in DSM

This article applies specifically to the new DSM. If using legacy DSM, check out this article instead. DSM helps system editors with the first step of the design tokens practice—managing design tokens in a platform-agnostic for...

Creating Design Tokens

This article applies specifically to the new DSM. If using legacy DSM, check out this article instead. With DSM you can quickly create and edit design tokens, allowing you to build out a robust documentation site for your desig...

Organizing Design Tokens

This article applies specifically to the new DSM. If using legacy DSM, check out this article instead. With DSM, you can organize tokens sets into folders. This article walks through how to manage tokens sets with folders. Crea...

Using the Design Tokens API

This article applies specifically to the new DSM. If using legacy DSM, check out this article instead. The DSM Tokens API provides programmatic access to your tokens. It allows you to download a ZIP file that includes the entir...

InVision Learn

[[ slotProps.course.title ]]

[[ slotProps.course.description ]]

Learn [[ slotProps.course.customFields.topic[0] ]]