Supernova.io - Design System of the Future
Supernova takes your design system data and allows you to use them directly inside your VS Code, represented in any language, technology, or tech stack you are developing for, from the convenience of your beloved IDE.
With Supernova, you can explore, build and publish exporters - packages that define how the code should be exported from your design systems and control them down to the last character.
Before you can access your design system data and export the code, you need to configure this extension with your personal Supernova Developer Access Key.
Obtaining Supernova Key
Navigate to Supernova Cloud and log in with your credentials. Then, navigate to your personal settings using the top-right menu and into the security section. There, you can generate the access key using the provided interface.
Please note that the access key is only visible once and must be generated again if you lose it, for security reasons.
Launch the Command Palette (
Currently, you can do the following:
This extension also allows you to build the exporters, packages that define how the code should be exported in regards to your codebase. As an example, you can generate CSS files with color tokens, Android theme definitions, React styles, or pretty much anything you can imagine - and code, because you are in charge of how the design data will be exported.
To help with exporter development, this extension brings a full suite of the required language functionality for the Pulsar, state-of-the-art templating language built with code generation in mind, so you can develop your export procedures quickly and easily:
There are several amazing things you can achieve using this extension, from generating styles using the design system data to producing dynamic instantiation code for your components to building complex exporters that can produce entire codebases - the choice is yours.
Navigate to Supernova developer documentation to learn how to build and use exporters to automate and kill code hand-off for good.
Have questions? Feel free to join our community over at Supernova Discord and we will help you right away!