Last updated
Was this helpful?
Last updated
Was this helpful?
The value of a Design Token defines what the design decision is and, in some cases, where the decision came from.
You might recall from our Intro to Design Tokens Guide that the Token Type determines what values are acceptable.
For example, a hard-coded Value of #22c55e is possible when the Token Type is color, but not when it is fontFamily.
Before you jump into Token Types, here's an overview of the terms and capabilities of Token Values you'll see across our guides.
Once you understand whats possible you'll be able to craft Token Values that will help you work smarter, scale faster, and manage less components.
These terms are not the only way to describe Token Values; they are the labels the Tokens Studio team uses for simplicity across our documentation.
If your team uses different descriptive terms, that's totally okay!
When you write a Token with an exact value that doesn't require any work from a tool to interpret it, we call that a hard-coded value.
Each Token Type has different specifications about what kind of hard-coded value is allowed based on its properties which are defined in the W3C specifications for Design Tokens, managed by the Design Tokens Community Group (DTCG).
Here are some additional terms related to hard-coded values that might be helpful:
When you write a Token with a value including the name of another Token wrapped in curly brackets, we call that a reference, some folks call it an alias.
For example, {colors.green.dark.1200}
Working with References is one of the main advantages of working with Design Tokens!
→ Jump to the Token Values with References Guide for more details.
You can write the value of your Token to include a math equation.
For example, to calculate a border radius of a focus ring the value of your Token could be
Working with Math to calculate Token Values is a powerful feature supported by Tokens Studio.
→ Jump to the Using Math in Token Values guide for more details.
The exact value as it is written, which could show referenced tokens, math equations, etc. is called the Raw Value.
For example
{green-500} is the raw value of a Token with a reference to another Token.
#22c55e is the raw value of a Token with a hard-coded value.
The final value of the Token which may be a result of inheriting its value from another Token, or calculating its value from a math equation is called the Resolved Value.
For example
A Token with a math equation as its raw value of 16 + 4 would have a resolved value of 20
A Token named green-500 with a raw value that is hard-coded as #22c55e would have the same resolved value #22c55e
A Token named success-default with a raw value referencing the {green-500} would have a resolved value of #22c55e
Take a look at the image below showing the color Tokens applied to a button label and see if you can identify:
Which Tokens have a hard-coded value?
Which Tokens are referencing another in its value?
What is the raw value of each token?
What is the resolved value of each token?
From the Tokens Page of the Tokens Studio Plugin for Figma, there are three places to see the value of a Token.
Token data on hover
Token form
JSON file
Hover on an existing Token to view its data. The value appears as the second piece of data in the list under the Token Name.
If the Token has a value with a math equation or references another Token, the resolved value appears below the input.
If you have edit permissions, you can make changes to the Value using the input. Be sure to save your changes using the bottom button when you are finished.
Use the Token View Toggle see your Tokens written in JSON code files.
If you are comfortable working in code (and have edit permissions), you can edit Token Values in the JSON view.
Jump to the guide on JSON view for more details by selecting the card below.
JSON ViewRecall that Token Names within each Token Set must be unique. Token Names in different Token Sets can be identical, which provides the basis of Theming.
If you have more than one enabled Token Set with the same Token Names, how does the plugin know which resolved Value it should inherit?
The status of Token Sets
The position of Token Sets
The plugin considers all Token Sets when inheriting the value from a Token being referenced.
Token Sets with an enabled status are preferred, then sourcethen disabledis last.
If there is more than one Token Set with the same status, the Token Set in the lowest position will `win`.
Jump to the guide on Token Values with References for more details by selecting the card below.
Token Values with ReferencesWhen you apply a Token to a design element in Figma, the resolved value is applied to your chosen design property and displayed in Figma's UI. Each Token Type has different options that map to corresponding properties in Figma.
When you export your Tokens as Styles or Variables, the resolved value is reflected in the matching Style or Variable.
If you are using values that aren't suppored by Figma, the plugin does all the work under the hood to convert them to something Figma can use. These nuances are described in detail in the guides for each Token Type.
Token TypesEach Token Type has specific Transforms to be aware of that ensure accurate resolved values that are usable in code.
Token TypesMentioned in this doc:
SD-Transforms - Read Me
Style Dictionary - Read Me
Design Tokens Community Group - W3C Draft
Design Tokens Community Group - 3.8 Reference Alias
None yet!
Tokens Studio Plugin GitHub - Open issues for Token Values
Tokens Studio Plugin GitHub - Open issues for String Values
None yet.
For example, #22c55e is a hard-coded hex-code value for a .
For example, the hard-coded string value accepted for a is different from a .
If the value of the Token is , it will appear as entered.
If the , the appears on the left, the on the right.
Right click on a Token Name and select Edit to view its properties as a form. The second input displays the .
The will appear in the code file. The are not shown in the JSON view.
In the example below, the Color Tokens are inheriting their value from the theme-colorTokens being referenced as their . The change based on the position of the themeToken Sets. Whichever Token Set is lowest in the list on the left passes it's value.
💡 Something to share?
Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.
💌 Visit to contribute or subscribe to updates.
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
greenscale. On the right right, it is referencing a Token from a greyscale. value of a hex code is shown under the Token Name. value of a reference to a Token is shown under the Token Name. The resolved value it inherits from the Token being referenced appears on the right side. 
