Sync your Design Tokens with code

By default, Tokens Studio will store your Design Tokens locally in the Figma file you are working in, but their true power is unleashed when they can be synced with code.

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

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:

• Git providers
  • Connected to a code repository for remote Token storage that is version-controlled.
• Cloud-based code storage providers
  • Syncing your Token files with design data platforms.
• Locally hosted server Token storage.

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.

GitHub#

GitHub is the most popular Git provider for hosting your code and design decisions in the same location.

Additionally, we provide support for GitHub Enterprise for enhanced functionality and compatibility.

→ Read the GitHub sync setup guide

Gitlab#

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

→ Read the Gitlab sync setup guide

Azure DevOps#

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

→ Read the Azure DevOps sync setup guide

Bitbucket#

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

→ Read the Bitbucket sync setup guide

Cloud storage providers#

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

JSONBin#

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

→ Read the JSONBin sync setup guide

Supernova#

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

→ Read the Supernova sync setup guide

Tokens Studio (beta)#

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

→ Read the Tokens Studio Platform sync setup guide

Server storage providers#

Server 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.

Generic Versioned Storage#

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.

→ Read the Generic Versioned Storage sync setup guide

URL#

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.

→ Read the URL sync setup guide

Sync actions#

Once you have an active sync provider, you can find the sync actions at the bottom of the plugin. Depending on your sync provider you may see:

• The branch button displays the current branch you are working on.
  • Select the button to switch branches or create a new branch.
  • → Jump to the Branch Switching guide
• The Token format displays the format of your current branch, either W3C DTCG or Legacy, which influences how your Token JSON files are written.
  • Select the button to switch Token formats.
  • → Learn more about the W3C DTCG Token Format #add-doc-link/token-format
• The pull button will have an indicator appear when new Token data can be received from your sync provider.
  • Select the button to open the pull modal.
• The push button will have an indicator appear when changes to your Tokens can be sent to your sync provider.
  • Select the button to open the push modal.

→ Read the Push and Pull to Sync Provider guide for more details

Sync Provider Guides#

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

• → Add a new sync provider
• → Edit an existing sync provider
• → Select a saved sync provider
• → Save Tokens to your local document
• → Delete a sync provider
• → Multi-file sync (pro)

Resources#

Mentioned in this doc:

• SD-Transforms - Read Me
• Style Dictionary - Read Me

Community resources:

• None yet!

💡 Something to share? Submit it here!

Known issues and bugs#

Note - each provider has their own issues listed on their official docs page

• Tokens Studio Plugin GitHub - Sync Multi Player Experience
• Tokens Studio Plugin GitHub - Sync Indicators

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, or submit it on our feedback tool.

Requests, roadmap and changelog#

• ↕️ AWS CodeCommit - Add sync provider - Feature Request
• 🧑‍💻 Sync to external token storage enhancements - Feature Request
  • How might we improve the experience of working with sync providers in general?
• ↕️ Git sync enhancements - push, pull, merge, branching - Feature Request
• 🔐 Data security info request - Feature Request

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.