Last updated
Was this helpful?
Last updated
Was this helpful?
Tokens Studio has a standalone web-based platform for dynamic creation and management of Design Tokens, currently in Beta!
Set up a project and API key in Tokens Studio
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.
Once you've logged into your Tokens Studio account:
Select New Project from the top-right corner of the home page
Give your project a title.
Now you are looking at the dashboard of your new project.
Locate the Connection String (ID of the project) on the right side of the page
Use the copy button to copy the connection string to your clipboard
Save the connection string ID somewhere safe as it's needed for the plugin configuration.
The API key is generated from the Tokens Studio Platform, and acts as a passcode that allows the plugin to connect to your account.
Log into your Tokens Studio Platform account:
Navigate to your project dashboard
Select the project name in the top left corner
Navigate to Settings
Select API Keys
Select Generate API Key
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
Under Group select Admin which gives you read and write permissions
Select create key
Save the generated API key somewhere safe as it's needed for the plugin configuration.
You're ready to configure the Tokens Studio plugin in Figma!
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 need the information saved from the steps above to complete the Tokens Studio sync configuration form.
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: Hyma brand exploration
2. API Key
3. ID (connection string)
This can typically be found in the project section of your Tokens Studio sync dashboard.
Save to confirm your credentials, and follow the prompts in the plugin to finish setting up the Tokens Studio Platform sync.
As you work in the plugin, it will continuously update the Studio platform to stay in sync without manual push or pull actions needed.
Mentioned in this doc:
Tokens Studio Platform - https://tokens.studio/studio
Style Dictionary - https://styledictionary.com/
Community resources:
None yet!
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 .
Enter the Connection String ID you saved from .
SD-Transforms -
Tokens Studio Plugin GitHub -
🧑💻
↕️
💡 Something to share?
🐞 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
💌 Visit to contribute or subscribe to updates.
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.
The various Token Types supported by Tokens Studio have unique transforms to be aware of.