New to Telerik UI for ASP.NET Core? Download free 30-day trial

Telerik and Kendo UI Design Kits for Figma (ASP.NET Core)

Design Files for Figma—building blocks for designers matching UI for ASP.NET Core components.

Download Telerik UI Kits

To achieve efficient collaboration between designers and developers, we have created three Telerik and Kendo UI Kits for Figma (one for each of the top three themes we ship with Telerik UI for ASP.NET Core): Material, Bootstrap 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

The Telerik and Kendo UI Kits for Figma can be downloaded from the links below—follow the instructions on duplicating a file from the Figma Community.

Exploring the Telerik UI Kits' Structure

The Telerik and Kendo UI Kits for Figma use base components and nested instances for better component management. Furthermore, we have added 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.

Kendo UI Kit Pages

Most pages contain multiple frames that group similar design assets.

Kendo UI Kit Page with Multiple Frames

Customizing 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.

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:

  1. 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.
  2. Components with customized colors—apply colors according to your brand requirements by transferring them to the ASP.NET Core components with the Theme Builder application.
  3. 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.

See Also

In this article