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
    • 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
  • Remote Token Storage
  • Sync providers
  • Git providers
  • Cloud storage providers
  • Locally hosted Token storage providers
  • Sync Provider Guides

Was this helpful?

Edit on GitHub
Export as PDF
PreviousLocal Document - Figma File Token StorageNextGitHub - Git Sync Provider

Last updated 11 days ago

Was this helpful?

Remote Token Storage

By default, Tokens Studio will store your in the Figma file you are working in, but their true power is unleashed when they can be stored outside of a design tool and synced with code.

This synchronization creates a shared source of truth, fostering collaboration and alignment between design and development teams.

You can manage version control in Tokens Studio without ever having the Figma to keep your changes in sync with engineers in code, and other designers working in multiple Figma files.

Sync providers

Tokens Studio offers out-of-the-box integrations with several third-party providers to sync your Design Tokens with code and store them externally for safekeeping outside of your local design files.

We support:

    • Connected to a code repository for remote Token storage that is version-controlled.

    • Syncing your Token files with design data platforms.

Once your sync provider is active, the Plugin will detect changes in real time, and indicate when you need to sync changes with the Tokens in remote storage.

Pro licence holders working with a Git sync provider can also create and switch between branches from within the plugin.


Git providers

Git is an open-source system that tracks changes in code files.

Syncing your Tokens with a Git provider allows you to store your Design Tokens as code files in a repository. Tokens Studio has native features to push and pull Token changes easily and version-control your design decisions using the branching feature.

This allows you to explore design decisions before deploying them to a production environment.

Select any of the Git providers below to read its Sync Setup Guide


Cloud storage providers

Cloud storage providers offer a platform to store, manage, and retrieve your Design Token data via an API.

Select any of the cloud storage providers below to read its Sync Setup Guide


Locally hosted Token storage providers

Locally hosted Token storage providers offer an alternative to Git providers for projects that benefit from storing their Tokens on the same servers as the rest of their code.

Select any of the local hosted below below to read its Sync Setup Guide


Sync Provider Guides

When you are ready to sync your Tokens to a remote storage provider, check out these guides:


Branch Switching (pro) - Version Control
Manage Sync Providers
Multi-file Sync to Remote Storage (pro)
Sync Changes to Remote Storage - Push and Pull
Branch Switching (pro) - Version Control
Edit Sync Provider
Change Active Sync Provider
Local Document - Figma File Token Storage
Remove Sync Provider
Git providers
Cloud-based code storage providers
Locally hosted server Token storage.
Design Tokens locally
Page cover image
Cover

Generic Versioned Storage is a way to host your Design Tokens on a local or remote server, which supports read-only, read/write, and read/write/create workflows.

Cover

When you host your Design Token JSON files on a web server or static hosting service, the plugin can access the Tokens (read-only) by syncing to the URL where your Token files are stored.

Cover

Azure DevOps is a Microsoft-owned suite of development tools and services you can use to create a Git-based source code repository.

Cover

Bitbucket is a Git-based source code repository hosting service popular among teams using Atlassian tools.

Cover

GitHub is the most popular Git provider for hosting your code and design decisions in the same location, and it's free to get started!

Cover

Gitlab is a popular Git provider for projects that benefit from its enhanced security features.

Cover

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

Cover

Supernova is a design data platform popular for documenting design systems.

Cover

Tokens Studio has a standalone web-based platform for dynamic creation and management of design decisions.