How Figma works with Supernova

Integrate Supernova and Figma to keep your design system data in sync.

null

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

Figma libraries

  • 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

null

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

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.


How styles in Figma work in Supernova

Creating a new local style in Figma

Creating a new local style in Figma

Creating a new local style in Figma

Creating a new local style in Figma

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:

In Figma

 

In Supernova

Color style

->

Color or gradient token

Text style

->

Typography token

Effect style

->

Shadow or blur token