This version was released on February 11th, 2025.
We’re making our code automation features easier to use and more flexible! Setting up pipelines is now more intuitive, and our exporters offer greater customization to fit your needs.
What’s new
- Plug-and-play automation: Simplified interface for creating pipelines.
- Configuration options: Extensive settings for code output from the UI.
- Theme support: Easily export design tokens for multiple themes.
- Code preview: Preview what will be exported during pipeline creation
No more creating and maintaining custom exporters just to tweak common settings. Our updated exporters now include extensive configuration options designed to support the majority of use cases.
New interface for creating pipelines
We’ve completely redesigned the pipeline experience to reduce the need for creating custom exporters.
Choose an exporter and create a pipeline to get started. You can proceed right away with the default settings, or you can choose to customize your code output with our new configuration options.
Advanced configuration
There is a new Configuration section (available for new exporters only) that allows you to customize settings for output such as:
- formatting (i.e. for colours and token names)
- themes
- prefixes
- file structure
- & more!
Code preview
Preview code output while creating a pipeline.
There is a new code preview in the pipeline editor that allows you to preview the code that will be exported before creating the pipeline.
After making your adjustments in the configuration tab, click Rebuild preview to see them reflected in the code preview.
New design token exporters!
This release introduces three new design token exporters which include comprehensive customization options and built-in theme support:
-
CSS
Export your design system tokens into CSS variables and definitions. -
CSS in JS
Export your design system tokens into CSS in JS variables and definitions. -
Style Dictionary
Export your design system tokens to Style Dictionary format.
Select one of our new exporters to test out the configuration features.
Key features
- Comprehensive token type support: Generates CSS from all Supernova token types, including colors, text styles, shadows, dimensions, and more.
- Brand & theme support: Seamlessly generate CSS for different brands and themes.
- Flexible output configuration: Adjust settings to generate CSS in a variety of ways.
- Custom formatting options: Supports various formats like HEX, RGB, camelCase, and more.
- Comment support: Optionally include descriptions for each token and a disclaimer to discourage manual modifications.
- File organization options: Can generate output in various ways depending on the exporter, for example separate files for each token type, or files separated into folders by theme.
Stay tuned — we will also be releasing more exporters (including for vector assets) in the coming weeks.
We’re excited for you to explore these updates and can’t wait to hear your feedback!
For a list of smaller improvements and bug fixes, visit our Bug fixes page here: