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.
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.
Download and navigate to the
kendo-default-masters.xdfile. This master file contains the Kendo UI colors, typography, and the most frequently used icons.
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.
Open a component file and relink the missing links to the master file from your Adobe Creative Cloud account.
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.
Most of the components share a common structure:
- Component (parent)
- 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.
The content group is also responsible for the main padding metrics.
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.
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.