Design system overview

The design system overview helps you stay on top of your workflows and take full advantage of Supernova’s capabilities. Connect data sources to get started and set up code automations to streamline code delivery.

---

Basic overview of imported data

Track the growth of your design system with a summary of imported data displayed at the top of the Overview page.

---

Connect data sources

From the Overview page you can easily add new data sources, set up code automation pipelines, and keep an eye on statuses to stay on top of everything happening in your design system.

To connect Figma library:

1. Click on Import library if there are no files connected yet, or click + Connect new file if you have already added Figma files previously.
2. Paste the URL of the Figma file you want to import design data from.
3. If the file contains styles and you would like to import them as tokens, toggle the switch ON.
4. Click Import. If you have authorized Figma already, your import will start immediately. If not, you'll first be prompted to authorize Figma, and your import will resume once this is completed.
5. Your design data will now be imported to Supernova!

To connect Figma variables plugin:

1. Click on Install plugin. You will be directed to Figma community plugin page to install it.
2. Open the Supernova Figma Variables Sync plugin in the file containing your variables.
3. Click Sign in to Supernova to a open browser window where you sign in to your Supernova account using your credentials. You can use either email and password or SSO (Single Sign-On).
4. Once you're signed in, close the confirmation window and return to the plugin.
5. Select the collections you want to import to Supernova.
6. Click Push to Supernova. The sync process should only take a few seconds.
7. Your variables will now be imported as tokens to Supernova!

---

Set up code automation

To set up a code automation:

1. Once you have imported design system data, you can then click + New pipeline to open the pipeline creator.
2. Follow the steps from detailed documentation about creating code pipelines.