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
  • Tokens Studio Platform sync setup guide
  • How it works
  • Tokens Studio sync setup instructions
  • Configuring Tokens Studio Plugin
  • Shared source of truth
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousSupernova - Cloud Sync ProviderNextURL - Server Sync Provider

Last updated 20 days ago

Was this helpful?

Tokens Studio Platform sync setup guide

Tokens Studio has a standalone web-based platform for dynamic creation and management of Design Tokens, currently in Beta!

How it works

  • Set up a project and API key in the Tokens Studio platform

  • Configure Tokens Studio as a sync provider within the plugin.

  • Use the plugin to sync your Design Tokens between the Tokens Studio platform and your Figma design files.


Tokens Studio sync setup instructions

1. Create a new project

Once you've logged into your Tokens Studio account:

  • Create a New Organization.

  • Create a New Project

    • Give your project a title.

    • Choose a template to start the project. You can always remove this later.

  • Now you are looking at the dashboard of your new project.

2. Create an API key

The API key is generated from the Tokens Studio Platform, and acts as a passcode that allows the Figma Plugin to connect to your account and access all Organizations and Projects that you are a part of.

Log into your Tokens Studio Platform account:

  • Navigate to the home page of your account

  • Click on Find your API key.

    • You can also jump to the API keys page by using the keyboard shortcut cmd+k.

  • Select Create a new Keys

  • Add a Name of what the API Key is for.

    • Example: fimga-sync

    • Option to add a Description for the API Key

      • Example: test-token sync to plugin

  • Select create key

  • Save the generated API key somewhere safe as it's needed for the plugin configuration and you will not see it again.

You're ready to configure the Tokens Studio plugin in Figma!


Configuring Tokens Studio Plugin

In Figma, open the Tokens Studio plugin and navigate to the Settings page

  • Under the Sync providers section, select the Add new button to see a list of all Token storage providers

  • Select Tokens Studio

You'll be asked to confirm that you already have access to the Studio Platform and then brought to the Studio Platform sync configuration form.

Add credentials for Tokens Studio sync

You'll need the information saved from the steps above to complete the Tokens Studio sync configuration form.

As you fill in the details, additional inputs in the form will appear.

1. Name

This is a nickname that shows up in the plugin settings page later on to identify this specific sync provider configuration.

  • Choose something memorable to you and your project.

  • Example: Client A

2. API Key

  • Once you enter the API Key into the form, the system will validate your Studio Platform account.

  • Once the validation is successfull, the Organization input will appear.

3. Organization

Select the Studio Platform Organization from the dropdown that contains the Token Project you'd like to work with.

  • Once you select an Organization, the system will check your Studio Platform account.

  • Once the check is complete, the Project input will appear.

4. Project

Select the Token Project you'd like to work with in the Figma Plugin from the dropdown.

  • You'll only see Projects within the current Organization you've selected above.

Save and do the initial sync

Save to confirm your credentials, and follow the prompts in the plugin to finish setting up the Tokens Studio Platform sync.


Shared source of truth

As you work in the Plugin, it will continuously update the Studio Platform to stay in sync without manual push actions needed.

You will need to pull changes made in the Studio Platform into the Figma Plugin using the refresh action that appears in the bottom left of the Plugin.


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

    • How might we improve the experience of working with sync providers in general?

If you haven't already, sign up for an account at

The API Key you saved from .

Tokens Studio Platform -

Studio Platform Documentation -

Tokens Studio Plugin GitHub -

🧑‍💻

↕️

Tokens Studio
https://tokens.studio/studio
https://documentation.tokens.studio/
Open issues for Sync Studio platform
Sync to external token storage enhancements - Feature Request
Git sync enhancements - push, pull, merge, branching - Feature Request
step 2 above
→ More information on the Studio Platform and sign up for Beta access here.
Page cover image

💡 Something to share?

Submit it here!

🐞 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/