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
$primarydesign token can store the#FF6358value.-
A collection of indivisible values—for example, the
$Header 1design token can store the values for multiple properties that define specific typography.Property Value font-family Robotofont-style normalfont-weight 300font-size 28pxline-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.