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 Anatomy - Description
  • Description = Additional context when needed
  • Descriptions are meta-data shared across tools and technologies.
  • Up next - Name

Was this helpful?

Edit on GitHub
Export as PDF
PreviousToken Anatomy - ValueNextToken Anatomy - Name

Last updated 2 days ago

Was this helpful?

Token Anatomy - Description

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

Description = Additional context when needed

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

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

Descriptions are meta-data shared across tools and technologies.

Descriptions are technically meta-data, so the description is available anywhere a Token is utilized. Engineers can view the description in code and design tools often add the description to token properties.

For example, if a brand color is bright and vibrant it may have limited use cases. Any constraints can be added to the description in the Token as below.

Only use for brand logo and branded illustrations as this lime green is not accessible for interactive elements.

When that Token is attached to a color style in Figma, the description is visible to designers using Figma's native UI.

The additional context you can add to the description of a Token helps cross-functional team members understand why or how they might use these design decisions in their own work.


Up next - Name

Next, let's explore the name of a Design Token as this anatomic property often provides an indication of design decisions that are detailed in the description .

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 this infographic, the Token examples on the right side highlight the Name. The top code block shows a Token Name with groups. The bottom code block shows a flat Token Name.
Page cover image