Custom properties

Custom properties can be used to extend the definition of tokens in your design system, allowing more possibilities for working with tokens in code.

Structure of a property

A custom property consists of the following structure:

Name

Description

Name

Name of the property

Code name

The code friendly name that will be used in code generation

Type

The type of value (text or string, number, or boolean)

Default value

The default value of the property

Once a property is defined, everything but the type can be edited.

Define custom properties

Custom properties for tokens are applied at the design system level, to all tokens, and can be overridden for each token. You can create, edit and remove custom properties of a design system.

Design system → Settings → Custom properties

Only owners and admins can define custom properties. See Permissions.

Create a custom property

  1. In your design system, navigate to the Settings page

  2. Click + New to create a new property

  3. Enter the details of the property: name, code name, type, and default value

  4. Click to save (or x to cancel)

Creating a custom property

Edit a custom property

  1. To edit a property, edit the name, code name or value

  2. Click to save

Note → Once the type has been defined and the property saved, it cannot be changed

Remove a custom property

  1. To remove a property, hover and click Remove

  2. In the dialog, type DELETE to confirm

Removing a custom property will also remove all token overrides

Override token properties

Custom properties defined at the design system level can be overridden on any token.

  1. In your design system, select a token and click to open the edit dialog

  2. Under > Custom properties you will find a list of the properties you have defined

  3. Change the value of the property you wish to override

  4. Click Confirm to save

Override custom properties for a token

Remove a token override

  1. To remove a token override, click the reset icon in the input to reset it to default

  2. Click Confirm to save

Reset override to default

Remove all token overrides

  1. To remove all overrides for a token, click the ••• icon to open the menu

  2. Click Reset all overrides to reset all to default

  3. Click Confirm to save

Reset all overrides

Using custom properties in exporters

Custom properties are available in the data model used by your exporter. These properties are not integrated by default, but your exporters can be modified to use them.

For example, tokens used across multiple platforms can define different names for each platform using custom properties. Then tokens can be filtered by platform, and the properties used in different exporters.