Design Tokens

Use Design Tokens to create theming for Qt Design Studio projects. Define colors, booleans, numbers, and strings using the variables and collections in Design Tokens.

Enabling Design Tokens in Qt Design Studio

Design Tokens is an experimental feature in Qt Design Studio.

To enable the experimental features in Qt Design Studio:

Go to Edit > Preferences...
Select Environment > Qt Design Studio Configuration.
Select Enable Experimental Features, and then Ok.
${Enable \QDS Experimental Features}$

Next, select View > Views > Design Tokens. After the view is available, you can dock it anywhere in Qt Design Studio.

${\DT view in \QDS}$

Creating a collection in Design Tokens

Design Tokens are organized into collections, which serve as structured containers for grouping related design variables. These variables are categorized into the following groups:

Colors
Numbers
Strings
Flags

You can create multiple modes for each Design Tokens collection. However, only one mode can be set active at a time.

To create a Design Tokens collection:

In the Design Tokens view, select , and then select Create collection.
${Create a \DT collection}$
Use a unique name for the collection and select Create.

The created collection is automatically selected in the collection dropdown menu in the Design Tokens view. You can use this dropdown menu to switch between collections.

Note: You can locate this collection's qml in the Projects view. However, an empty collection does not appear. After adding variables to the collection, you can find it in the folder Generated > DesignSystem.

Design Tokens variables can be used in a binding. Check the example below:

Rectangle {
    color: CollectionDark.colors.background
}

You can use colors to connect a Color, numbers to connect a Number, strings to connect a String, and flags to connect a Boolean Design Tokens variable in a Qt Design Studio component's property binding.

${Connecting \DT collections with variables with functions}$

Removing an existing collection from Design Tokens

To remove an existing collection from the Design Tokens view:

Select the collection from the dropdown in the Design Tokens view.
Select and then select Delete.
Select Remove.

Creating variables in Design Tokens

In the Design Tokens view, variables can store different values for each mode within a collection. Variables can be bound to component properties to define values such as colors, text, numbers, or boolean flags.

After you define variables in one mode, you can create another mode and have different values for the same set of variables. You can bind these variables to different components to control their properties. Later, when you change the mode from the dropdown menu in the Design Tokens view, these changed values are immediately applied to the components.

To create a variable in Design Tokens:

Select a collection from the dropdown menu in which you want to add the variable.
Select + Create variable, then select the type of variable you want to create.
${Creating a \DT variable}$
After the variable is added to the collection in the Design Tokens view, you can rename and update it according to your preferences.

Note: Always use unique names for the variables.

Removing an existing variable from a Design Tokens collection

All the variables in a Design Tokens collection are removed when you remove the collection. However, to delete a single variable from a particular collection:

Select the collection from the dropdown in the Design Tokens view.
Right-click on the variable name and select Delete variable.
${Deleting a variable from a \DT collecction}$

Create a new mode in Design Tokens

Using modes in Design Tokens, you can store different values for the same set of variables. Just by switching the mode, you can change all the properties connected to those variables. With multiple modes defined, you can do quick design prototyping.

To create a different mode of the variables within a Design Tokens collection:

Select a collection from the dropdown menu where the variable exists.
Select + Create mode.

Note: A new mode copies all the variables of the first mode in the Design Tokens collection.

Removing an existing mode from a Design Tokens collection

All the modes in a Design Tokens collection is removed when you remove the collecton. However, to delete a single mode from a particular collection:

Select the collection from the dropdown in the Design Tokens view.
Right-click on the mode name and select Delete mode.
${Deleting a \DT mode}$

Editing an existing variable or mode

To edit an existing variable or mode in a collection:

Select a collection from the dropdown menu where the variable or mode exists.
Double-click on the value you want to edit, then update the value.
After updating the value, press Enter to confirm it. Alternatively, you can press ESC to cancel the update.
${Edit a \DT variable or mode}$

Including the Design Tokens library

Before including the Design Tokens library in your Qt Design Studio design file, you need to create:

A Design Tokens collection.
A Design Tokens variable for the Design Tokens collection.

Then, include the import library of the Design Tokens to your design file to make the Design Tokens functional. If you are creating the design in Screen01.ui.qml, double-click that file in the Projects view. Then go to the Code view, and at the top of the file include the code given below:

import Generated.DesignSystem

${Including \DT library to your \QDS design file}$

Afterwards, the variables you create in the Design Tokens are available to bind with your components.

Binding components to Design Tokens variables

${Binding \DT with component properties}$

To bind components to Design Tokens variables, you need:

The Qt Design Studio component you want to bind.
A Design Tokens collection with variables.

When you have all the required elements:

Select the Qt Design Studio component you want to bind in the 2D view.
Go to the Properties view and to the property that you want to bind.
Select in the property and select Set Binding.
Remove the existing data and write your binding logic there. Suppose your Qt Design Studio component ID is firstRectangle, you have made a Design Tokens collection named CollectionDark,and have a color variable named color_dark. Now, to bind this color variable with the Fill color property of the component, you write this in the binding:
```
CollectionDark.colors.color_dark
```
${Writing the binding logic in the \uicontrol Properties view}$
Select Ok to apply the binding logic. After the binding is applied, you can change between the modes in the Design Tokens view. The changes are directly applied to your component.

Binding variables between Design Tokens collections

You can bind variables between different Design Tokens collections.

To bind variables between two Design Tokens collections:

Select the collection from the collection dropdown in the Design Tokens view where the variable you want to bind is available.
Select the mode of the variable you want to bind to the Qt Design Studio component from the mode dropdown in the Design Tokens view.
Select next to the variable value and then select Set Binding.
Now write your binding logic and press Enter. Suppose your first Design Tokens collection is CollectionDark and you have a color variable in it named color_dark. Your second Design Tokens collection is CollectionLight and you have a color variable named color_light. Now, to bind the color_light variable with the color_dark variable, you need to write this as the binding logic for the color_light variable:
```
CollectionDark.colors.color_dark
```
${Binding variables between different \DT collections}$

Note: Cyclic binding is not allowed between variables in the same or different collections.

Getting Design Tokens through Qt Bridge for Figma

While you can always create Design Tokens in Qt Design Studio from scratch, you can also bring designs made with Figma with Qt Bridge for Figma and have the collections and variables used in Figma designs as local QML Design Tokens in Qt Design Studio.

To do that:

First, use Figma collections, variables, and modes to create a vaild design. To learn more about using collections, variables and modes in a Figma design, see here.
Now, use Qt Bridge for Figma to export this design for Qt Design Studio. To learn more, see Using Qt Bridge for Figma.

Note: Before exporting your Figma design for Qt Design Studio, in the Qt Bridge for Figma plugin, go to Settings > Additional settings, and select Export variables [BETA].

When you have the .qtbridge file exported through Qt Bridge for Figma, you are ready to follow the next steps:

Create or open a Qt Design Studio project.
Create a Design Tokens collection and variable. This adds the necessary Design Tokens files to your project.
Drag the .qtbridge file with your variable and design from Figma to the 2D view.
Go to the file that has your imported design, and in the Code view, include this:
```
import Generated.DesignSystem
```
Go to the Design Tokens view, and select your imported collection from the Collections dropdown. You can now bind these variables to locally created Qt Design Studio components as well.

Curves Effect Composer

Available under certain Qt licenses.
Find out more.