How Figma works with Supernova

Supernova works with 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.
• Import Figma variables as design tokens in Supernova.
• Automatically import any updates from your Figma files and libraries.
• Create themes and references of Figma styles using tokens.
• Display imported styles, components, and vector assets in your documentation.
• Display Figma frames or embed files in your documentation.

---

Working with Figma libraries

Supernova is designed to work seamlessly with Figma libraries which contain the most up-to-date version of your design system elements.

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.

• 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.

1. 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 library... from the menu.
4. Enter a description (optional) and click Publish.

Do I need to publish my file?

You no longer need to publish your Figma file as a Library, but we recommend that you do. With Supernova you can import:

• Published or unpublished styles
• Published components and vector assets
• Any layers from your file (these can be selected in documentation)

See the Figma import checklist for more details.

2. Import Figma library

---

How Figma styles are imported to Supernova

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