After you have created your account and workspace, you can create your first design system. This design system in Supernova will be the home for all of your design system data, from all sources.
+ New to create a new design system.
Enter a name and description.
Confirm to create your new design system.
Once a design system has been created, the name and description can be edited at any time from the design system settings page.
Link your design system files and keep everything in sync — update your design system data directly from your design editor with Supernova's design tool integrations.
Use the plugin to import your design system data, create references and themes, and send design updates to your documentation and automated code processes.
In Figma, go to the Supernova plugin in Figma Community. Alternatively, in the Figma main menu under Plugins → Browse plugins in Community, search plugins for "Supernova".
To open the plugin, open any Figma file and select Supernova from the main menu under Plugins → Supernova.
Once you have created your design system and installed the Supernova plugin, you can now connect a Figma file and begin import. Figma text, color, and effect styles can be imported, which will be referred to as tokens in Supernova.
In the Supernova plugin, open the document you would like to import from, and click on the
Start Import button.
(If this is not your first import, click the Import icon, or select Import from Figma from the main menu).
If the Figma file has not yet been linked, you will be prompted to link it now. To link this file to your design system, click
When the import is complete, you will see a summary of imported tokens. Click
Done to return to the main plugin window and view imported tokens and components.
In Supernova, linking a file means that any changes made to previously imported data from your Figma file will be automatically updated during subsequent imports to Supernova.
In Figma: open the file you would like to link to the selected design system (if one has not already been linked).
In the Supernova plugin: when prompted to Link Figma File, click
You can optionally add the
Figma URL of the linked file to Supernova. Supernova will store this information to help other users of the design system navigate to the correct file.
In the Supernova plugin: from the main menu
Open Source File.
If the source file URL has not yet been configured, enter the Figma file URL in the dialog and click