Exporting Styles
With the ThemeBuilder plugin for Figma you can export color, typography, or effect tokens to any ThemeBuilder project. The exported tokens will be available for use in ThemeBuilder so you can start customizing the Telerik and Kendo UI components.
To export the desired styles:
Launching the Export Styles Wizard
Open your design in Figma.
Go to the Main menu.
-
Hover over Plugins > ThemeBuilder, and then select Export Styles.
To use the plugin, log in with your Telerik account.
Selecting a ThemeBuilder Project
To export the selected colors, typographies, and effects, 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 design styles.
On the Projects screen, select the ThemeBuilder project where you want these styles to be available for the developers, and then click the Select button.
Exporting the Selected Tokens
After you choose the target project, the plugin loads a tree with listed design styles from your current Figma document.
-
Select the desired design styles.
If you export to a project that already contains previously exported styles, the plugin will list only the new or updated Figma styles.
Generating the Style Names
Some design styles 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 design styles with complex paths for exporting, you may have to generate names for them.
To generate the name of the exported design style, select which groups that form the path to the design style to use. For example, the image below shows how to include the Input and Default elements in the design style names of all styles in that specific group.
Resolving Name Conflicts
If the chosen naming scheme leads to conflicts due to some design styles sharing the same name, you will see a warning icon next to the affected design style group. To resolve the issue, use either of the following approaches:
- Add more elements to the names of the affected design styles by selecting the checkboxes of additional groups in the path.
Use the Auto Resolve button in the upper-right corner.
- Select Export.
Once exported, the design tokens appear under the Figma variables group in ThemeBuilder's THEME STYLES pane.
Currently, ThemeBuilder supports color tokens with solid or linear-gradient values.
Users with a trial license can export up to five styles per project and re-export them every time they change.