UI kit

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.)

What is a UI kit?

A UI kit is a set of files that contains critical UI components like fonts, layered design files, icons, documentation, and HTML/CSS files. UI kits can be fairly simple with a few buttons and design components, or extremely robust with toggles that change fonts, colors, and shapes on the fly.

UI kits save you time and keep you consistent by allowing you to create, edit, or expand on the existing components without creating them from scratch. Things like checkboxes, arrows, drop-downs, and forms are not worth re-inventing, especially when prototyping.

Advantages and disadvantages of UI kits

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.

When everyone knows exactly what size your CTAs should be and what color the cancel buttons are, your product is more consistent throughout. This allows your users to learn your product quicker and reduces cognitive load. This reliable documentation also encourages newcomers (to the product or company) to quickly hop on board, giving them a helpful glimpse into your rules and style preferences. Think of it as the true north for your UI.

Last but not least, UI kits give you the ability to update styles quickly, easily, and on the fly. If a client changes the color of their app or site, no big deal. A UI kit allows you to keep everything organized and categorized so you know that all your CTAs are blue with a 2px stroke and a 5px dropshadow.

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.

Matching styles from your brand to a different UI kit can be time-consuming. Let’s say you find a great UI kit that has rounded edges on all the elements, but your client’s brand has square edges throughout. Smaller components may be easy to change, but matching the style throughout the entire kit could take a lot of work. If a kit is dramatically different from your style, this could mean more work, time, and money.

If you’re managing multiple UI kits for different clients, projects, or teams, it can be taxing to re-learn a new system everytime you switch. Deciphering the layers, naming convention, and general organization each time can be frustrating, and feel like you’re spending more time on the process versus the design itself.

Examples of UI kits

To help get you started on making your dream project a reality, InVision has a library of high-quality UI kits that are completely free. Below, a few highlights.

Do

With 130 screens and 10 unique themes, this kit provides enough UIs to build all kinds of clean, colorful apps.

Relate

With 45 unique templates, 19 categories, and over 99 UI elements, the Relate UI kit gives you the resources you need to build immersive mobile app experiences. There’s no optimization required with vector-only shapes that scale to any size, including retina.

Tethr

This kit provides eight source files, 138 templates, and over 250 UI elements so that you can easily build iOS templates.

Deck

With over 200 UI elements, this cross-platform UI kit is made for designing card-based interfaces and media websites for desktop, mobile, and tablet formats.

Form

This wireframe kit is like having a head start on your next project, with a huge library of ready-to-use layouts, components, and symbols. Popular page categories include headers, footers, pricing tables, blog post templates, feature pages, testimonials, FAQ pages, and more.

Save time and money right from the start

You want to design a beautiful user interface but collecting feedback and revising your designs can be tough if it’s not all in one place. What’s the most efficient way to go about this important step?

With InVision, it’s easy for your team to share prototypes and quickly gather meaningful feedback—both in and outside your organization. From early, low-fidelity freehands to high-fidelity Studio screens, the user feedback is built into the process, empowering your team to fine-tune, fix, and ship a successful product.