Design Files for Figma—building blocks for designers matching UI for ASP.NET Core components.
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 30+ of the most widely used UI for ASP.NET Core components such as Grid, Scheduler, Dropdowns, Inputs, with their detailed anatomical structures, colors, indicators, and icons. 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.
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.
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.
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)—building blocks which can serve as a base component to many component states and types (normal, active, hover, solid, flat, etc.). As a result, a change in the base component will affect all components using this base.
- Scenarios—different use case scenarios for the included components (work in progress).
- Change log—release history of the kit changes.
Multiple frames for grouping similar design assets are available for most pages.
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.
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 Theme Builder 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.