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
  • Text - Token Type
  • Design decisions
  • Possible values
  • Values that reference another token
  • Apply Text Tokens
  • W3C DTCG Token Format
  • Transforming Tokens
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousOtherNextTypography - Composite

Last updated 4 months ago

Was this helpful?

Text - Token Type

Text Tokens define entire strings of text that change the written copy of your designs when applied to a text layer.


Design decisions

Text Tokens define the written content in your designs and can be applied to text elements.

Useful for:

  • UX writing

  • Creating themes for different languages

  • Capturing translations

  • When your product or brand names are still being iterated on


Possible values

Text Token can have any combination of alpha-numeric values and may include emojis.

Known Issue

Text Tokens with values that are numeric only are not applying as expected.

Hard-coded string values

Hard-coded values of Text Token would be a string of text you define directly.

For example, a Text Token named welcome.message with the hard-coded value of:

"Hello world"

Values that reference another token

When trying to reference another Token as the Value for a Text Token, you will see Tokens in the dropdown list that are:

  • Living in Token Sets that are currently active.

    • In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.

  • Token Type is compatible:

    • The same = text

Nested references

Text Tokens can also reference another Token nested somewhere within the value.

For example, a Text Token with a Name of customer-id with the hard-coded value of:

Jan Six

When referenced within the value of another Text Token with a Name of app.home-page.title:

👋 Welcome back, {customer-id}!

Which would inherit the text content from the customer-id token and have a resolved value of :

👋 Welcome back, Jan Six!

This is a great way to communicate to engineers the design decision to have text content; in this case, the client name comes from a database.

You could even add some notes in the Description of the Token for engineers, like "show the preferred name as the client ID if it exists in the database."


Apply Text Tokens

You can apply a Text Token to change the written content of a text layer in Figma when the Token is applied.

With one or more text layers selected in Figma, click on the name of your chosen Text Token in the Plugin to apply its value instantly.

For example, if you select the bounding box that a text layer is in by mistake, the Token is applied to the parent frame and no changes will be made to the text layer as it is a child.


W3C DTCG Token Format

Text is not yet an official token type in the W3C DTCG specifications. Tokens Studio has added Text as an unofficial Token Type to support Figma's String Variable.


Transforming Tokens

When transforming Text Tokens, there are specific transforms to be aware of.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of text to align with the Style Dictionary compatible Token Type of content.


Resources

Mentioned in this doc:

  • Style Dictionary - https://styledictionary.com/

Community resources:

  • None yet!

Known issues and bugs

    • When the value is purely numeric, results are unexpected.

Requests, roadmap and changelog

  • None

→

SD-Transforms -

Design Tokens Community Group -

Design Tokens Community Group -

Tokens Studio Plugin GitHub -

Unable to Assign a Numeric Value in the Text Token Type

SD-Transforms Read-Me Doc, Using the preprocessor
Read Me
W3C Draft
8.0 Types
Open issues for Token Type Text
#2470

Once a Token has been applied, it will remain attached until you manually remove it.

However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.

For example {token.name.here}

The value will show a broken reference until the originating Token Set is marked as enabled.

Jump to the guide on Token Values with References by selecting the card below to learn more.

Token Values with References

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

🐞 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

💡 Something to share?

community Slack
submit it on our feedback tool
Submit it here!
Page cover image
Creating a new Text Token in the Tokens Studio Plugin for Figma.
Cover

Text Tokens can be attached to String Variables in Figma.

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/

Be sure to select a compatible layer type when applying Tokens in Figma.

If you have a layer type selected that isn't compatible with the Token Type you apply, the Token will still be applied, but no changes will be visible in Figma.