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

Was this helpful?

Edit on GitHub
Export as PDF
PreviousAzure DevOps - Git Sync ProviderNextSupernova - Cloud Sync Provider

Last updated 5 months ago

Was this helpful?

JSONBin sync setup guide

provides a simple REST interface to store & retrieve your JSON data from the cloud.

You can use the Tokens Studio plugin native integration with JSONBin to sync your Design Tokens JSON files with code.

Tokens Studio supports two-way sync, meaning you can use the plugin to:

  • push JSON files of Design Tokens to JSONBin

  • pull the Tokens stored in JSONBin into any Figma file

This means the Design Tokens living in code are the source of truth for our design decisions, which can be shared between design and development teams.

This doc outlines how to set up JSONBin as a Sync provider in the Tokens Studio plugin.

How it works

  • Set up a bin and API key in JSONBin

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

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


JSONBin setup instructions

1. Create a new bin

Once you've logged in to your JSONBin account:

  • Create a new bin dedicated to storing and managing your Design Tokens.

    • Choose a descriptive name for your project that is specific to its purpose and is memorable.

  • Follow JSONBin's prompts to create your new bin.

You are now looking at your new bin! Well done!

Record the ID of the bin somewhere safe, as it's needed for the plugin configuration.

2. Generate an API key

The API key is generated from JSONBin, and acts as a passcode that allows the Tokens Studio plugin to connect to your JSONBin account.

Log into your JSONBin account:

  • Navigate to your JSONBin account settings

  • Locate the API Key section

  • Select Create Access Key

    • Add a Name of what the Token is for.

      • Example: test-Token repo sync to Tokens studio

    • Select the permissions for the Bin using the checkboxes

      • Full permissions for the plugin would be create, read, update, and delete

  • Select Save Access Key

  • Save the generated key somewhere safe as it's needed for the plugin configuration.

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 using the navigation tab.

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

  • Select JSONBin

3. Add credentials for JSONBin

You'll need the information saved from the steps above to complete the JSONBin 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: radix ui components

2. API Key

3. ID (optional)

  • If this is empty, Tokens Studio will create a new bin for you.

Save and do the initial sync

Save to confirm your credentials, and then follow the plugin's prompts to finish setting up the JSONBin sync.


Shared source of truth

As you work in the plugin, push and pull indicators remind you to stay in sync with your JSONbin.

Once your Token JSON files are synced to JSONbin, you have a shared source of truth between Designers and Engineers!


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

    • If you paste a JSON file in the plugin and save, you then need to click 'apply to' for the JSONBin to update.

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 a JSONBin account at .

The API Key you saved from .

Enter the ID of the bin you created and saved from .

JSONbin -

SD-Transforms -

Style Dictionary -

Tokens Studio Plugin GitHub -

JSONBin not updating if JSON is manually added

🧑‍💻

↕️

🔐

JSONBin
https://jsonbin.io/
Read Me
https://styledictionary.com/
Open issues for Sync JSONbin
#2283
Sync to external Token storage enhancements - Feature Request
Git sync enhancements - push, pull, merge, branching - Feature Request
Data security info request - Feature Request
step 2 above
step 1 above
JSONBin

💌 Visit to contribute or subscribe to updates.

🐞 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
https://feedback.tokens.studio/

💡 Something to share?

Submit it here!
Page cover image

→ Read the Add New Sync Provider guide for more details.

Manage Sync Providers

Read the Sync Changes guide for more details

Sync Changes to Remote Storage - Push and Pull

Transforming Tokens

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.

Style Dictionary
@Tokens-studio/sd-transforms
Token Types