UI Kits

What is a UI Kit?

A User Interface Kit is a collection of files and resources that can help you speed up your design process of creating user interfaces for your applications. These often include commonly used UI systems.

Get UI Kits

There are a lot of sources that have free as well as paid kits. UI Kits include different UI components, which ensure that you don't need to start your design from scratch. We'll discuss some of these below.

Apple Design Resources

Apple Design Resources Kit is one of the most completed and up to date resources out there. You can download the library for different design tools like Sketch, Adobe XD and Photoshop.

Material Design UI Kit

Material Design in its resources page has different types of UI kits for the most popular design tools like Sketch, Figma and Adobe XD.

iOS 11 UI Kit

The iOS 11 UI Kit by D+C, is a kit designed with deep consideration of Apple's Human Interface Guidelines. Also, it has both light and dark mode.

SketchAppSources

SketchAppSources is one of the most extensive free collections of style guides, UI Kits and more.

UI8

UI8 is another amazing resource. In addition to UI kits, they also provide Wireframe Kits, illustrations and much more. The price of some kits is as low as $6 and they have a separate section where you can download kits at a discounted price as well.

Stark UI Kit

The Stark UI Kit consists of over 200 components divided into more than 10 categories. They've also taken into account things such as dark mode as well as right-to-left languages. The best part is that it's absolutely free!

Landing UI Kit

The Landing UI Kit specifically targets landing pages and has a collection of over 80 layouts as well as components to go along with said layouts. This one is also completely free.

Free UI Kit

The Free UI Kit boasts a collection of over 1000 UI components with 8 categories, all available for free. You've the choice to download all the assets at once or download these via categories.

Justinmind

Justinmind provides various free UI kits, some of which are implemented right in their tool while the rest can be downloaded from their website. These even include kits targeting specific components such as the one for charts.

Working with Apple Design Resources

In this exercise we will use the watchOS Sketch Library, so we can create a UI for watch face.

The first thing we will do is to go to the Apple Design Resources and download the watchOS Sketch Library.

Once we download the library, let's install it for Sketch. Simply open the file and follow the installation steps. To make sure that you have the library installed, go to Preferences in the tab bar, click on the Library tab and you will see the library on the list.

The first thing we will do is add an Apple Watch mockup. Click on the plus icon at the top left corner in the tool bar. You will see that a list will unfold, go to Apple watchOS UI > Apple Watch > Series 4 - 44mm - Space Gray. Select it and place it on our canvas.

You will notice that we have a realistic Apple Watch mockup with a watch band. Also, the frame is empty. This gives us the chance to populate it with some complication so we can mockup a watch face.

Now, let's create a rectangle sized 184x224 and put it underneath the layer of Apple Watch mockup. We will use it as a background for the Apple Watch face.

Let's add some UI elements to create an Apple Watch face. Make sure that all the assets you add are for the 44mm Apple Watch. Click on the plus sign in the tool bar and then go to Apple watchOS UI > Complications > Graphical Circular > Image-44mm. Then, next to the first complication, add a new complication - Apple watchOS UI > Complications > Graphical Circular > Open Gauge-44mm/x.

Next, add another complication. Go to Apple watchOS UI > Elements > Activity Ring and then, Apple watchOS UI > Complications > Graphical Rectangular > Large Image - 44mm.

Besides the UI elements, it also provides text styles. Let's add the hour. Go to Text Styles, Apple watchOS UI > Large Title > xxxLarge.

To add the date, go to Text Styles - Apple watchOS UI > Body > xLarge (44mm).

With all the assets in place, let's add some small details. Change the color of the day WED from white to #FB3C30.

Finally, change the color of the rectangle to black and with that we are done with our design.

Conclusion

There are a lot of UI kits available in the market, both free and paid. Using a UI Kit significantly reduces the amount of time you'll spend on designing a UI. While purchasing one, you've to keep in mind to select the one that fulfils your needs perfectly.