In Supernova, you can select which content gets imported from your data source – these parts of the data source that we are using for imports are called source usage.
You can both select which content you want to import when adding a data source, and add or remove content from the data source to your design system at any time.
Styles
Styles are collections of properties that can be applied to elements in your designs, and reused throughout. You can use styles for colors, text, and other layer effects.
Importing a style from a data source in Figma will create a token in Supernova. These tokens are used for building your design system, and each has a name, a value, and an optional description.
You can also import tokens from a data source to a specific theme in your design system, for example, dark mode.
Tokens that have accompanying style definitions in your Figma file can be imported: color, gradient, shadow, and typography.
Custom tokens (such as border, radius, measure, etc.) can created manually in Supernova.
Components
Components consist of a collection of the smaller aspects of design elements — buttons, checkboxes, inputs, and so on — which are used in UX and design patterns throughout your designs. You can also create instances of components.
You can import components from Figma into Supernova, or create new components directly in Supernova. To import components from Figma into Supernova, they must be published in a library, and used somewhere in the file.
Assets
In Supernova, assets are exportable components (meaning any component that you may want to export) that are used in your design system. Any components that are exportable in your Figma file will be imported into Supernova as an asset.
You can then display assets in your documentation using Asset blocks.
To import assets into Supernova, make sure the relevant components are marked as exportable in your data source file on Figma.
Frames
Frames in Supernova are the same as frames in Figma — essentially, they’re top-level containers for your designs or designs elements.
You can import Figma frames into Supernova from a data source, and use them in your documentation. If you have enabled automatic updates, the frames used in your documentation will update to reflect any changes made to them in the data source; this will also occur if you manually update your data source imports.
