You can use one, or multiple, Figma design files as sources for your design system content in Supernova. The first time you import from a file, it gets connected to your design system in Supernova, and you can import styles, components, assets and layers from it. Supernova will automatically import any further changes made to the file in future.
Import from a Figma file
Before importing your Figma file, we recommend you review the Figma import checklist to ensure that your design system data will be imported as expected.
Import a specific type of data
You can import design system data from each section in Supernova — for example, you can import tokens from the Design tokens section.
When you go to a section for the first time, you'll see a screen showing all available integrations. Click Import from Figma to proceed with importing your Figma file.
Import all types of data from a file
You can also connect a file in the Data sources section.
- In the Sources menu, click Connect file in the Figma integration card.
- In the dialog that opens: paste the URL of the Figma file you want to import design data from.
- There's an option to import tokens from the file (if it contains styles). If you want to import tokens, toggle the switch ON.
- If no styles from this file have been published, all unpublished styles will be imported to Supernova.
- If the file has published styles, only published styles will be imported
- You can change this setting later in the Edit import scope dialog for each file in the Data sources section.
- Click Import. If you have authorized Figma already, your import will start immediately. If you haven't, you'll be prompted to authorize Figma, and your import will start once this is done.
Your design data should now be imported to Supernova!
The import summary
When your data has finished importing, you'll see an Import completed message pop up. Clicking View summary in this message toast will open your import summary, where you can see exactly what was imported to Supernova from your Figma file, and whether any issues occurred.
- In the Styles section, you can see how many Figma styles were converted to design tokens, and how many were updated or removed if some have already been imported from this file.
- In the Components section, you can see how many Figma components were imported, and how many were updated or removed if some have already been imported from this file.
- In the Vector assets section, you can see how many assets were added, and how many were updated or removed if some have already been imported from this file.
Import updates from a Figma file
- You can import updates any time, in any section of the product, by clicking the Import updates button.
- You can also click Import updates in the Data sources section.
- If you've made a change to published styles in a Figma file, you’ll need to publish the library again in Figma (see step above).
Automatic updates
Alternatively, Supernova can automatically import updates from your files on an hourly basis. Learn how to enable or disable automatic updates in Managing connected Figma files.