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

Was this helpful?

Edit on GitHub
Export as PDF

Generic Versioned sync setup guide

For projects requiring highly controlled and secure data-sharing environments, you can host your Design Token JSON files on your servers or storage solutions.

You can use the Tokens Studio plugin to keep your Design Tokens in sync with your code files without passing your design data through any Git or 3rd-party storage providers.

We support two-way sync, meaning you can use the plugin to:

  • push JSON files of Design Tokens to your storage provider

  • pull the Tokens stored in your storage provider into any Figma file

You can configure the permissions of your Generic Versioned sync to be:

  • Read Only

  • Read / Write

  • Read / Write / Create

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 configure Generic Versioned storage and add it as a Sync provider in the plugin.

How it works

  • Once your Token JSON files are stored on your server, capture the URL endpoint.

  • Configure a new Generic Versioned sync provider within the plugin.

  • Use the plugin to sync Design Token changes between your server and Figma design files.


Generic Versioned sync setup instructions

If you haven't already, store your Design Token JSON files on your server and create a storage endpoint.

1. Storage URL

Copy the URL where your Token JSON files are stored.

  • Store it somewhere safe, as it's needed for the plugin configuration.

2. Capture header pairs

Headers are optional authentication instructions for the plugin set up as key value pairs.

  • Refer to your server technical documentation for more details on headers.

For example, if you want to identify and track which users are accessing your Token files, you could set up a user authorization header:

  • Name = Authorization

  • Value = username

If your server requires authentication:

  • Copy and save the required header pair somewhere safe, as it's needed for the plugin configuration.


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 Generic Versioned

Add credentials for Generic Versioned sync

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 appears 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. URL

3. Flow type (permissions)

The flow type sets the permissions between the plugin and your storage provider.

  • Read Only

    • Token data is pulled into the plugin to be viewed but cannot be edited.

      • Read requests are sent via GET calls to the endpoint.

  • Read / Write

    • Token data is pulled into the plugin to be viewed, and edits to those Tokens can be made and pushed back to storage.

    • New Tokens, sets, or themes can not be created.

      • Read/Write requests are sent via PUT requests to the endpoint.

  • Read / Write / Create

    • New Tokens, sets, and themes can be created.

    • Token data can be pushed and pulled between the plugin and your storage provider for two-way sync.

      • Read/Write/Create requests are sent via POST requests to the endpoint.

      • The POST request is expected to return:

        • Validation that the endpoint has tracking setup (or not)

        • updatedAt field in the JSON, which can be used to set additional workflows on the storage side, like additional GET requests.

4. Headers

Save and do the initial sync

Save to confirm your credentials, and follow the prompts in the plugin to finish setting up the sync to your Generic Versioned provider.


Shared source of truth

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

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


Resources

Mentioned in this doc:

Community resources:

Known issues and bugs

Requests, roadmap and changelog

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

PreviousURL - Server Sync ProviderNextMulti-file Sync to Remote Storage (pro)

Last updated 5 months ago

Was this helpful?

→

→

Enter the complete URL you saved from

The optional authentication headers you saved from .

GitHub -

SD-Transforms -

Style Dictionary -

Ian Lawson's Guide (Medium Article) -

Tokens Studio Plugin GitHub -

🧑‍💻

↕️

🔐

Here's an example implementation of token JSON files stored on a SQLite database on a local file if you need a reference.
The swagger is available with the necessary schemas to roll your own endpoint.
Here's a guide on using a JSON server as a simple way to use Generic Versioned storage created by Ian Lawton, a Tokens Studio Community member.
Generic Versioned Example Repo from Tokens Studio
Swagger example to roll your own endpoint.
Read Me
https://styledictionary.com/
A simple Design Token storage server for Figma Tokens Studio
Open issues for URL sync
Sync to external token storage enhancements - Feature Request
Git sync enhancements - push, pull, merge, branching - Feature Request
Data security info request - Feature Request
step 1 above.
step 2 above
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

💡 Something to share?

Submit it here!

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.

🐞 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

Style Dictionary
@Tokens-studio/sd-transforms
Token Types
community Slack
submit it on our feedback tool

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/