Telerik and Kendo UI Design Kits for Figma (ASP.NET Core)
Design Files for Figma—building blocks for designers matching the UI for ASP.NET Core components.
To foster the efficient collaboration between designers and developers, the Telerik designers created four Telerik and Kendo UI Kits for Figma (one for each of the top four themes shipped with Telerik UI for ASP.NET Core): Material, Bootstrap, Fluent, and Default (our own styling)).
These professional UI kits incorporate pre-built reusable design components that act in accordance with the atomic design principles.
The design files represent the ASP.NET Core UI components in every possible state, their detailed anatomy, colors, metrics, and icons. All these elements enable the seamless handover of the design to the developers.
Benefits of Using the UI Kits
You can enjoy the following advantages when using the UI kits:
- The UI kits include information about which components are available, their states, and how they are connected.
- Developers will be able to easily match the UI for ASP.NET Core components with corresponding design requirements.
- The edited templates can be quickly converted into a shared Figma library.
Downloading the UI Kits
You can download the Telerik and Kendo UI Kits for Figma can from the links below—follow the instructions on duplicating a file from the Figma Community.
- Telerik & Kendo UI Kit for Material
- Telerik & Kendo UI Kit for Bootstrap
- Telerik & Kendo UI Kit Default
- Telerik & Kendo UI Kit for MS Fluent
Exploring the UI Kits' Structure
The Telerik and Kendo UI Kits for Figma use base components and nested instances for better component management. Furthermore, the offer variant support for certain components to make them even more intuitive to use.
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.
Most pages contain multiple frames that group similar design assets.
Customizing the UI Kits
The Telerik and Kendo UI Kits for Figma are flexible and fully customizable to your vision and needs. Furthermore, 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.
You can publish the modified template as a library, once the desired design is achieved.
Upgrading to Newer Versions
To upgrade to newer versions of the UI kits while keeping your styles, download the free InstaRelinker tool that is available as a plugin in the Figma community. With this tool, you won’t have to manually swap instances and replace remote with local styles.
The InstaRelinker plugin enables you to re-link nested remote instances and styles within selected local main components to their local equivalents. When the plugin runs, it scans the current Figma file for local main components and automatically re-links any remote instances with names that match a local main component. If the plugin doesn't find a match, it allows you to manually select the local main component for each remote instance and re-link it. The InstaRelinker applies the same process for remote styles.
Choosing How to Use the UI Kits
You can apply three different levels of component customization, depending on your requirements:
- Out-of-the-box components—select one of the available kits and using the included components as they are start creating your own application design as a faster solution with seamless handover and design implementation.
- Components with customized colors—apply colors according to your brand requirements by transferring them to the ASP.NET Core components with the ThemeBuilder application.
- Unique design system—change the look and feel of the components entirely. In case you need consultation or help with the implementation, contact with our solution experts who will help you plan, prototype, and build your design system.