Syncing Figma Variables with Supernova

If your Figma variables and styles are already doing heavy lifting in your design files, Supernova makes it easy to turn them into a unified token system that’s ready for automation, documentation, and code.

We won’t get into every detail here (you can check out the full docs for that), but this chapter will walk you through the essentials — how syncing works, what’s supported, and what to expect when you bring your data into Supernova.

📘 Want the full how-to? → Learn Supernova: Syncing Figma variables

🔄 Styles + Variables = Unified Tokens

You can sync both Figma variables and Figma styles into Supernova — and we’ll combine them into design tokens under the hood.

Here’s the breakdown:

✅ What variable types are supported?

When you sync variables into Supernova, we support:

🧭 We support all the smart stuff you’d expect

• ✅ Modes — All Figma modes are preserved and mapped to Themes in Supernova
• ✅ Multi-file support — You can sync from multiple Figma files
• ✅ Style + variable aliasing — We maintain links between variables used inside styles
• ✅ Code syntax + descriptions — Variable descriptions and code previews are imported automatically
• ✅ Token filtering — Token view can be filtered by collection, just like in Figma
  
  

🧠 Scopes + variable mapping = better code

When importing number or string variables, you can define a scope (like spacing, radius, or opacity) in Figma. Supernova uses these scopes to assign token types accurately — so your code exports are clean and semantically correct.

Example:

‍

📘 See the full scope mapping table → Scope support reference

💡Tip:

 Variable scopes are defined during sync using the Variables Sync plugin - make sure you have the “assign scopes” toggle enabled in the plugin settings!

✅ Quick Sync checklist

For Figma variables (via plugin):

• Install the Figma Variables Sync plugin
• Organize your variables into meaningful collections and modes
• (Optional) Assign scopes to number/string variables for accurate type mapping
• Use the plugin to select which variables and collections to sync
• Push manually to Supernova 
• Check your tokens in Supernova’s Token Manager
• Filter by collection to validate structure

💡 Remember: variables must be pushed manually each time you update them. They’re not auto-synced like styles.

For Figma styles (typography, effects, gradients, borders, etc):

f you’re importing typography, shadows, gradients, blurs, borders, etc., the process is different — styles are imported by linking a Figma file directly into Supernova.

• Make sure the file contains at least one style
• Confirm the styles are actually used in the file (they must be applied to at least one object — like a shape or text block)
• Paste the Figma file link into Supernova to import styles
• Review and manage styles in the Data Sources > Styles section
• Styles are auto-synced — no plugin required
  
  

ℹ️ Published vs unpublished styles:

• If the file is a Figma Library with published styles → only published styles will be imported by default
• If the file is not published → Supernova will import all styles, even unpublished ones

🔧 You can adjust this behavior in Data Sources → Edit import scope → toggle “Import published styles only”

💡 Preserve variable references in typography tokens:

When you import typography styles, Supernova will preserve any variable references (like color or spacing) — which means your tokens stay fully themeable and you don’t need to manually fix or reconnect anything.

🛠️ Important:

If variable references are missing in your typography tokens, just re-import the typography styles after setting up all your variables in Supernova. This ensures everything connects properly.

🪜What happens next?

Once your variables are in Supernova, they’re automatically:

• Merged with matching styles (if linked via aliases)
• Mapped to token types (based on name, scope, or input)
• Organized by collection and theme
• Available for code export, documentation, and distribution
  
  

Want to sync different sets of variables across multiple brands or design systems?

We support that too — and we’ll cover it next in Chapter 2.3.

TL;DR: Sync once, scale everywhere

• Figma variables are imported via plugin → manual push
• Styles are imported via URL → auto-updated
• We support color, number, and string variables (not boolean)
• Modes, aliases, code syntax, and descriptions are all preserved
• You can map variable scopes to token types for accurate code output
• Everything gets unified into tokens — ready for docs, code, and beyond

Next up: how to structure your files across multiple teams, brands, or products → Chapter 2.3.