Create your first token

Creating tokens

Create a new token

1. To create a new token, click + New Token.
2. In the new token row, enter a token name.
3. Click the token value to edit.

Creating a new token in Supernova

Create new tokens from a data source

1. To import tokens from a data source, click + New data source.
2. Enter a link to a Figma file, and click Import to import Figma styles as tokens.
3. When import is complete, your imported tokens will appear in the list.

Adding a data source

Tokens imported from Figma data source

Editing tokens

You can edit a token by editing any of its properties. Click on the item in the row to edit the value of a property.

Editing, grouping, ungrouping and deleting tokens imported from Figma must all be done within Figma. All changes to imported tokens should be re-imported into Supernova.

Properties not imported from Figma can always be edited.

Editing property values

Edit token name

1. To rename a token, click on the name to edit it in place.
2. Click outside the input to save.

Editing a token name

Edit imported token name

1. To edit an imported token name, open the file in Figma.
2. Rename the associated Figma style.
3. Publish changes to Figma library.
4. In Supernova, click Get updates to import updates to tokens.

Edit token value

1. Click the token value you would like to edit. If you want to edit a theme value, make sure to click the value in the relevant theme column.
2. In the dialog, enter the new value.
3. Click Confirm.

Editing a token value

Editing a color token

Edit imported token value

1. To edit an imported token value, open the file in Figma.
2. Change the value of the associated Figma style.
3. Publish changes to Figma library.
4. In Supernova, click Get updates to import updates to tokens.

Imported token values cannot be edited in Supernova

You can create references for imported tokens in Supernova

Copy token value

1. Hover over the token value you would like to copy.
2. Click the Copy Value icon.
3. The value will be copied to your clipboard
4. To change the format to copy for a color token, change the format using the color format dropdown.

Copying a token value

Changing the color format

Edit description

Edit a token description by typing in the description cell.

Editing a token description

Edit other properties

Edit any other token property values by interacting with the inputs in each cell.

Editing a boolean property

Edit theme tokens

You can edit theme tokens created in Supernova directly in your design system.

1. 1. In Tokens view click on the token value in the relevant theme's column.
2. 2. In the dialog, enter a value for the new theme token. Click Confirm.
3. To edit the token's name or description, click into the relevant field and edit directly in the table.

Imported tokens need to be edited in Figma. Supernova will then automatically fetch updates from your theme's data source file. You can also manually import these updates by clicking the Get updates button in the top right corner of your design system.

Resize and reorder columns in token view

It's also possible to adjust the width of each column in the token table. This works the same as most other interactive tables ⁠— simply click the edge of any column (you'll see the rezise icon appear on hover) and drag to resize it to the desired width.

Click the column in the middle and drag to reorder them.

Deleting tokens

Deleting a token

Delete a token

1. Hover the token you would like to delete and click the ••• button at the end of the row.
2. Select Delete token.
3. If there were any tokens with an alias to this token, the dialog will show the affected tokens. They will revert to static values.
4. In the dialog, click Confirm to delete.

Deleting a token with dependencies

Delete an imported token

1. To delete an imported token, open the file in Figma.
2. Delete the associated Figma style.
3. Publish changes to Figma library.
4. In Supernova, click Get updates to import updates to tokens.

Grouping tokens

Group imported tokens

Groups created in Figma with the slash naming convention will be preserved when imported into Supernova. To edit a Figma group, make the change in Figma and re-import.

1. To delete an imported token, open the file in Figma.
2. Delete the associated Figma style.
3. Publish changes to Figma library.
4. In Supernova, click Get updates to pull updates to tokens.

Create a new token group

1. Locate the token you would like to add to a group, and click ••• to open the edit menu.
2. Click Move to Group > and select + New group.
3. Enter the new name for the group.

Creating a new token group

Add or remove tokens from a group

1. Locate the token you would like to add to a group, and click ••• to open the edit menu.
2. Click Move to Group > and select a group to add it to, or create a new group.
3. To remove from a group, click Move to Group > and select No group.

Delete a group

1. Open the group context menu with •••.
2. Select Ungroup from the options.
3. Tokens inside this group will be moved up one level, and the group will be deleted.

Deleting a token group