Importing from Figma

Import from Figma Plugin

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