Exporting Color and Number Variables

The ThemeBuilder plugin for Figma allows you to export color and number variables to any ThemeBuilder project. Once exported, these variables will be available for use within ThemeBuilder, enabling you to customize both Telerik and Kendo UI components, as well as any custom components you create.

Starting with version 2024 Q4, the ThemeBuilder plugin for Figma is also available in Dev Mode.

To export the desired variables:

Launch the Export Variables Wizard.
Select a ThemeBuilder project.
Select the variables for the export.
Generate names for the ThemeBuilder variables.
Map the variable modes.

Step 1: Launch the Export Variables Wizard

Open your design in Figma.
Go to the Main menu.
Hover over Plugins, then select Progress ThemeBuilder.
Log in with your Telerik account.
Select the Color Variables or Number Variables option from the plugin screen based on your needs.

"What Do You Want To Export" screen from the ThemeBuilder plugin, featuring options such as "Components", "Color Variables", "Number Variables", "Styles", and "Font Icons".

Step 2: Select a ThemeBuilder Project

To begin using the Export Variables Wizard, you first need to select a ThemeBuilder project where you want to export the variables. If you haven't created any ThemeBuilder projects yet, you can do so by following the instructions in Creating a New ThemeBuilder Project. If you already have existing projects, choose one from the ThemeBuilder Projects screen and then click Select.

"Select button highlighted with a project named "Custom Design System" selected from the plugin dialog.

Step 3: Select the Variables for the Export

Once you select a project, the plugin shows a tree structure of the color or number variables available in your current Figma document. To export the variables you want, check them and then click Next.

"Select variables to export" screen from the plugin dialog.

Consider the following when exporting color and number variables from Figma:

If you export to a project with existing variables, the plugin will list only the new or the updated ones.
Some variables may be linked by other variables. Selecting or deselecting these variables also selects or deselects their dependent variables.

Currently, the Figma API does not allow plugins to access libraries in Figma projects. As a result, the ThemeBuilder plugin is unable to export variables from files that are used as libraries in another project. However, you can export these variables by using the plugin's export functionality directly within the relevant files.

Step 4: Generate Names for the ThemeBuilder Variables

Variables in Figma can have complex paths because they may belong to nested groups. For example, a variable might be categorized as Colors/Components/Input/Default/Validation/info. When exporting these variables, you can choose the names under which they will be imported into ThemeBuilder.

To generate names for the ThemeBuilder variables, select the chips corresponding to the collection and groups you want to include. They will be appended as prefixes to the name of the variable.

"Generate names" screen from the plugin dialog with some of the chips selected.

Resolving Name Conflicts

If the chosen naming scheme leads to conflicts due to some variables sharing the same name, you will see a warning icon next to the affected variable group. To resolve the issue, use either of the following approaches:

Add more elements to the names of the affected variables by selecting chips of additional groups in the path.
Use the Auto Resolve button.

Step 5: Map the Variable Modes

A common practice in Figma is to use variable modes. Before exporting color or number variables that include modes, it's essential to map the Figma modes to the ThemeBuilder modes. Note that this mapping can only be done if you have previously created variable modes in Figma.

To map the Figma modes to the ThemeBuilder modes, follow these steps:

Ensure that the number of modes in the Figma and ThemeBuilder columns is the same. To add modes in ThemeBuilder, use the + button.

If your ThemeBuilder project currently has no modes, you will only see the Default mode in the ThemeBuilder modes column.
Select a mode from the Figma column, then select a corresponding mode from the ThemeBuilder column and click Map. Repeat this process until all variable modes are mapped.
Click Confirm Export to export the variables.

Once exported, the variables appear under the Figma variable group in ThemeBuilder's THEME STYLES pane.

Using the Exported Variables

You can use the Figma variables imported in ThemeBuilder to customize the components by using one of these two approaches:

Map the imported variables to your existing ThemeBuilder variables that are already used by the components.
Apply the variables directly to specific properties of the components.

This is a one-time effort—afterward, every time you export variables from Figma to ThemeBuilder, the changes will take effect immediately if you have previously followed either of the approaches.

The imported ThemeBuilder are set as read-only to ensure consistent exporting as designers work on their project. This prevents issues that could arise if such modifications are allowed. For instance, if a developer makes changes to a variable through ThemeBuilder and the designer then unintentionally exports the same variable with a different value from Figma, the developer's modifications will be overwritten and lost.