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 Managment
    • 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)
  • 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
    • 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
  • JSON View - Tokens Page
  • Access the JSON view
  • Pro Tips for JSON View
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousToken SetsNextThemes (pro)

Last updated 3 months ago

Was this helpful?

JSON View - Tokens Page

Token Sets are where our Design Tokens live in the Tokens Studio Plugin.

In code, , so you can think of a Token Set as the no-code version of a JSON file.

However if you are comfortable working in a code editor, the Plugin has a JSON view!

Access the JSON view

The actions at the top of the Tokens Page control how the Plugin displays the Tokens Sets and Design Tokens below.

Once you select a Token Set from the left-side menu, the Design Tokens living in that JSON file are displayed on the right.

  • The current Token Set selected will have the container previewing its name highlighted in blue.

  • Select the Token View toggle above the Tokens list on the right side to switch between the JSON and List view

Once the JSON view is open, you can apply Token data to your Figma design assets in the same way you can from the Token List View. However, you can not apply a new individual Token from the JSON view.

You can use the collapse Token Set toggle on the left side of the search input to hide the Token Set list in the left panel temporarily so you have more space to view your code files.

Any changes you make to Tokens in JSON view need to be saved using the action at the bottom of the plugin before toggling back to List view.

Pro Tips for JSON View

Coming Soon!

Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

  • None Yet

If you are familiar with , you'll feel right at home in the JSON view, as the keyboard shortcuts and actions are the same.

→

Design Tokens Community Group -

Tokens Studio Plugin GitHub -

VS Code
Learn more about the Apply Tokens Actions and Settings.
4.0 File Format
Open issues for JSON View
Tokens live in JSON files
In Tokens Studio, a Token Set is the no-code version of a JSON file.
Select the Toggle on the top right side of the Tokens Page in the Plugin to access the JSON view.
The find and replace feature in the JSON view can be used to make bulk changes.
Page cover image

🐞 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

💡 Something to share?

💡 Something to share?

Submit it here!
Submit it here!