Last updated
Was this helpful?
Last updated
Was this helpful?
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.
From the Tokens Page of the Tokens Studio Plugin for Figma, there are three places to see the Description of a Token.
Token data on hover
Token form
JSON file
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.
Right click on a Token Name and select Edit to view its properties as a form.
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.
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.
There are some nuances about editing Tokens in the JSON view to be aware of, documented in its guide.
The plugin does not yet support Descriptions for Variables.
The SD-Transforms package's preprocessor will transform the TS Token Type to the Style Dictionary Type, as described in the table below.
Mentioned in this doc:
None yet!
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 -
💡 Something to share?
💌 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
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.
