Modifying the Telerik and Kendo UI Kits for Figma
This article describes the structure of the Telerik and Kendo UI Kits for Figma and explains how to modify them.
The Telerik and Kendo UI Kits for Figma mirror the front-end code of the Kendo UI components. As a result, designers can be sure that when they use the UI Kits as a starting point for the required design system, developers will be able to turn the design into code.
Exploring the Structure
To provide better manageability of the components, the Telerik and Kendo UI kits for Figma utilize nested instances and base components. To make the Kits more intuitive to use, they support variants of some of the components such as the Chip.
Each Telerik and Kendo UI Kit for Figma contains the following pages, most of which provide multiple frames that group similar design assets:
- _Cover—The cover page of the UI kit.
- _Getting Started—Briefly explains what you need to know to start using the UI kits.
- _Table of Contents—An index with hyperlinks that you can use to quickly navigate within the UI kits.
- UI Components—Contains all components and their variants.
- Data Visualization—Contains visual equivalents of all charts supported by the Telerik and Kendo UI web component libraries.
- Icons—Contains all icons in the form of convenient components.
- _Styles—An informational page with all styles that are applied to the components such as typography, colors, and effects.
- _Change Log—A list with the changes in the UI kit.
Previous versions of the Telerik and Kendo UI Kit for Figma contained a page called Unite UX (Export Preview). The designers used this page to export the design assets to Unite UX. As Unite UX plugin for Figma version 18 enables the direct export from the UI Components page, the Unite UX (Export Preview) was removed from the UI kits to make the files smaller.
Modifying the UI Kits
The Telerik and Kendo UI Kits for Figma are flexible and fully customizable to your vision and needs. Also, the UI kits enable the scalability of the changes that you apply to the design.
To achieve the highest impact and to propagate your changes to multiple components and variants, customize the components on the _Base frames of the UI Components page.
Once you achieve the desired look, you can publish the modified UI kit as a library.