{"id":796,"date":"2025-12-02T20:23:35","date_gmt":"2025-12-02T20:23:35","guid":{"rendered":"https:\/\/amyoukey.com\/blog\/?p=796"},"modified":"2025-12-16T19:16:10","modified_gmt":"2025-12-16T19:16:10","slug":"how-i-enhance-existing-ui-kits-so-theyre-faster-for-me-to-use","status":"publish","type":"post","link":"https:\/\/amyoukey.com\/blog\/how-i-enhance-existing-ui-kits-so-theyre-faster-for-me-to-use\/","title":{"rendered":"How I Enhance Existing UI Kits So They\u2019re Faster for Me to Use"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Most UI work in enterprise environments doesn\u2019t start with a blank slate. In my current role, the UI kit already exists\u2014Telerik\/Kendo provides the base components, naming patterns, and code-aligned structure. My job isn\u2019t to reinvent that. My job is to make the kit <em>faster, cleaner, and more usable<\/em> for day-to-day screen design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I spend a lot of time identifying where the base kit slows down actual production work. The default components don\u2019t always reflect how the product uses them, and some of the most heavily used controls\u2014forms and tables\u2014need more practical variants than the starter kit provides. Instead of creating new components from scratch, I extend what already exists so it matches the real product more accurately and eliminates repetitive design tasks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Forms are a good example. The Kendo kit provides form fields, but switching between field types during design can be tedious. I solved that by building structured variants into the form field component: regular input, regular input with a close button, dropdown, dropdown with a close button, incremental, checkbox, comments, read-only, radio button, and a date picker. Instead of duplicating components or rebuilding layouts, I can switch the field type from a single variant menu. It reduces friction and keeps every field aligned with how the app actually uses that control.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tables are the other area where enhancements matter. The product uses a very consistent table format\u2014specific header styling, row spacing, checkbox positions, icon placement. The base Kendo table contains a lot of variants, but doesn\u2019t match those details closely enough for production-ready mockups, so I created a customized table variant that reflects the real app\u2019s structure. Now, the table I drag into a screen already looks and behaves like what developers will build.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"2148\" src=\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/How-I-Enhance-Existing-UI-Kits-So-Theyre-Faster-for-Me-to-Use-scaled.png\" alt=\"\" class=\"wp-image-797\" srcset=\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/How-I-Enhance-Existing-UI-Kits-So-Theyre-Faster-for-Me-to-Use-scaled.png 2560w, https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/How-I-Enhance-Existing-UI-Kits-So-Theyre-Faster-for-Me-to-Use-300x252.png 300w, https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/How-I-Enhance-Existing-UI-Kits-So-Theyre-Faster-for-Me-to-Use-1024x859.png 1024w, https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/How-I-Enhance-Existing-UI-Kits-So-Theyre-Faster-for-Me-to-Use-768x644.png 768w, https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/How-I-Enhance-Existing-UI-Kits-So-Theyre-Faster-for-Me-to-Use-1536x1289.png 1536w, https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/How-I-Enhance-Existing-UI-Kits-So-Theyre-Faster-for-Me-to-Use-2048x1718.png 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">These enhancements don\u2019t change the library\u2014they refine it so it works the way the product team actually works. The value is speed: faster mockups, fewer inconsistencies, and easier handoff because every component stays tightly aligned to the engineering stack.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is how I approach UI kits in environments where the system already exists. I don\u2019t rebuild the library. I make the existing one better so I can produce scalable, consistent screens with less effort and less back-and-forth with engineering. By extending existing UI kits with real-world variants and optimized component workflows, I improve design speed and consistency across screens. These enhancements reduce repetitive setup work, align the design system more closely with actual engineering patterns, and simplify handoff. As a result, production mockups are created faster and require fewer design-to-dev revisions.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n<p>\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722<\/p>\n<p>IC UI Designer \u2022 Design Systems Contributor \u2022 Figma Libraries, Telerik\/Kendo UI, Tokens, Component Libraries<\/p>\n\n<a href=\"https:\/\/www.amyoukey.com\" style=\"text-decoration: none;\"><img loading=\"lazy\" decoding=\"async\" width=\"40\" height=\"40\" style=\"margin: 4px;\" src=\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2023\/09\/icon-AY-6.png\" alt=\"Anne Youkey's portfolio\" \/><\/a>\n\n<a href=\"https:\/\/www.linkedin.com\/in\/anne-youkey\/\" target=\"blank\" style=\"text-decoration: none;\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"40\" height=\"40\" style=\"margin: 4px;\" src=\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2023\/09\/icon-linkedin-2.png\" alt=\"Anne Youkey's LinkedIn\" \/><\/a>\n\n<a href=\"https:\/\/www.figma.com\/@anneyoukey\" target=\"blank\" style=\"text-decoration: none;\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"40\" height=\"40\" style=\"margin: 4px;\" src=\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2023\/09\/icon-figma-1.png\" alt=\"Anne Youkey's Figma\" \/><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Most UI work in enterprise environments doesn\u2019t start with a blank slate. In my current role, the UI kit already exists\u2014Telerik\/Kendo provides the base components, naming patterns, and code-aligned structure. My job isn\u2019t to reinvent that. My job is to make the kit faster, cleaner, and more usable for day-to-day screen design. I spend a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":758,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,18,28,7],"tags":[],"class_list":["post-796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-system-maintenance","category-design-system-optimization","category-figma","category-ui-design"],"_links":{"self":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/comments?post=796"}],"version-history":[{"count":3,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/796\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/796\/revisions\/856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media\/758"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}