Creating tokens

Design tokens are created where designers work — in their preferred design editor — and imported into Supernova

Import design tokens

Certain types of tokens are created from the styles you are already using in your designs. You can import these tokens from your design editor of choice.

Imported Figma styles are converted into the following Supernova tokens:

  • Text styles → typography tokens

  • Color styles → color or gradient tokens

  • Effect styles → shadow tokens

Create other tokens

The remaining token types can be created in Supernova, and are from imported design tokens. Any token that is meant to be used programmatically can be created this way, and it applies to any type of token.

Create a new token

  1. In Supernova on the web, open your design system

  2. Under the Tokens tab, select the type of token you would like to create from the left menu

  3. Click the + New button in the top right corner to open the Create Token dialog

  4. Enter the token name, description, and value(s)

  5. Click Create to finish creating the token

Creating a developer token