Using design tokens

In design

NOTE: We are currently piloting using design tokens in Figma. We're asking that only those part of the pilot use the library. Learn more in the issue . More details about officially using design tokens will be coming soon, but in the meantime carry on with your typical design process.

Design tokens are used by applying Figma variables to elements on the canvas.

We've scoped these Figma variables by limiting the properties they can be applied to. This helps cut out the guess work when designing and supports recommended usage. For example, text.color.default can only be applied as a fill to a text element and not to a stroke or shape layer.

In code

NOTE: A pilot for design tokens in code has been completed as part of this issue , and we're currently doing more exploration with a small subset of components as part of this issue . More details about officially using design tokens will be coming soon, but in the meantime carry on with your typical development process.

Patterns and matching

TODO:

Document token pairing for color patterns and token matching for conceptual patterns. View issue