Creating tokens

In Tokens Studio for Figma, you can create reusable and semantic tokens which you can then reference in your design process.

Creating a new token via the UI is a simple process. As an example, create a new token in the Colors group by clicking on the + icon in the Colors group.

In the modal that appears, give your token a name, for example colors.blue with a value of #0000FF, save your progress by clicking Create.

Editing tokens#

To change the value of an existing token, right click the token you wish to edit and select Edit Token.

You can also change the name of the token, which will automatically update all references to this token.

Duplicating tokens#

To duplicate a token, right click the token you wish to duplicate and select Duplicate Token.

Token groups#

As having a lot of tokens can become quite messy, you can nest tokens by using a dot-notation in their name, for example colors.button.background.primary.

You can remove token groups by right-clicking them and selecting Delete which will remove all tokens under that group.