Custom properties

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 -> 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 Design System Settings > Properties
  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)

Edit a custom property

  1. In your design system, navigate to Design System Settings > Properties
  2. Edit the name, code name or default value of the property
  3. 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