Tokens 101

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

Tokens in Supernova

Tokens in Supernova

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 design editor, or custom tokens can be created directly in Supernova.

What you can do with tokens in Supernova:

  • Create tokens from import 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 (using Exporters)
  • Display tokens in your documentation
Token view anatomy

Token view anatomy

A — Token properties

Each column represents a token property.

B — Token

The token and all associated property values.

C — Token value

The default value of a token.

D — Token type

Change the token type.

E — Color format

Change the color format for color tokens.

F — Filter

Filter tokens by names and property values.

G — New token

Create a new token.

H — New property

Create a new token property.

I — Edit token

Edit or delete a token (imported tokens cannot be edited).


Tokens created from Figma styles

Tokens can be created from imported Figma styles. Figma styles consist of color, text, and effects that will be assigned to "tokens" in Supernova.

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

->


In this section