Tokens Studio Platform sync setup guide
Tokens Studio has a standalone web-based platform for dynamic creation and management of design decisions, currently in Beta!
How it works
- Set up a
project
in Tokens Studio - For your organization, create an API Key in Tokens Studio
- Configure Tokens Studio as a sync provider within the plugin.
- Seamlessly
sync your design tokens
between Figma and Tokens Studio to maintain consistency across design and development workflows.
Tokens Studio sync setup Instructions
If you haven't already, sign up for an account at Tokens Studio. Note that sign-ups will be waitlisted, so you'll need to be invited to the Beta first.
1. Create a new project
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 ID
andStore it somewhere safe
as it's needed for the plugin configuration.
2. Creating an API key
From your project dashboard
, select the project name
in the top left corner
- Navigate to
Settings
- Select
API Keys
- Select
Create API Key
- Add a
Name
of what the API Key is for.- Example:
figma-sync
- Optional: add a description for the API key
- Example:
- Under
Group
selectPower User
orAdmin
(or Read-only if that's all you need) - Select
Create key
- Copy the generated API key and store it for later
Configuring Tokens Studio Plugin
In Figma, open the Tokens Studio plugin and navigate to the Settings
page
- Under the
Sync providers
section, select theAdd new
button to see a list of all token storage providers - Select
Tokens Studio
3. Add credentials for Tokens Studio sync
You'll need the information saved from the steps above to complete the sync configuration form.
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
API Key
The API Key
you created and saved from the steps above.
ID (connection string)
Enter the Connection String ID
you copied and saved from the steps above.
- This can typically be found in the project section of your Tokens Stdio sync dashboard.
4. Save credentials
Initially you will pull the tokens that you have stored in your project.
You can now go and either create tokens inside the plugin, or on the platform.
- If you make changes on the platform there's a button in the bottom left of the plugin allowing you to pull the latest values.
- If you make changes in the plugin, they will automatically be pushed to Tokens Studio on save.
Note that dynamic token sets (sets created as a graph) will be read-only in the plugin.