New to KendoReact? Start a free 30-day trial

Kendo UI Design Kits for Figma

Design files for Figmaa building blocks for designers that match the KendoReact UI components.

Kendo UI Kit for Material

To enable efficient collaboration between designers and developers, we created three Kendo UI Kits for Figma: Material, Bootstrap, and Kendo Default. Each kit corresponds to one of the themes that ship with the KendoReact components. These polished UI kits include pre-made, reusable design components that follow the atomic design principles.

The design files represent more than 30 of the most used KendoReact 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.

You are free to decide if or how much to customize the UI kits:

  • You can use them as they are to create application designs.
  • You can customize the colors in a way that matches your brand guidelines.
  • You can use them as a starting point for your own unique design system.

Why Use the Kendo UI Design Kits for Figma?

When you use the UI kits, you enjoy the following advantages:

  • You don't need to research the KendoReact components in advance: you don't need to know what components are available, how they are connected, what states they have. The UI kits include all this information.
  • You can be sure that the developers will be able to match the KendoReact UI components with your design requirements.
  • You can quickly turn a template into a shared Figma library.

Downloading the Kendo UI Design Kits

To download a Kendo UI Design Kit for Figma, navigate to the desired kit and follow the instructions on duplicating a file from the Figma Community.

Exploring the UI Kits' Structure

The Kendo UI kits for Figma utilize nested instances and base components to provide better manageability of the components. To make them more intuitive to use, we added support for variants to some of the components, like the chip.

Each UI kit contains the following pages:

  • CoverThe cover page of the UI kit.
  • Getting StartedBriefly explains what you need to know to start using the UI kits.
  • StylesContains all styles applied to the components: typography, colors, and effects. The changes that you apply to the frames in the Styles page will affect the components and their variants that use the specific style.
  • IconsContains all icons in the form of convenient components.
  • ComponentsContains all components with all their variants.
  • _Base (Structural Components)Contains the base components (building blocks). Most of the component states (normal, hover, active, etc.) and component types (e.g. solid, flat, etc.) share a common base component. Changes to a base component affect all individual components that use the same base components. For example, if you change the radius of _Base Button, you will change all button components that nest _Base Button.

Kendo UI Kit Pages

Most pages contain multiple frames that group similar design assets.

Kendo UI Kit Page with Multiple Frames

Customizing a Kendo UI Design Kit

The 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 propagate your changes to multiple component variants, you can:

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

Changes that you apply to a single component variant on the Components page affect only the individual variant.

Once you achieve the desired look, you can publish the modified template as a library.

Choosing How to Use the UI Kits

Depending on your requirements, you can take advantage of three distinct levels of component customization:

  1. Out-of-the-box componentsYou can use the UI kits as they are and start creating your application design by selecting one of the available kits. This is the fastest solution. Designers enjoy matching building blocks with the developers, seamless handover and implementation of the design.
  2. Components with customized colorsYou can modify the UI kits and apply colors that match your brand guidelines. The developers can use the Theme Builder application to transfer the colors from the design to the KendoReact components.
  3. Unique design systemThis is the highest possible customization level that has virtually no limits, and you can entirely change the look and feel of the components. You can use the UI kits as a base for your own unique design system. 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.