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!
→ More information on the Studio Platform and sign up for Beta access here.
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
If you haven't already, sign up for an account at Tokens Studio
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-syncOption 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
The API Key you saved from step 2 above.
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:
Tokens Studio Platform - https://tokens.studio/studio
Studio Platform Documentation - https://documentation.tokens.studio/
Community resources:
None yet!
💡 Something to share? Submit it here!
Known issues and bugs
Tokens Studio Plugin GitHub - Open issues for Sync Studio platform
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, submit it on our feedback tool, or send us an email support@tokens.studio
Requests, roadmap and changelog
🧑💻 Sync to external token storage enhancements - Feature Request
How might we improve the experience of working with sync providers in general?
💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.
Last updated
Was this helpful?