Tokens 101

Translate styles into design tokens, and create a common language between designers and developers.

Design tokens are style definitions in your design system. They are simple representations (key/value pairs) of design decisions that can be consumed by the codebases and projects using your design system.

All tokens consist of a name and value, and an optional description. Tokens in Supernova can have different types of values depending on the type of token.

Tokens can be imported from existing styles in your Figma files, or via our Tokens Studio integration. You can also create tokens from scratch in Supernova.


What you can do with tokens in Supernova:

  • Create tokens from imported Figma styles.
  • Create custom token types.
  • Create or import theme tokens.
  • Manage progress and statuses for many token properties in a single view.
  • Export and automate delivery of tokens to code platforms.
  • Display tokens in your documentation.

Tokens created from Figma styles

When you import from Figma into Supernova, your styles are automatically converted into design tokens.

Figma styles consist of color, text, and effects that will be assigned to your newly created tokens in Supernova.

This is an example of how Figma styles map to Supernova tokens:

In Figma

 

In Supernova

Fill style

Color or gradient token

Text style

Typography token

Effect style

Shadow or blur token