This version was released on March 13, 2025.
We’re thrilled to announce a powerful new feature for Supernova’s design system workflows: Write-on-Export. With this release, our exporters don’t just transform your design system data — they can now write data back to Supernova, creating a seamless two-way connection between your data and other parts of your design system. This opens up exciting possibilities for enriching your design system data dynamically and keeping everything in sync.
Along with this, we are also releasing many new updates to the VS Code extension that allow you to take advantage of the recently released preview mode.
What is Write-on-export?
Until now, Supernova exporters have been a one-way street: take design system data (like tokens, components, or assets) and convert it into a specific representation, such as CSS variables or iOS Asset Catalog format. With Write-on-Export, exporters can now write data back to Supernova, enabling you to enhance design system data with information created during the export process, every time they run.
What can you do with Write-on-Export?
Let’s imagine a very real problem that many of you are solving manually right now. You have tons of tokens maintained in Figma and Supernova, but developers need to use them in code. To make their lives easier, you painstakingly add code names individually to hundreds of tokens, and then to your documentation, and have to maintain it manually with every change.
With Write-on-Export, this entire process can now be automated! All new exporters can automatically enhance tokens with a corresponding code name (e.g., red-500) and write that information back to the custom token property of your choosing.
If you’re displaying tokens with custom properties in your documentation, these properties will instantly show in your design system documentation. They’ll automatically be added or changed, whenever tokens are added or their names change. This aligns with the exported properties provided by, you guessed it, the same exporter.
This two-way flow eliminates tedious manual updates (especially for those with hundreds of tokens!) and makes sure your documentation always reflects the latest state of your design system. Putting all of it together, at the end, the consumers of your design system benefit the most:
Introducing: Write-on-Export for existing exporters
We’ve added the exact capability as described above to the existing CSS and CSS-in-JS token exporters. We will continue to add additional write capabilities to all other exporters over time as well. If you have ideas what you would love to see, please let us know and we just might make it happen!
Simply go to Code automation > Select your existing pipeline > Edit (or create a new one) and find the “Automatic write-back” section in configuration to enable this feature.
Introducing: Full SDK write layer
To make Write-on-Export as flexible as possible and to see what all you can create, we are also announcing a big update to our SDK, which now includes an entire write suite that Supernova uses internally for all operations. This gives you full programmatic access to create, update, or even delete data in Supernova during the export process.
Here are some examples to give you an idea of what is possible:
async function updateToken(token: ColorToken, sdk: Supernova, remoteVersionIdentifier: RemoteVersionIdentifier) {
// Make some modification to token
token.value.color.r = 255
// Update the token on remote
return await sdk.tokens.updateToken(remoteVersionIdentifier, token)
}
async function updateTokensWithReactNames(sdk: Supernova, remoteVersionIdentifier: RemoteVersionIdentifier) {
// Get all tokens
const tokens = await sdk.tokens.getTokens(remoteVersionIdentifier)
const tokenCollections = await sdk.tokens.getTokenCollections(remoteVersionIdentifier)
const tokenGroups = await sdk.tokens.getTokenGroups(remoteVersionIdentifier)
// Use in-built write utility to write token names to a specific property called "React"
// WriteTokenPropStore is a utility available to all exporters, now
const writeStore = new WriteTokenPropStore(sdk, remoteVersionIdentifier)
await writeStore.writeTokenProperties("React", tokens, (token) => {
// This generate a css representation ready for copy-pasting, like "var(--color-primary)"
return `var(--${tokenVariableName(token, tokenGroups, tokenCollections)})`
})
}
Coming soon: Documentation Write API and [stay tuned!]
We are in the last testing phases of the new multiplayer documentation write API, which will allow you to directly update and manage your Supernova documentation programmatically. Alongside this, we’ll also be releasing ...a new feature (to be announced!)... which will make adding specific types of documentation content a breeze. Stay tuned for this in an upcoming release!
Introducing: Preview mode in VS Code
With the introduction of the exporter previews, we are now also introducing a new run mode into our VS Code extension, called “Preview”.
Run, Run in debug mode, and now also run in preview mode
In this mode, the VS Code simulates the preview behaviours and gives you access to a special context variable that tells you that you’re running in preview mode:
This is very useful for various things and experiments, but generally, we found two main use-cases where this is invaluable:
1. Disabling write when testing the exporter
In many cases, when developing the exporters, you don’t want to constantly write data to Supernova. To prevent this, simply check for preview mode with if (!context.isPreview) and run in preview to disable the writing capabilities. Then, write in real production mode (or in pipelines) when the time is right.
2. Enhancing/limiting preview output
In many cases, running the entire exporter while your teammates just want to tinker around with configuration is not great — for example, asset rendering takes a while. You can use the preview mode to limit number of assets that will render in preview, for example, significantly cutting down the time necessary to reach the optimal configuration.
Alternatively, you can use the preview mode to enhance output by adding extra comments that will get generated to output, and then stripping them out of production builds. In fact, thinking in terms of dev vs. production is a good analogy for using preview mode.
With this release, we are bringing a completely new way how to use exporters, and we can’t wait to see what you’ll build (or request for us to build) now that you know what is possible.
For a list of smaller improvements and bug fixes, visit our Bug fixes page here: