...
In September 2022, we introduced the Telerik component library. Our development teams received Telerik licenses, and we published the first draft of our Telerik & KENDO UI Kit – Internal (2.1) 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 system guidelines.
...
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
| Info |
|---|
Most recently updated June 10, 2024 to add library version 3.0. |
Available Figma Libraries
Telerik & KENDO UI Kit – Internal (3.0)
Built off the Telerik & KENDO UI Kit for Bootstrap (3.0)
Telerik & KENDO UI Kit – Internal (2.1)
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 regularly provides updates to their UI kits in the Figma community. As these UI kits will need to be customized for our use, we will need to manage how we incorporate Telerik’s changes. Some recent versions have included breaking changes. For example, the kit was refactored in May when Figma released new updates for auto-layout and variants. When this happens, teams already using our customized version of the library may stay on the version they are using. The MOLE team’s UX designers will be responsible for applying our 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 has applied our MAACE customizations to the new version and publishing this for has published this library in our Figma account. Our recommendation is for new product teams onboardingto 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 as 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.
...
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, add it to the tracking sheet 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.
...
How do I add content into a component without having to detach it?Why are some components in the UI kit not available in my design files?
How do I add more rows or columns to a table?
...
Introduction to Telerik for UX (PowerPoint Presentation)
Change Logs
Telerik & Kendo UI Kit – Internal (3.0)
...
June 10, 2024
Minor changes
...
Updated Blue/Light/1 variable color style.
...
Updated Blue/Light/2 variable color style.
...
Updated Blue/Light/3 variable color style.
...
Updated Blue/Light/4 variable color style.
...
Updated Blue/Light/5 variable color style.
...
Updated Blue/Light/6 variable color style.
...
Updated Blue/Light/7 variable color style.
...
Updated Blue/Light/8 variable color style.
...
Updated Blue/Light/9 variable color style.
...
Updated Blue/Light/10 variable color style.
...
Updated Blue/Light/11 variable color style.
...
Updated Blue/Light/12 variable color style.
...
Updated Blue/Light/13 variable color style.
...
Updated Blue/Light/14 variable color style.
...
Updated Blue/Light/15 variable color style.
...
Updated Blue/Dark/1 variable color style.
...
Updated Blue/Dark/2 variable color style.
...
Updated Blue/Dark/3 variable color style.
...
Updated Blue/Dark/4 variable color style.
...
Updated Blue/Dark/5 variable color style.
...
Updated Blue/Dark/6 variable color style.
...
Updated Blue/Dark/7 variable color style.
...
Updated Blue/Dark/8 variable color style.
...
Updated Blue/Dark/9 variable color style.
...
Updated Blue/Dark/10 variable color style.
...
Updated Blue/Dark/11 variable color style.
...
Updated Blue/Dark/12 variable color style.
...
Updated Blue/Dark/13 variable color style.
...
Updated Blue/Dark/14 variable color style.
...
Updated Blue/Dark/15 variable color style.
...
Added new file cover image.
...
...
Telerik & Kendo UI Kit – Internal (2.1)
...
June 10, 2024
Minor changes
Renamed library file and updated thumbnail
September 21, 2023
Minor changes
Added variants to Button component for Tertiary in all sizes and states
Updated icon colour for Button component Small Outline / Primary, Normal state variants
June 27, 2023
Minor changes
Updated DropDownList component to allow for nesting the Dot Badge component
May 30, 2023
Minor changes
Updated Small Solid Multiselect component Placeholder variant to have correct height
Updated Small Outline Multiselect component Placeholder variant to have correct height
Updated Small Flat Multiselect component Placeholder variant to have correct height
March 9, 2023
Minor changes
Updated text for Label component to bold
Added variants to Button component for Danger in all sizes and states
Added new colour style $danger-button-bg
Added new colour style $danger-button-border
Added new colour style $danger-button-hovered-bg
Added new colour style $danger-button-hover-border
Added new colour style $danger-button-active-bg
Added new colour style $danger-button-active-border
Added new effect style Button/Danger/Focused
February 22, 2023
Minor changes
Updated fill colour of DropDownList component Medium Outline, Normal, Focused, Invalid, Invalid focused and Disabled variants
Updated fill colour of DropDownList component Small Outline, Normal, Focused, Invalid, Invalid focused and Disabled variants
Updated fill colour of DropDownList component Large Outline, Normal, Focused, Invalid, Invalid focused and Disabled variants
Updated fill colour, text colour and stroke colour of DropDownList component Small, Medium and Large Outline Hover variants
February 7, 2023
Minor changes
Resolved layout issues with Selected Cell and Alternate Cell variants of the Grid component
February 6, 2023
New components
Added Chip component as it is now supported in Blazor with recent Telerik release
Added ChipList component as it is now supported in Blazor with recent Telerik release
Added Avatar component as it is now supported in Blazor with recent Telerik release
February 6, 2023
Minor changes
Properly linked styles for fill and stroke of TabStrip component
February 3, 2023
Minor changes
Fixed responsive layout of Notification component
Added missing stroke on Upload Drop Zone component
January 31, 2023
Minor changes
Restructured Calendar / Month View component
January 30, 2023
Minor changes
Restructured Grid - Basic Features component
Resolved layout issues with Pager component
January 27, 2023
Minor changes
Resolved layout issues with Row component
Resolved layout issues with Grid - Basic Features component
Updated $secondary-button-bg color style
Updated $secondary-button-border color style
January 25, 2023
Minor changes
Updated Header Cell component to use auto layout
Updated Sorted Header Cell component to use auto layout
Updated Filterable Header Cell component to use auto layout
Updated Filterable Sorted Header Cell component to use auto layout
Updated First Cell component to use auto layout
Updated Edit Cell component to use auto layout
Updated Command Cell component to use auto layout
Updated Selected Cell component to use auto layout
Updated Group Cell component to use auto layout
Updated Alternate Cell component to use auto layout
Removed overlay from Sorted Header Cell and Filterable Sorted Header Cell components to resolve auto layout issues
January 24, 2023
Minor changes
Fixed grouping of Base Text styles
Fixed broken text styles in TabStrip component
Fixed broken text styles in Upload component
Grouped component-specific text styles in the styles panel
January 20, 2023
Minor changes
Updated Header 1 text size and style
Updated Header 2 text size and style
Updated Header 3 text size and style
Updated Header 4 text size and style
Updated Header 5 text size and style
Updated Header 6 text size and style
Updated Grid Cell component to use auto layout
November 23, 2022
Minor changes
Updated icon colour of all Small Outline/Secondary variants of the Button component to $component-text-white
November 9, 2022
Minor changes
Updated text colour of all Badge components of fill mode outline to $base-text
Updated arrow-double-60-down component name to caret-double-alt-down to match icon name
Updated arrow-double-60-up component name to caret-double-alt-up to match icon name
Updated arrow-double-60-left component name to caret-double-alt-left to match icon name
Updated arrow-double-60-right component name to caret-double-alt-right to match icon name
Updated paste-as-html component name to clipboard-code to match icon name
Updated paste-from-word-strip-file component name to clipboard-word-alt to match icon name
Updated paste-from-word component name to clipboard-word to match icon name
Updated paste-html component name to clipboard-html to match icon name
Updated paste-markdown component name to clipboard-markdown to match icon name
Updated paste-plain-text component name to clipboard-text to match icon name
Updated paste component name to clipboard to match icon name
November 8, 2022
Minor changes
Updated DateInput component validation icon to use $error colour
November 7, 2022
Minor changes
Renamed TabStrip component from generic name so it is more easily discoverable
Updated Notification component closeable notification variants to use semantic colours for close icon
Updated Badge component colour info and warning variants to use $base-text for text colour
Updated Form component validation summary variant to use $notification-error-text for form message box error
November 4, 2022
New components
Added File Manager component as it was discovered to be supported in Blazor
Added Filter component as it was discovered to be supported in Blazor
Added Menu component as it was discovered to be supported in Blazor
November 2, 2022
Breaking changes
Removed Chip component from the published library
Removed ChipList component from the published library
Removed DropDownButton component from the published library
Removed SplitButton component from the published library
Removed FloatingActionButton component from the published library
Removed CheckBoxGroup component from the published library
Removed Rating component from the published library
Removed MultiViewCalendar component from the published library
Removed MultiSelectTree component from the published library
Removed DropDownTree component from the published library
Removed MultiColumnComboBox component from the published library
Removed Captcha component from the published library
Removed Menu component from the published library
Removed Avatar component from the published library
Removed AppBar component from the published library
Removed BottomNavigation component from the published library
Removed Popover component from the published library
Removed ActionSheet component from the published library
Removed ExpansionPanel component from the published library
Removed Filter component from the published library
Removed Badge component from the published library
Removed Skeleton component from the published library
Removed PivotGrid component from the published library
Removed PDF Viewer component from the published library
Removed ListBox component from the published library
Removed Chat, Conversational UI component from the published library
Removed Spreadsheet component from the published library
Removed File Manager component from the published library
Removed MediaPlayer component from the published library
Removed Timeline component from the published library
Removed ImageEditor component from the published library
Removed TaskBoard component from the published library
Removed Map component from the published library
Removed Diagram component from the published library
Removed OrgChart component from the published library
October 7, 2022
Breaking changes
Fixed auto layout in Default, Top and Bottom variants of Tab Strip component
October 3, 2022
Minor changes
Fixed auto layout in Expanded variant of Expansion Panel component
Fixed generated Primary Button hover and active state colours from Theme Builder
September 29, 2022
Minor changes
Removed data visualization components from the published library
September 16, 2022
Minor changes
...
Updated $primary color style to Workload Management blue #1B50B1
...
Updated $primarycolor-8% color style
...
Updated $primarycolor-12% color style
...
Updated $primarycolor-16% color style
...
Updated $primarycolor-20% color style
...
Updated $primarycolor-25% color style
...
Updated $primarycolor-50% color style
...
Updated $primary-button-bg color style
...
Updated $primary-button-hovered-bg color style
...
Updated $primary-button-active-bg color style
...
Updated $primary-button-border color style
...
Updated $primary-button-hover-border color style
...
Updated $primary-button-active-border color style
...
Added new file cover image
...
...