Tokens Studio for Figma
  • Getting Started
    • Tokens Studio Plugin for Figma
    • Install the Figma Plugin
    • Pro Licence for the Figma Plugin
    • Join the Slack Community
    • Feature Requests - Featurebase
    • Changelog - Featurebase
  • Design Token Fundamentals
    • Intro to Design Tokens
      • Token Anatomy - Type
      • Token Anatomy - Value
      • Token Anatomy - Description
      • Token Anatomy - Name
  • Token Management
    • Token Types
      • Asset
      • Boolean
      • Border - Composite
      • Box Shadow - Composite
      • Color
        • Modified Colors (pro)
        • Gradient Colors
      • Dimension
        • Border Radius
        • Border Width
        • Sizing
        • Spacing
      • Number
      • Opacity
      • Other
      • Text (string)
      • Typography - Composite
        • Font Family
        • Font Weight
        • Font Fallbacks
        • Font Size
        • Line Height
        • Letter Spacing
        • Paragraph Indent
        • Paragraph Spacing
        • Text Case
        • Text Decoration
      • Composition (legacy)
    • Token Values
      • Token Values with References
      • Using Math in Token Values
    • Token Names
      • Token Name Technical Specs
      • Token Groups
      • Edit Token Names
    • Token Description
    • Token Sets
      • JSON View
  • Themes management
    • Themes (pro)
    • Themes that switch
  • Working in Figma
    • Variables and Tokens Studio
    • Styles and Tokens Studio
    • Export to Figma Guide
      • Export Options
      • Export Using Themes (pro)
      • Export Using Token Sets
      • Variables Skipped on Export
      • Styles with Variable References
    • Import from Figma Guide
      • Import Styles from Figma
      • Import Variables from Figma
        • Connect Themes to Imported Variables
        • Imported Variable Types and Token Types
    • Non-local Variables and Styles (pro)
    • Remove Tokens from Figma elements
    • Dev Mode in Figma
  • Settings Management
    • Plugin Settings
    • Base Font Size Setting
    • Token Format - W3C DTCG vs Legacy
  • Token Storage and Sync Integrations
    • Local Document - Figma File Token Storage
      • Figma Data Limits
    • Remote Token Storage Integrations
      • GitHub - Git Sync Provider
      • GitLab - Git Sync Provider
      • Bitbucket - Git Sync Provider
      • Azure DevOps - Git Sync Provider
      • JSONBin - Cloud Sync Provider
      • Supernova - Cloud Sync Provider
      • Tokens Studio Platform - Cloud Sync Provider
      • URL - Server Sync Provider
      • Generic Versioned Storage - Server Sync Provider
    • Multi-file Sync to Remote Storage (pro)
    • Manage Sync Providers
      • Edit Sync Provider
      • Change Active Sync Provider
      • Remove Sync Provider
    • Sync Changes to Remote Storage - Push and Pull
    • Branch Switching (pro) - Version Control
  • Inspect and Debug Tokens
    • Inspect Tokens
    • Remap Tokens
  • Transform Tokens for Development
    • Style Dictionary + SD Transforms
    • Official docs for Style Dictionary
  • Style Dictionary Playground
  • Troubleshooting
    • Reset Tokens from Dev Console
    • Tokens Studio Status
  • Open Source
    • Contribute
    • Shared Plugin Data
Powered by GitBook
On this page
  • Token Values in Tokens Studio
  • Common terms
  • Test your Token Value knowledge
  • Working with Token Values
  • Resolved value inheritance
  • In Figma
  • Transforming Tokens
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousComposition (legacy)NextToken Values with References

Last updated 1 month ago

Was this helpful?

Token Values in Tokens Studio

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 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.

Each of the 24 unique Token Types supported Tokens Studio has its own specifications on what values are allowed.

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.


Common terms

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!

Hard-coded value

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.

Here are some additional terms related to hard-coded values that might be helpful:

Numeric Value

A numeric value includes numbers.

Alphanumeric Value

An alphanumeric value includes numbers and letters that are not defined.

String Value

A string value includes letters and/or numbers that are defined in a particular way.

Syntax

Syntax is the way you write the value of the Token. The requirements for syntax change depending on the type of value and Token Type.

For example, spaces are to be avoided when writing the value of a Dimension Token which requires a unit 16px, but required between operators of a math equation 8 * 4

Unit

Unit is short for unit of measurement. Some numeric values require a unit, but not all.

For example 4px

Most popular units when working with Tokens are:

  • pixels px

  • rem rem

  • percentage %

References or Alias Tokens

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!

Math

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

{button.border-radis} + {focus.offset}

Working with Math to calculate Token Values is a powerful feature supported by Tokens Studio.

Raw Value

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.

Resolved 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

Test your Token Value knowledge

Take a look at the image below showing the color Tokens applied to a button label and see if you can identify:

  1. Which Tokens have a hard-coded value?

  2. Which Tokens are referencing another in its value?

  3. What is the raw value of each token?

  4. What is the resolved value of each token?

Hints if you need them

In the image below, the text color of the button changes when the value of the middle Token is changed to reference a greycolor instead of green .

  • The name of the Token is on the top line.

  • The raw value is below the name.

  • The resolved value is inside the color swatch.


Working with Token Values

From the Tokens Page of the Tokens Studio Plugin for Figma, there are three places to see the value of a Token.

  1. Token data on hover

  2. Token form

  3. JSON file

1. Token Data on Hover

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.

2. Token Form

The Token Form for each Token Type is unique, but value always appears as the second input.

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.

3. JSON File

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.

The JSON view functions similar to Visual Studio Code thanks to an amazing open-source contribution from a Tokens Studio community member. 🫶

Jump to the guide on JSON view for more details by selecting the card below.


Resolved value inheritance

Recall 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?

  1. The status of Token Sets

  2. 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.


In Figma

When 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.


Transforming Tokens

Each Token Type has specific Transforms to be aware of that ensure accurate resolved values that are usable in code.


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

  • None yet.

For example, #22c55e is a hard-coded hex-code value for a .

Each Token Type has different specifications about what kind of hard-coded value is allowed based on its properties which are defined in the , managed by the Design Tokens Community Group (DTCG).

For example, the hard-coded string value accepted for a is different from a .

For example, the accepts0.33 as a numeric value.

For example, the accepts Welcome back {name}as an alphanumeric value.

For example, the accepts underline as a string value.

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.

SD-Transforms -

Style Dictionary -

Design Tokens Community Group -

Design Tokens Community Group -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

W3C specifications for Design Tokens
Opacity Token
Text Token
Text Decoration Token
→ Jump to the Token Values with References Guide for more details.
→ Jump to the Using Math in Token Values guide for more details.
JSON View
Token Values with References
Token Types
Token Types
Read Me
Read Me
W3C Draft
3.8 Reference Alias
Open issues for Token Values
Open issues for String Values
hard-coded
Value references another Token
raw value
resolved value
raw value
raw value
resolved values
raw value
resolved values
Intro to Design Tokens Guide
Font Family Token
Color Token
Color Token

🐞 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

community Slack
submit it on our feedback tool
In this infographic, the Token examples on the right side highlight the Value. The top code block shows a hard-coded value. The bottom code block has a value that references another Token.
An infographic example of documenting a Token applied to the text layer of a button label requiring different values depending on the defined Token Type.
An infographic example of documenting a Color Token applied to the text layer of a button label. The Value of the Token directly applied is referencing another Token. Following the pathway of referenced Tokens as Values shows where the Color comes from in the system.
An infographic example of documenting a Color Token applied to the text layer of a button label. The difference between the two buttons is the color of the label text which is controlled by the value of the middle Token. On the left side, it is referencing a Token from a greenscale. On the right right, it is referencing a Token from a greyscale.
From the Tokens Page of the Plugin, hovering on a Color Token displays its data. In this example, the hard-coded value of a hex code is shown under the Token Name.
From the Tokens Page of the Plugin, hovering on a Color Token displays its data. In this example, the raw 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.
Right-click on a Color Token to open its Form. The example on the right shows the raw value of the Color Token as a hard-coded hex code.
A Color Token form on the left shows a raw value with references to another Token. A Dimension Token form on the right shows a raw value with a math equation. Both forms show the resolved values below the Value input.
Select the JSON view toggle from the Tokens Page to see the current Token Set as an editable code file. The raw value of the Token is shown in the JSON files.
Component-specific Tokens with values that reference Tokens from the Theme Token Sets are shown. The resolved values change based on the position of the Theme Token Sets.
Page cover image

💡 Something to share?

Submit it here!

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/

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.

Style Dictionary
@Tokens-studio/sd-transforms

Each Token will have different data to view on Hover depending on its type and value, however the position the data remains the same.