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 frames from it. Supernova will automatically import any further changes made to the file in future.
Import from a Figma file
- You can import design system data from each section in Supernova — for example, you can import tokens from the 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.
Or, you can also connect a file from the Figma panel to the left of the screen in the Design data section, find the Figma integration panel and click Connect file.
- A dialog will open — in it, 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.
- 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 General section, you can see how Figma frames and components were imported.
- In the Design tokens section, you can see how many tokes were added, and how many were updated or removed if some have already been imported from this file.
- In the Assets section, same as tokens, you'll see how many were added, updated and removed.
- You'll also see any errors that occured during import. You can find an explanation of these in Troubleshooting.
Import updates from a Figma file
If you've made a change in a Figma file, you need to first publish the library again in Figma (see step above).
You can import updates any time, in any section of the product, by clicking the Import updates icon button.
Then, in the Figma integration section in Design data, click Import all updates to fetch the latest from Figma.
Alternatively, Supernova can automatically import updates from your files on an hourly basis. Learn how to enable or disable automatic updates in Managing integrations.