UI kits, or user interface kits, help you improve your design workflow. They also encourage recycling components instead of creating new ones from scratch. They’re commonly used for mobile design or prototyping, largely because two of the biggest operating systems—iOS and Android—both have robust, well documented, and heavily supported design systems. (Note that design systems and UI kits often go hand-in-hand.
A design system relates to both the code components and UI design, while a UI kit refers to the designer’s version of the design system. A UI kit can stand alone without any relation to a larger design system.)
UI kits can take time to make, but are worth it in the long run. That being said, they’re not perfect. Here’s a quick breakdown.
Advantages
Most notably, UI kits can save you time and money by allowing designers to use their time more efficiently. When you don’t have to worry about the standard details, you can optimize your work by focusing on the unique features of the specific site, app, or product you’re working on. Though it can be an investment to purchase or create a premium UI kit, it’s worth it, especially if you’re going to use it for several designs or sites.
Disadvantages
The disadvantages of UI kits are more nuanced, but still worth considering before you dive in.
Depending on the UI kit you create or use, you could be locked into specific components, or be missing certain ones completely. Not all kits are comprehensive, and if you’re building yours as you go, you’ll have some gaps. It’s not a huge deal, but it could rob your efficiency instead of boosting it.
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
What’s the difference between a design system and a style guide or pattern library?
A design system isn’t only a collection of the assets and components you use to build a digital product. According to Emmet Connolly, director of product design at Intercom, “… most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”