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
|
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
Types of tokens
The types of tokens used for building your design system in Supernova
Working with tokens
How to add, edit, group and delete tokens in Supernova
Creating token aliases
Refer one token value to another
Token properties
Extend design tokens with custom data