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 |