About Design Tokens

Design tokens are an integral part of any design system because they make the transformation of a design into a product easier both for designers and developers.

In the context of Unite UX, design tokens are named collections of properties that store specific values for the visual design. They are similar to the styles in Figma.

A design token can store any of the following elements:

  • A single value—for example, the $primary design token can store the #FF6358 value.

  • A collection of indivisible values—for example, the $Header 1 design token can store the values for multiple properties that define specific typography.

    Property Value
    font-family Roboto
    font-style normal
    font-weight 300
    font-size 28px
    line-height 37px

You can use design tokens to represent anything in the visual design such as colors, typography, effects, and more. They allow you to scale changes—you can change the value of the $primary design token from #FF6358 to #28B4C8, and all components that have the $primary color will change. If you use local values instead of design tokens, such changes are extremely time-consuming.

Unite UX relies heavily on design tokens. The Unite UX Plugin for Figma extracts the design tokens from the design and imports them in the Unite UX project. This allows developers to directly use the design tokens to style the UI components.

Design tokens provide the advantage that Unite UX can update them whenever the designer implements a design change. All the designer needs to do is to re-export the updated frames to the Unite UX project. The developer doesn't need to configure the colors again if the designer changes the value of the $primary design token, for example. Unite UX will do this automatically because it detects the change in the $primary design token.

In this article
Not finding the help you need?