Token properties

Extend design tokens with custom data.

Plan: All

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

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.
For example, for having tokens in Measures for referencing purposes, but not meant to be used in final code components.

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

  1. In the tokens view, click the + button to add a new property.
  2. Enter a name, description (optional), code name and select a type (see Types of properties above).
  3. Click Confirm.
  4. A new property column will be created and the values can be filled in for each token.
Creating a new token property

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

Token property menu

Edit property

  1. Click the property column header and select Edit from the menu.
  2. Edit desired values and click Confirm.
Editing a token property

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

Value property edit menu

Add a source

  1. In the edit value dialog, select a data source from the list to add it.
  2. Click Confirm.
  3. 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

  1. In the edit value dialog, select + New data source from the list to add it.
  2. Click Confirm.
  3. Tokens will be created from imported styles.
  4. 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

Adding a new data source

Remove a source

  1. To remove a source, deselect it from the data source dropdown.
  2. Click Confirm.
  3. Tokens will be converted to raw values, and their connection to the source file will be removed.
Editing data sources

Editing data sources


Delete property

  1. Click the property column header and select Delete property from the menu.
  2. All property values and any references in documentation will be removed.
Token property menu

Token property menu

Deleting a property

Deleting a property