Importing Figma variables

The Supernova Figma Variables Sync plugin allows you to synchronize collections of variables and modes with your design system in Supernova. When you push collections from Figma, they will be updated in Supernova, including any tokens referenced in your documentation (once you publish it again) or codebases with automatic hooks.

The Supernova Figma Variables Sync plugin is currently in a public beta. If you find any issues, please reach out to us.

Current plugin limitations

• When imported variables have references from external file collections, the referenced variables need to be imported separately to resolve the reference and original source needs to be re-imported to sync changes.
• The plugin currently does not support removing previously pushed collections.
• When pushing updates, changes from all previously pushed collections will be included. Currently, we do not support updates for selected collections only.
• Pushing an extended collection automatically includes all parent collections up to the root.

---

Setting up the plugin

1. Open the Supernova Figma Variables Sync plugin from the Figma plugin directory.
2. Click Sign in with Supernova and log in to your Supernova account using your credentials in the browser window.
3. Once you are logged in, close the confirmation window and return to the plugin.

Push collections to Supernova

The first push to Supernova

• In the plugin sidebar, choose a workspace, a design system and a dataset (if enabled) to push collections to.
• Once you’ve made this selection, you’ll see the list of collections in your current file and their sync status.
• The plugin keeps track of the collections that were already pushed to Supernova, ensuring you’ll always see what is already synchronized.

We preselect all collections in the file automatically. If you’d like to push only selected collections to Supernova, you can deselect the collections that you don't want pushed.

Configure modes

You can click the collection card and configure which mode will be imported as base token values. Also, you can decide which modes you want to import as themes.

Check scope configuration

For best results, variables with a single scope in Figma import as specific token types (e.g., Corner Radius → Border Radius token). Variables with multiple scopes or no scope import as generic tokens.

---

When you’re happy with your selection, click the Push updates to Supernova button. The sync process should only take a few seconds.

Once you've pushed your tokens, check that everything synced correctly by navigating to the Design tokens section of your design system in Supernova. You may need to refresh the browser to see the changes.

---

Collection dependencies

There may be a case where variables from selected collections are referencing variables from a different collection in the same file. To preserve the cross-collection references, we automatically push any dependent collections to Supernova too.

Extended collections

The plugin supports Figma's extended collections — hierarchical variable collections where child collections can override values from their parent.

• Extended collections appear indented with a connector line showing their parent relationship.
• The sync configuration applies to the entire hierarchy (root and all children).
• When you select an extended collection, all parent collections up to the root are automatically included.
• Even if a root collection comes from a different file (Remote), this collection will be pushed to Supernova to resolve the dependencies.

Keep data in sync

When your collections or variables are updated in Figma, they can be pushed to Supernova from the plugin again.

From the plugin, click Push changes to Supernova to send the changes to Supernova.