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

Was this helpful?

Edit on GitHub
Export as PDF
PreviousJSONBin - Cloud Sync ProviderNextTokens Studio Platform - Cloud Sync Provider

Last updated 5 months ago

Was this helpful?

Supernova sync setup guide

is a design data platform popular for documenting design systems.

With the Tokens Studio plugin's integration with Supernova, you can create and manage Design Tokens and themes in Figma and sync to Supernova to create documentation.

The Supernova integration has some limitations and does not provide the same bi-directional sync or version control our Git provider integrations offer.

You may want to consider including a Git provider in your process in addition to Supernova.

How it works

  • Gather Design System Data and Authentication token in Supernova.

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

  • Use the plugin to sync your Design Tokens between Figma and Supernova to keep your Design Token documentation up to date.


Supernova setup steps

1. Gather design system project information

Log into your Supernova account and navigate to the Design System Project that you'd like to sync with Tokens Studio.

  • You'll land on the Design Tokens page in Supernova for your project.

  • Save the URL of the Design Tokens page somewhere safe as it's needed for the plugin configuration.

Be sure to include the https:// in your URL copy

Each Design System project will require different code snippets for mapping Tokens Studio to Supernova. It's best to consult the Supernova docs to gather the right mapping code snippets or reach out to them for support:

2. Generate an access token

Not to be confused with anything to do with Design Tokens, an access token acts as a passcode from Supernova you enter into the plugin that allows the connection to happen.

Log into your Supernova account:

  • Navigate to the Authentication section of your project

  • Generate a new authentication token with the necessary permissions.

  • Save the generated access token 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 up 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 Supernova

Add credentials for Supernova

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. Supernova access token

3. Design System URL

  • Example:https://supernova.io/ws/test/ds/amazingdesigner/radixtokens

4. Supernova < > Tokens Studio Mapping

The exact code snippets provided by Supernova (see the steps above) limit the data that Tokens Studio can sync to Supernova.

The mapping structure is important!

Example mapping configuration:

[
    {
        "tokenSets": ["global", "light"],
        "supernovaBrand": "Default"
    }
]

Save and do the initial sync

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


Shared source of truth

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


Limitations from Supernova

According to the Supernova docs, Design Tokens synced to Tokens Studio cannot be edited directly in Supernova; all edits must be made in the Tokens Studio plugin interface.

This means pulling tokens from Supernova will only show changes to tokens made in the Tokens Studio plugin that were pushed to Supernova.

Customer support

The Supernova team provides customer support for issues with Supernova sync, so you'll need to contact them directly through their support channels to triage issues and ask questions.

  • This is a great place to post questions and concerns to help other community members who might be having the same experience. It also allows the Tokens Studio team to help out where we can!


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

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 Supernova account at

→

→

The Access token you saved from

The URL of your design system project

Its essential to have the correct mapping structure, so copy/paste the configuration as outlined in the, including the square brackets [ ].

If you want to map multiple themes at once, then you can check out the Supernova docs on connecting to the plugin .

→

In the , we have a channel moderated by the Supernova team.

Supernova -

Supernova -

SD-Transforms -

Style Dictionary -

Tokens Studio Plugin GitHub -

🧑‍💻

↕️

🔐

https://supernova.io/
Basic mapping documentation on the Supernova site
Advanced mapping for working with themes and multiple brands on the Supernova site
Supernova docs precisely
here
Read the Supernova docs here.
Tokens Studio community slack
#supernove-sync
https://www.supernova.io/
Tokens Studio sync documentation
Read Me
https://styledictionary.com/
Open issues for Sync Supernova
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.
from step 1 above
Supernova

💡 Something to share?

💌 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

Submit it here!
community Slack
submit it on our feedback tool
https://feedback.tokens.studio/
Page cover image

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

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.

Manage Sync Providers
Style Dictionary
@Tokens-studio/sd-transforms
Token Types

Read the Sync Changes guide for more details

Sync Changes to Remote Storage - Push and Pull