Supernova adapts to the way teams are already using Figma — by sharing and collaborating on design systems using Figma libraries. Styles, components, assets and frames can be imported to Supernova from your existing Figma files and libraries.

Using Supernova with Figma:

• Import styles, components, assets and frames to Supernova
• Automatically get updates from your Figma files and libraries
• Create themes and aliases of Figma styles using Tokens
• Display imported styles, components, and assets in your documentation
• Show Figma frames or embed files directly in documentation

Figma libraries

What is a Figma library?

• A Figma library is a collection of styles and components that can be shared across teams.
• When you publish a file in Figma it becomes a “library”, and these components and styles can be used across other files.
• Whenever a Figma library is published, any changes are pushed to other files that are using this library.
• Team members working in other files can then choose to accept (or dismiss) the updated styles and components.

Publish a file in Figma

Share styles and components with your team.

1. Open the file in Figma
2. Click the down arrow next to the file name in the toolbar
3. Select Publish styles and components from the menu
4. Enter a description (optional) and click Publish

Figma menu bar

Why do I have to publish my file?

Libraries help keep design system content up to date, since only the most recent versions of styles and components are shared for use by teams across other projects.

Publishing makes the library available to Supernova and communicates to Supernova that this is the most up-to-date version of your design system.

Styles in Figma

Styles imported into Supernova

Styles in Figma consist of color, text, and effects that will be assigned to "tokens" in Supernova. An example of how Figma styles map to Supernova tokens:

Creating a fill style in Figma

Create a Figma style

1. In Figma, select a layer or object to create a Fill style for.
2. In the properties panel under the Fill section, click the style icon :: next to the property you would like to save.
3. Click the + icon in the Color styles panel to create a new style
4. Give the style a name and description and click Create style.

Use the + button to create a new style

Components in Figma

Figma components can be imported and linked to Supernova components.

Import components from Figma

1. Create a component in Figma.
2. Add the Figma file as a data source, and import.
3. In the Components tab of Supernova, create a new component.
4. In the Figma component column, click + Link component and select a Figma component.

Components created in Figma and imported to Supernova

Assets in Figma

An asset is created from any components in Figma that have an export setting, for example, icons.

Import assets from Figma

1. In Figma, select a component that you would like to import as an asset.
2. In the right sidebar under Export, click the + icon.
3. Select any export format.
4. This can now be imported as a Supernova asset.

Assets created in Figma and imported to Supernova

Importing from Figma

We recommend you view the Import checklist when importing your first Figma file, to make sure it meets the requirements.

Get updates from Figma

I've made a change in Figma, how do I see it reflected in Supernova?

If you have made a change in a Figma file, you must first publish the library again in Figma (see step above). Then, in the Figma tab in your Supernova design system, click Get updates to fetch the latest from Figma.

Managing your Figma account

You'll find options to manage your Figma account settings under Profile settings -> Integrations.