There are a few key requirements for a successful import. Make sure your Figma file checks the following boxes before importing.
If you meet these requirements, importing should be smooth and simple! If you're running into problems, check out our Troubleshooting section to see if there's an easy solution.
Import styles
Import Figma styles and convert them to design tokens in Supernova. To import Figma variables, see Importing Figma variables.
✅ The file contains at least one style
Double check that the file contains styles before importing.
✅ The style(s) are used in the file
Supernova can only recognise and import styles that are used in the Figma file, which means they must be applied to an element in the file. This can be as simple as applying a color style to a rectangle shape.
ℹ️ Styles are either published or unpublished
If some styles appear to be missing or you do not see the styles you expected, it may depend on the Import scope setting.
- When a file is first imported to Supernova, we detect if the file is a Figma Library and if it contains published styles. If it does, only published styles will be imported
- If the file has not been published and does not contain published styles, all styles will be imported even if they are unpublished.
This setting can be changed in the Edit import scope dialog for each file in the Data sources section. Just check or uncheck the “Import published styles only” option.
Import components
Import Figma components to Supernova that can be connected to components in Supernova, or used directly in documentation.
✅ The file contains at least one component
Double check that the file contains at least one component before importing.
✅ Components are published
Supernova only imports published components from Figma libraries.
Import vector assets
Import vector assets such as icons to Supernova that can be used in documentation.
✅ Assets are Figma components with an export configuration
Make sure any assets you want to import are components marked with an export configuration in Figma. See Add an export configuration in Figma.
✅ The relevant components are published
Supernova only imports published components from Figma libraries.
Import layers
If you would like the option to choose from a list of all layers in your Figma file when selecting Frames in documentation, you can enable importing Layers.
This can be done in the Edit import scope dialog for the file in Data sources, or by enabling layers from an Image or Figma frame block in the documentation editor.