Exporting Color and Number Variables
With the ThemeBuilder plugin for Figma, you can export color and number variables to any ThemeBuilder project. The exported variables will be available for use in ThemeBuilder so you can start customizing the Telerik and Kendo UI components.
To export the desired variables:
- Launch either the Export Color Variables or Export Number Variables wizard.
- Select a ThemeBuilder project.
- Select the variables you want to export.
- Generate names for the variables.
- Map the variable modes.
- Export the variables.
Launching the Export Variables Wizard
Open your design in Figma.
Go to the Main menu.
-
Hover over Plugins > ThemeBuilder, and then select Export Color Variables or Export Number Variables.
To use the plugin, log in with your Telerik account.
Selecting a ThemeBuilder Project
To export the selected variables, choose the ThemeBuilder project that will act as a container for them.
If you have no ThemeBuilder projects yet, go to the ThemeBuilder application and create a project. Skip this step if you already have a target project where you will export the variables.
On the Projects screen, select the ThemeBuilder project where you want these variables to be available for the developers, and then click the Select button.
Selecting the Variables To Export
The ThemeBuilder plugin for Figma displays each collection of color or number variables as an individual tree and groups the related variables. To export the desired color or number variables, select them in the tree and click Next.
Consider the following when exporting color or number variables from Figma:
- If you export the color or number variables to a project that already contains previously exported variables, the plugin will list only the new or updated Figma variables.
- Some variables may refer (be linked) to other variables. Selecting or deselecting such variables also selects or deselects the variables that serve as dependencies.
Users with a trial license can export up to five color variables per project and re-export them every time they change.
Generating the Variable Names
Some color or number variables in Figma may have complex paths as they belong to multiple collections and groups, for example, the variable Colors/Components/Input/Default/Validation/info. When you select variables with complex paths for exporting, you may have to generate names for them.
To generate the name of the exported variable, select which groups that form the path to the variable to use. For example, the image below shows how to include the Input and Default elements in the variable names of all variables in that specific group.
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 variables group. To resolve the issue, use either of the following approaches:
- Add more elements to the names of the affected variables by selecting the checkboxes of additional groups in the path.
- Use the Auto Resolve button in the upper-right corner—this lets the plugin append a unique suffix to each of the duplicated names. If needed, you can rename these variables in the ThemeBuilder application after exporting.
Mapping the Variable Modes
A common practice is to use variable modes in Figma. Before exporting color or number variables that have modes in Figma, you must map the Figma modes to the ThemeBuilder modes. Note that this mapping is possible only if you have already created variable modes in Figma.
To map the Figma color modes to the ThemeBuilder color modes or the Figma number modes to the ThemeBuilder metric modes:
-
Make sure that the number of modes in the Figma and ThemeBuilder columns is identical.
- To add modes in ThemeBuilder, use the + button.
- Continue adding ThemeBuilder modes until their number matches the Figma modes.
If your ThemeBuilder project has no modes yet, you will see only the Default mode in the ThemeBuilder modes column.
Select a mode in the Figma column, then select a mode in the ThemeBuilder column and click Map. Repeat this step until you map all variable modes.
Exporting the Variables
To export the selected color or number variables, click the Export button. The exported variables appear in the Figma variables group in ThemeBuilder's THEME STYLES pane.
The Export button works only when all prerequisites are met: there must be no name conflicts and all variable modes in Figma must be mapped to variable modes in ThemeBuilder.