Custom properties

Learn how to manage custom properties in your design system.

Create a new custom property

1. In the Tokens table or Components table, click the + button.
2. Click New custom property from the dropdown menu.
3. In the dialog, enter a name and select which type of property you want to add.
4. Open the More options section of the dialog to add a description or edit the identifier for code (if you don't edit this, it will be automatically created based on what you named the property).
5. Further fields may appear in the dialog depending on which custom property type you choose.
6. Click Create property.
7. A new custom property column will be created and the values can be filled in for each token.

Creating a new token property

Custom property requirements

Edit a custom property

Editing a custom property

1. In the property column header, click ... to open the context menu.
2. Select Edit from the menu.
3. Make any necessary edits and click Save.

Edit and remove select property options

A select property type requires one or more options. When creating the property, you will have the opportunity to add options in the dialog. Select options can be edited or removed at any time.

In the Edit property dialog, you can:

Move option

1. Select the drag icon to the left of the option row.
2. Click and hold. Drag the option to move it.

Edit option color

1. Cick the color preview to select a new color.
2. Click the Reset icon to reset the color to default.

Remove options

If an option is removed it will be removed from all components that contain that value.

1. Click the x icon to remove the option.

Delete a custom property

1. In the property column header, click ... to open the context menu.
2. Select Delete property from the menu.
3. In the dialog, enter the text DELETE to confirm.
4. All custom property values and any references in documentation will be removed.