Hello Claudia,

Thank you for your request for a new documentation section. We currently do not have any guidelines for mapping Figma design kits with ThemeBuilder themes. While we will consider creating a guide, please note that Kendo Design Kits are regularly updated with new versions of Kendo Themes, which can make it challenging to keep related documentation up to date.

It is worth mentioning that Figma UI Kits and ThemeBuilder projects have similar naming conventions for their variables. This makes it easier to reuse styles across both projects. However, ThemeBuilder currently only exposes a limited set of Kendo variables, with more to be added in the future. This is why you may notice more variables in the Figma prototypes. You can easily switch to using exported Figma variables based on the naming convention, even for component parts with hardcoded styles.

For instance, the style for "Button Solid/Primary w/Active state" is exported from Figma as "$figma-button-primary-bg". All Figma variables are exported with the prefix "figma-," with "button" indicating the component, "primary" indicating its type, and "bg" indicating its intended use as a background color.

In ThemeBuilder, you can refer to the "Active" component template.

Then, you can use the search within the created and imported variables.

Assign the background color with the proper imported variable so that the hardcoded value below.

to became

You have the option to utilize the imported variables to map the current Kendo variables.

Of course, we understand that mapping all variables with existing Kendo variables or hardcoded values may not always be intuitive. Please let us know if you need assistance with specific cases.

Regards,
Nick Iliev
Progress Telerik