Getting Started

Next steps to help you get started with Supernova.

Create a Design System

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.

  1. Click + New to create a new design system.

  2. Enter a name and description.

  3. Click Confirm to create your new design system.

Creating a 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.

Install the Design Editor Plugin

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.

The Supernova Plugin for Figma

Install the Supernova plugin for Figma

  1. 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".

  2. Click Install.

  3. To open the plugin, open any Figma file and select Supernova from the main menu under Plugins → Supernova.

Installed Supernova plugin in Figma community

Import your Design Content

Import from Figma

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.

TIP Slash convention file naming and group structure are preserved on import.

Import in progress
  1. 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).

  2. 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 Confirm.

  3. 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.

Import summary

TIP The length of time to import depends on the size of the design system.

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.

  1. In Figma: open the file you would like to link to the selected design system (if one has not already been linked).

  2. In the Supernova plugin: when prompted to Link Figma File, click Confirm.

Configure Figma File

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.

  1. In the Supernova plugin: from the main menu , select Open Source File.

  2. If the source file URL has not yet been configured, enter the Figma file URL in the dialog and click Confirm.

Configure Figma file