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 Descriptions in Tokens Studio
  • Working with Token Descriptions
  • In Figma
  • Transforming Tokens
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousEdit Token NamesNextToken Sets

Last updated 4 months ago

Was this helpful?

Token Descriptions in Tokens Studio

The description is the anatomic part of a Design Token that can be used to define additional details, like why or how we made this decision.

You might recall from our that the description is optional but very helpful to provide additional context about the Token.

You can think of a Token's description as a place to add a note or reminder about this design decision for your engineers, designers, or future self.

For example, a Font Family Token may have a description with a link to download the files.


Working with Token Descriptions

From the Tokens Page of the Tokens Studio Plugin for Figma, there are three places to see the Description 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. If a Description was added to the Token, it appears as the last piece of data you can view about a Token on hover.

2. Token Form

Right click on a Token Name and select Edit to view its properties as a form.

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

The Description input will be empty if no Description was entered.

If you have edit permissions, you can make changes to the Description by typing in the input. Be sure to save your changes using the bottom button when you are finished.

If you reference a Token with a Description as the Value in another Token, the Description does not get passed along. This allows you to write a unique description for each Token.

3. JSON File

Use the Token View Toggle see your Tokens written in JSON code files. If a Token has a Description it will appear as the last part of the code for that Token. If no Descriptions was entered, the code files will not include a description for that Token.

If you are comfortable working in code (and have edit permissions), you can edit Token Descriptions in the JSON view.

However, if there is no description entered for the Token, you will have to manually type the the full syntax.

There are some nuances about editing Tokens in the JSON view to be aware of, documented in its guide.


In Figma

The plugin does not yet support Descriptions for Variables.


Transforming Tokens

The SD-Transforms package's preprocessor will transform the TS Token Type to the Style Dictionary Type, as described in the table below.


Resources

Mentioned in this doc:

Figma Resources

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

  • None Yet!

Using the Plugin, when you with a Description to Figma as a Style, the Description will be available for Designers to see in the Figma UI.

If you , its Description will be automatically added to the Token that is created by the plugin.

→

While the descriptionof a Token is included in the as a plain text addition to a Design Token, we've included a specific transform in the generic sd-transforms package to convert the description to a code comment based on popular workflows of engineers in the community.

SD-Transforms -

Style Dictionary -

Design Tokens Community Group -

Design Tokens Community Group -

Figma Learn -

Tokens Studio Plugin GitHub -

JSON View
Export a Token
Import a Style from Figma into Tokens Studio
Read Figma's guide on Descriptions for Styles for more details.
DTCG Design Tokens Specifications
→ SD-Transforms Read Me - ts/descriptionToComment
Read Me
https://styledictionary.com/
W3C Draft
5.2.1 Description
Add descriptions to styles, components, and variables
Open issues for Token Descriptions
Intro to Design Tokens Guide
In this infographic, the Token examples on the right side highlight the Description. Only the bottom example has a description.
An infographic example of documenting a Font Family Token with a Description that includes a note and URL to download the Font.
In the Plugin on the Tokens Page, hovering on a Font Family Token shows a Description as the last piece of data displayed. In this example, the Description includes a note and link to download the Font Family.
In the Plugin on the Tokens Page, right-click on a Token Name to see its action menu and select Edit to see its Token Form. The Description input is at the bottom of the form.
The Token on the Right has a value which References the Token on the left.
Select the JSON view toggle from the Tokens Page to see the current Token Set as an editable code file. As descriptions are optional, if they are empty, it is not added to the code file.
Page cover image

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.

🐞 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

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/

💡 Something to share?

Submit it here!