Tokens Studio

Tokens Studio is a powerful tool for managing design tokens, acting as a bridge between design and development. It ensures that both designers and developers work with the same set of styles, maintaining consistency and streamlining the workflow. By integrating with Figma and providing a structured JSON output, Tokens Studio allows for a single source of truth for all design-related properties.

For Designers

As a designer, your primary interaction with the design tokens will be through the Tokens Studio plugin in Figma. This workflow allows you to modify the visual language of the application directly and see the changes reflected in the design components.

Importing Tokens

To begin working, you first need to load the existing design tokens into Tokens Studio. You have two options:

Upload JSON: You can upload the tokens.json file directly into the Tokens Studio plugin. This file is the single source of truth for design tokens.
Repository Sync: For a more integrated workflow, you can connect Tokens Studio to the Git repository. This allows you to pull the tokens.json file directly and keep it in sync with the latest changes.

Editing Tokens

With the tokens loaded, you can use the Figma plugin to edit their values. For example, you can change colors, spacing, or typography.

Warning

It is important to remember that you should only edit the values of existing tokens. You cannot add or delete tokens, as this would be a “breach of contract” with the established design system and would cause the application to break.

To see the effect of your changes, you can import the Fusion Figma library and add some of its components to your document. The components in the library are linked to the design tokens, so any changes you make will be reflected in them.

Distributing Changes

Once you are satisfied with your changes, you need to distribute them so they can be used by the developers. Again, you have two options:

Export JSON: You can export the tokens as a tokens.json file from the Tokens Studio plugin. This file should then be shared with the development team.
Commit to Repository: If you are using the repository sync feature, you can commit your changes and push the updated tokens.json file to the repository. This is the preferred method as it keeps a clear history of all changes.

For Developers

As a developer, you will consume the design tokens generated by the designers to build and style the UI components. The workflow is centered around the tokens.json file and a command-line interface (CLI) tool that transforms these tokens into usable code.

The `tokens.json` file

The tokens.json file contains all of the token values and can be used as input for generating a theme for your application.

Note

The schema for the tokens.json file is explained in the fusion-cli reference documentation.

Generating Themes

To use the tokens in your code, you need to transform the JSON file into a format that your application can understand. You can do this using the Fusion CLI tool’s theme generate command.

This command reads the tokens.json file and generates theme files for different platforms.

Command Usage


npx @codedazur/fusion-cli theme generate [options]

Options

Option	Description	Default
`-s, --source <source>`	The source file containing the design tokens.	`./tokens.json`
`-d, --destination <dest>`	The destination folder where the generated theme files will be saved.	`.`
`-n, --name <name>`	The name of the theme.	`default`
`-e, --exclude <sets...>`	One or more token sets to exclude from the transformation.	(none)
`-p, --platform <plats...>`	One or more platforms to generate themes for.	`vanilla-extract`

Available Platforms

You can generate themes for the following platforms:

vanilla-extract
css-modules

Example

To generate a theme named my-theme for both vanilla-extract and css-modules, you would run:


npx fusion theme generate -s ./tokens.json -d ./themes -n dark -e theme/light -p vanilla-extract

This will process the tokens.json file and create the necessary theme files in the specified destination. You can then import these files into your application to style your components.