Integrate Supernova with your Figma account to keep your design system data always in sync and up to date
What you can do with Figma in Supernova:
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.
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.
Publishing a library in Figma makes all of your styles and components searchable and shareable with your team and across other files.
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 consist of color, text, and effects that will become "tokens" in Supernova. An example of how Figma styles map to Supernova tokens:
Supernova also provides more options for tokens that can be custom made but not imported from Figma. See Types of tokens for more details.
Types of tokens
The types of tokens used for building your design system in Supernova
Import from Figma
Import your design system elements to Supernova
Components in Figma are converted to Components and Assets in Supernova.
An example of how Figma components map to Supernova tokens:
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.
Confirm your Figma file meets the import requirements
Having problems with import? Check here
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.
Get updates when changes are made in your Figma files
This documentation was created using Supernova's fully customizable documentation engine.Start building your docs now!
© 2022 Supernova.io