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

Telerik 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 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 include 90+ of the ASP.NET Core components. Currently all components are available except Charts. The included building blocks and elements enable smooth collaboration between designers and developers and our goal is to continuously grow the number of included components and ensure full coverage.

Benefits of Using the Telerik UI Design Kits for Figma

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 Telerik UI Design Kits for Figma

The Telerik UI Design Kit 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 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 UI kit contains the following pages:

  • Cover—UI kit front page.
  • Getting Started—all you need to know to start operating with the UI kits.
  • Styles—typography, colors, and effects affecting the components and their variants.
  • Icons—all icons in the form of convenient components.
  • Components & Variants—all available components and their variants. Base (Structural Components) are located above the corresponding frames on the Components page.
  • Scenarios—different use case scenarios for the included components (work in progress).
  • Change log—release history of the kit changes.

Kendo UI Kit Pages

Multiple frames for grouping similar design assets are available for most pages.

Kendo UI Kit Page with Multiple Frames

Customizing a Telerik UI Design Kit

Telerik's Figma UI Kit is very flexible and can be fully customized according to your vision and needs. In addition, it allows you to apply the scalability of design changes.

Changes to multiple component variants can be propagated by:

  • Customizing the base components.
  • Customizing the typography, colors, and effects on the Styles page.

You can apply changes to a single component variant which will affect only the individual variants on the Components page.

You can publish the modified template as a library, once the desired design is achieved.

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
Not finding the help you need? Improve this article