
Extend the definition of tokens in your design system, allowing more possibilities for managing your tokens and for working with them in code.
Using token properties
With token properties you can add more layers of information about the tokens in your design system such as statuses, code names, boolean values and links to documentation or other external sources.

Token properties in Supernova
These properties can be used to:
- Manage and analyze tokens.
- Export tokens to various code platforms.
- Send additional parameters to code exporters (e.g. to use for conditional rendering).
- Display in Supernova documentation.
Examples of token properties
There are many ways how to use token properties. Here is a list of a few examples of how others use properties for design tokens.
Name |
Type |
Description |
---|---|---|
Internal token |
Boolean |
For tokens that are not supposed to be exported as variables to code. These tokens are created only for easier management of our token set. |
CTI structure |
Text |
For generating variable names based on CTI structure (Category / Type / Item) as defined in Style Dictionary or any other token naming schema (like in Mineral UI). |
Deprecated |
Boolean |
If the token is not supposed to be used anymore in new components, but still needs to exist in the codebase before removed completely. |
Themeable |
Boolean |
If the token is themeable or not (as seen e.g. Salesforce Lightning). |
Group |
Text |
For structuring design tokens into groups, so it can be used by exporters for generating Sass maps (like in this article by Cristiano Rastelli). |
iOS/Android/Web Platform |
Boolean(s) |
To define which tokens are supposed to be generated for a specific platform and which to ignore (e.g. tokens for responsive breakpoints only for web, nothing else). |
Default properties
Some properties are shown in the token view by default.

Property Name |
Description |
Required? |
---|---|---|
Name |
The name of the token. |
Yes |
Value |
The default value of the token. |
Yes |
Description |
Description of what the property should be used for. |
Yes |
Last edited |
When the token was last edited. |
Yes |
Token set |
Name of a set if a token belongs to one (for example, Core) |
No |
Managing properties
Create a new property
- In the tokens view, click the + button to add a new property.
- Enter a name, description (optional), code name and select a type (see Types of properties above).
- Click Confirm.
- A new property column will be created and the values can be filled in for each token.

Creating a new token property
Types of properties
The following types of properties can be created for a token.
Property type |
Description |
---|---|
Text |
A common text value. |
Number |
A numeric value. |
Boolean |
A true or false value. |
Generic |
Similar to text. |
Select |
A selection with one or more options. |
URL |
A link to an external URL. |
Documentation link |
A link to a Supernova documentation page. |
Property requirements
Type |
The type of property. |
---|---|
Name |
Name of the property. |
Code name |
The code-friendly version of the property name, and the name to be used in code generation. This is generated from the name, but you can optionally change it. |
Description (optional) |
Description of how the property should be used. |

Token property menu
Edit property
- Click the property column header and select Edit from the menu.
- Edit desired values and click Confirm.

Editing a token property
Edit value property
The value property can be linked to one or more data sources. To edit these sources, click Edit in the value property header.

Value property edit menu
Add a source
- In the edit value dialog, select a data source from the list to add it.
- Click Confirm.
- Tokens will be created from imported styles. Figma style names should be unique in both source files, or else they will override each other.
Add a new source
- In the edit value dialog, select + New data source from the list to add it.
- Click Confirm.
- Tokens will be created from imported styles.
- Any existing tokens will be linked if the style name matches (if they are not already linked to another data source).

Adding a new data source
Remove a source
- To remove a source, deselect it from the data source dropdown.
- Click Confirm.
- Tokens will be converted to raw values, and their connection to the source file will be removed.

Editing data sources
Delete property
- Click the property column header and select Delete property from the menu.
- All property values and any references in documentation will be removed.

Token property menu

Deleting a property