What you can do with Figma in Supernova:

• Connect one or more Figma library files to automatically fetch updates to your design system data
• Import your Figma styles to Supernova as tokens
• Display Figma frames in your documentation site and update them all in unison
• Embed Figma files in your documentation

Figma Libraries

Supernova mirrors the way teams are already using Figma to create and share their design systems using Figma libraries

Tokens, components, and assets can be imported to Supernova from your existing Figma libraries.

---

What is a Figma library?

A Figma library is a collection of styles and components that have been published. Publishing a file (as a library) means these styles and components can be shared with your team and used across other files.

How to publish a library in Figma

Publishing a library in Figma makes all of your styles and components searchable and shareable with your team and across other files.

In Figma:

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

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.

---

Figma Styles

Styles imported into Supernova

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

• Fills → Colors or gradients
• Text → Typography and Fonts
• Effects → Shadows and Blurs

Supernova also provides more options for tokens that can be custom made but not imported from Figma. See Types of tokens for more details.

How to create a Figma style

In Figma:

1. Select the object to create a style for (for example, a shape with a background color)
2. In the properties panel, click the :: icon next to the property you would like to save (in this case, background color)
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

---

Figma Components

Components in Figma are converted to Components and Assets in Supernova.

An example of how Figma components map to Supernova tokens:

• Components → Components
• Components → Assets (any components in Figma that have an export setting, icons for example)

How to create an asset in Figma

In Figma:

1. Select the component you would like to import as an asset
2. In the right sidebar, click the + in the Export section
3. Select any export format to include it in assets
4. Once something has an export setting in Figma, it is considered an asset in Supernova and can be exported (in any format).

---

Import from Figma

For more information about importing your Figma content into Supernova, see the following pages. 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. See Get updates for more details.