New to Kendo UI for Angular? Start a free 30-day trial

Kendo UI Design Files for Adobe XD

Kendo UI provides design building blocks for Adobe XD to help designers, front-end developers, and engineers collaborate efficiently.

Kendo UI Design files for Adobe XD

The Kendo UI design files cover all Kendo flavors (Angular, React, Vue, and jQuery). The detailed anatomy, metrics, and theming of the components will help you design better apps in a more productive way and enable a seamless handover to developers.

To ensure the perfect design implementation, Kendo UI for Angular delivers the Default theme in the design resources with ready-to-use components, all of which with typography, color swatches, and metrics.

The Kendo UI Adobe XD files are intuitive to use and require no additional XD knowledge. You only need to use the components in their corresponding states in your design and the developers will get the exact same appearance out of the box from the Kendo UI for Angular framework.

Downloading the Adobe XD Design Files

  1. Download and navigate to the kendo-default-masters.xd file. This master file contains the Kendo UI colors, typography, and the most frequently used icons.

    Navigate to Master

  2. Open and save the file as a cloud document to your Adobe Creative Cloud account. Now the file is in your account and it is ready to be used as a linked master file for all design files.

    Save as Cloud

Relinking Assets to Master

Open a component file and relink the missing links to the master file from your Adobe Creative Cloud account.

Relink to Master

File Layout

Each Kendo UI for Angular design file for Adobe XD has an artboard containing the following elements:

  • Component Anatomy
  • Component Metrics
  • Component Interaction States

All master components are located outside the artboard area, in an Adobe XD pasteboard.

File Layout

Component Architecture

Most of the components share a common structure:

  • Component (parent)
  • Content
  • Component background

The content folder is based on the stack functionality of Adobe XD and contains all nested child elements such as texts and icons. From the layer panel, you can toggle each of the elements as shown or hidden. The content group is also responsible for common padding metrics which create the component size.

Component Architecture

The content group is also responsible for the main padding metrics.

Component Padding

Component Interaction States

Component states are one of the most powerful features of the Kendo UI for Angular design files for Adobe XD. You need to copy a component to your design layout and then change to the desired state, for example, Hover, Active, and so on.

Component Interaction States

Icon Font

All components with icons use the WebComponentsIcons font. It is provided in the downloadable archive with the Kendo UI for Angular design files for Adobe XD.

Used Icon Font