...
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 system 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
| Info |
|---|
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 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 applied our MAACE customizations to the new version and publishing this for 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.
...
| Expand | ||
|---|---|---|
| ||
Product Team
MOLE Team
...
|
Change Request Tracking Sheet
Telerik
...
There are five sheets within the file:
Change Requests: Requests for new components in the Figma UI kit or modifications to existing components or styles.
UI Kit Issues: Log of any issues you find while working with the UI kit.
Dev Component Issues: Log of any issues your team finds while working with the implementation. These will form our development backlog that we can either address within the MOLE team or with Telerik.
Accessibility Issues: Log of any accessibility issues your team finds while implementing the Telerik components.
Questions or Feedback: General questions or feedback to be discussed.
...
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
| Info |
|---|
Most recently updatedApril 11, 2023 October 29, 2024, using theme version R1 2023 Q2 2024 - 68.0.30. |
An internal theme that aligns with the (3.0) Telerik & KENDO UI Kit - Internal is available from the UX Design Repository. The MOLE team is responsible for keeping the Figma UI Kit styles and component themes in alignment.
Known Issues
| Note |
|---|
Older versions of components may not be compatible with the latest version of the theme. |
...
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 |
Build catalog of page templates for Workload Management | |
Establish a method for product teams to track change requests and issues |
Customize external theme
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?
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?
...
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
...
...
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
...