Token Anatomy - Value

The value of a Design Token defines what the design decision is and, in some cases, where the decision came from.

Value = What was decided

The Values that are possible for a Token are determined by itstype.

For example, a hard-coded Value of #22c55e is possible when the Token Type is color, but not when it is fontFamily.

The hard-coded values define what the design decision is, and the specifications for what values are accepted for each Token Type is defined by the Design Tokens Community Group.

Values that reference another Token

While it's helpful to give a human-readable name to a hard-coded value, the real power of Design Tokens comes from referencing another Token.

If you write the Value of a Token as the name of an existing Token in the system wrapped in curly brackets, it will inherit its value from the referenced Token.

For example, looking at the value of a Color Token applied to the label of a button component, you can see it has a value of {brand.colors.success.on-success}and same value of #b1f1cb.

So if you were to ask yourself, "where did the label color decision for the button come from?" the answer is, "it's coming from my band decisions for success colors".

Values that reference another Token define where the design decision came from.

Scaling systems with thoughtful references

The ability to reference another Token as a value creates a flexible and dynamic system which scales very quickly.

For example, if you decide that the text for success elements should be white instead of a light green, you only need to change the value of one Token (the {brand.colors.success.on-success} Token), and all components referencing it will change.

Scaling systems with math

In addition to hard-coded and references to other Tokens, Tokens Studio also supports math equations as the Value in compatible Token Types.

For example, you can create a Typography scale which is customized for different view-port sizes using a math equation.

Summary

To sum it all up, the power of a Design Token lies in the flexibility of its Value.

For design systems that support multiple themes, products, brands, or clients, using Token Values effectively means managing more design assets with the same components and minimal effort.

If you are ready to jump into Tokens Studio, this guide will through the more technical nuances of each Token Value you can work with in the Plugin for Figma.

Up next - Description

Next, let's explore the description of a Design Token as this anatomic property can help provide additional context about your design decisions.