Ever wondered about how you could optimise the efficiency of your UX Design?

The answer is rather simple – using Pre-Made components. But where can you find them?

There is a few answers to that…

The fastest, easiest and most redundant is using UI Kits.

This will probably suit most users and their work scenarios. Adobe xd offers plenty of resources for different UI Kits.

The most common used ones are Apple UI Kit, Material Design UI Kit, Bootstrap UI Kit. Lets take a closer look…

 

Apple UI Kit

Adobe Apple UI Components

The Apple UI kit is available for iOS, iPadOS and MacOS. It features the most important components used in app design of the Apple Eco-system.

If you are designing a simple app that can use components built in to Apples OS, instead of copying the design, you can simply drag and drop their pre-made components from a file downloaded on their website. All you need to do is choose the UX Design app of your choice (f.ex. Adobe xd) and the system, that you are designing an app for.

A simple screen like the one below can be created by using and modyfing these drag and drop items in just a moment.

Apple iPhone design mockup

Material Design UI Kit

Material design component ui kit adobe xd

Google also has its design language used as a standard in most simple apps. It’s called Material Design, and it has become a standard for many android apps in the last few years.

As with the Apple UI kit, you can also download these design components and use them for free, which will of course help you speed up your work with UX Design, as it offers various system components, like file choosers, nav bars and so one. All of these items will help you visualise the app experience without spending too much time on designing a graphics language from the ground up.

You can download it here.

Check out a quick design of a memo app made with Material Design components!

Memo app quick design

Adobe XD Plug-inS

Adobe XD plugin marketplace

Besides using pre-made interface components, you can also rely on various plug-ins available in the Adobe Creative Cloud Marketplace. Tired of typing in “Lorem ipsum”? Use the Lorem Ipsum placeholder generator, that will fill out blank text boxes in your project.

Maybe you need to fill your app design with pictures of people? UI Faces will help you with that! It generates a picture of a non existing person to fill up f.ex. a Avatar Chooser designed in your app.

There is alot of available Plug-In’s for Adobe xd that you can easily install and use to speed up your workflow. Having trouble with that? Check out our guide on installing Adobe xd plugins!