TC Design
Telerik UI Kit
- Allison Batoff
- Dan Larmour
Background
In September 2022, we introduced the Telerik component library. Our development teams received Telerik licenses, and we published the first draft of our (2.1) Telerik & KENDO UI Kit – Internal Figma library for our UX designers to use. This space includes documentation for UX designers and product teams on the use of the Figma UI kit, theme customization and design pattern guidelines.
Goals
More efficient UI design process – More time to focus on discovery, research and validation
More efficient development process – Eliminating the need to reinvent the wheel
Closer alignment between design and implementation
First step in helping our product teams meet our standards for responsive design and accessibility – Any user, any device, anywhere
Consistency across MAACE products
Figma UI Kits
Most recently updated June 10, 2024, to add library version 3.0.
Available Figma Libraries
(3.0) Telerik & KENDO UI Kit – Internal
Built off the Telerik & KENDO UI Kit for Bootstrap (3.0)
(2.1) Telerik & KENDO UI Kit – Internal
Built off the Telerik & KENDO UI Kit for Bootstrap (2.1)
How to Use
Open your Figma file
Open the Libraries dialog by selecting the Team Library button in the Assets panel
Toggle on the desired library
As long as the components and styles do not get detached from the library in individual project files, they should automatically receive any updates that are published.
Figma UI Kit Version Strategy
Telerik launched a new UI Kit for Figma as part of their 2024 Q2 release. The 3.0 version was updated to match the current state of the development component libraries and support the newest Figma features like variables. Please see below for a summary of the changes.
The UX Enablement team applied our MAACE customizations to the new version and published this library in our Figma account. Our recommendation is for new product teams to onboard to the most recent version. Existing teams can switch to the new library once they complete a milestone of their project. The aim is to have the fewest number of disruptions possible and reduce the need to rework existing design files.
What’s new in Telerik & KENDO UI Kit 3.0 for Bootstrap
Exposing Nested Instances through Properties: Enjoy greater flexibility and control in your designs.
Introducing Variables: Manage color, typography, border radius, and spacing more efficiently.
Switching Between Modes: Seamlessly toggle between light and dark swatches to suit your design needs.
Custom Components
One of the goals of these UI components is to allow us as UX designers to work more efficiently with our development teams. In order to work this way, we should try to limit the number of custom components we need to build and maintain.
If you are designing a new interface, wireframe and ideate as normal. When you move to high fidelity design, or discussing implementation with your development team, a good first step is to look at what component options are available from the library. If your team does encounter an issue where the component you need is not available, please explore whether the same result can be achieved with what is provided.
However, these libraries are intended to be a helpful tool, not a roadblock. If your team cannot achieve the same result with an existing component, submit your request using the intake form linked below. We will review these component requests together and prioritize them in our backlog. Ensure to flag any urgent requests as a high priority.
Custom Component Workflow
Telerik Change Requests
To request changes to the Telerik UI kit, theme or components, or to report issues, please complete the MOLE Team Intake Form. Telerik requests or issues may be logged under the Advisory Guidance>UX Consultation/Research section.
Please include as much information as possible, including:
Whether you are requesting a modification or reporting an issue
A brief description of the request
A link to the issue, if applicable
Custom Theme
Most recently updated October 29, 2024, using theme version Q2 2024 - 8.0.0.
An internal theme that aligns with the (3.0) Telerik & KENDO UI Kit - Internal is available from the UX Design Repository.
Known Issues
Older versions of components may not be compatible with the latest version of the theme.
Teams have reported issues when their project uses the latest version of the theme with an older version of components. Telerik does not support this scenario because the component may have some rendering changes like a changed class name or removed/added HTML element which will affect the styles. This can be resolved by updating to the latest version of the Telerik components.
When updating to a new version of the theme, you will need to do a manual migration. Updating your current project to the latest version will re-apply your styles to the new version. Since there may be rendering changes between the versions, you will need to handle these changes in the updated project.
Roadmap
Phase 1 | Phase 2 | Backlog |
|---|---|---|
Establish internal UI kit base and first draft of processes | Incorporate design pattern guidelines |
|
Establish a base Figma UI kit for internal MAACE products | Begin documenting design patterns for use MAACE Design Pattern Library | Build catalog of page templates for Workload Management |
Establish a method for product teams to track change requests and issues |
|
|
Create onboarding documentation |
|
|
Clean up and split kit for easier use and maintenance |
|
|
Test UI components in project files and solve immediate and blocking issues |
|
|
Develop a strategy for managing our custom themes between UX and development |
|
|
Customize internal theme |
|
|
Ongoing | ||
Review, discuss and prioritize change requests made by product teams | ||
(When change requests are prioritized) Design Figma components, build with MOLE development team and publish | ||
Iterate on process improvements based on feedback from product teams | ||
Frequently Asked Questions (FAQs)
How do I add content into a component without having to detach it?
How do I add more rows or columns to a table?
Are Telerik UI components WCAG AA compliant for colour contrast?
How do I use icons from the Telerik UI Kit?
How do I ensure that my status feedback messages are accessible?
How do I show in-line validation on form fields in Figma?
Resources
Introduction to Telerik for UX (PowerPoint Presentation)
Change Logs
TC Design