Advertisement
  1. Web Design
  2. UX/UI
  3. Design Systems

UX in 60 Seconds: Using Component Libraries

Scroll to top
Read Time: 2 min

Welcome to this super-quick introduction to using component libraries; helpful for designers, developers, and users alike. Let’s jump in!

Component Libraries in 60 Seconds

Each interaction a user encounters, they have to learn, which creates a cognitive load. It’s especially challenging for a user if elements of the UI are almost the same, but different. The user then has to parse questions like “why are these different?”, “will the same thing happen if I hit these two buttons?”

Start by identifying common objects in your designs, define them as components, then later (when you’re designing screens) you can start pulling them back in. By doing this you’ll force yourself to be more consistent. You might even be surprised by the mileage you can get by using the same objects to solve different problems.

Using Sketch

Practically speaking, you can create symbols within your Sketch project, or use the Craft by InVision plugin. To really get value out of your component library, work with your developers to get the same things defined in code too.

It doesn’t need to be purely visual either; you should define the different states of each object, and even complex interactions.

When using a component library, designers and developers can use the same objects again and again, to solve different problems. And for users, they’ll encounter familiar components, having to spend less time figuring out how to use your app or website.

Featured UI Kits

You’ll have noticed a couple of UI Kits featured in this video; grab them now as part of your Envato Elements subscription!

Simple

Over 100 editable and resizable Photoshop elements, based on clean vector shapes. Layers are grouped and well organized, elements are easy to resize and adjust, as well as edit colors.

Simple Flat UI KitSimple Flat UI KitSimple Flat UI Kit

Zoomie

Social Media Mobile app for Sketch; all the screen art boards are well organized and layered.

ZoomieZoomieZoomie

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.