Design System

Profile picture of author Nick Groeneveld, a senior UX designer and mentor for The Designer's Toolbox

Nick Groeneveld

Senior UX Designer

In today’s day and age, building a design system is a must-have skill for any UX designer. So why not build one together?

Together with the Designer’s Toolbox community, I’m building a design system called The Ultimate Community-build Design System.

In this post, we will take a closer look what a design system is, how building a design system together would work, and all components involved in the design system.

Design system

Table of Contents

How to build a design system together

Building a design system together is what design systems are all about. In theory, you would recruit a core team that is responsible for the design system. That team would consist of the following roles.

  • Designer
  • Developer
  • Business stakeholder

In the case of the Ultimate Community-built Design System, we’re all in this together. Anyone that downloads our design system can work on it. In fact, we already have a few designers working on new components.

Here’s the thing. Once our design system grows, the price for new joiners will increase. But once you’re in, you will get free updates forever. Whenever we add new components, you get those as well.

At this moment, downloading the design system is free. So make sure you get your copy now!

The progress bar of our community-built design system

At some point, the design system will move to a €4 price point. It depends on the number of design system components involved.

Getting started

Design system components

Let’s take a look at the components you would normally find in a design system. I’ll also include whether or not it is already part of our design system.

When to Use Radio Buttons and Checkboxes in UX

Radio buttons and checkboxes are common UI elements that we use a lot. As a result, there are a lot of UX guidelines on how and when to use these elements. In this post, I will take a closer look at when to use radio buttons and checkboxes in UX.

Radio buttons are in our design system

Check boxes are not in our design system

When To Use a Toggle Switch in UX and UI

One of the most commonly used elements in UI and UX design is the toggle switch component. There are a number of cases where the toggle switch is the element of your choice. Yet, in some cases you’re better off using something else.

Toggle switches are not in our design system

When to use tooltips in UX?

Tooltips are an important component used in any design system. They help users understand your design better. But when to use tooltips in UI and UX design? Let’s work that out together.

Tooltips are not in our design system

Should I Use Pagination or Infinite Scroll in UX?

When you’re working with big lists, a number of issues could arise. These issues can range from performance issues to usability issues. As a UX designer, it is important to consider solutions to lists that are getting too long.

Both pagination and infinite scroll are an option here. Choose wisely!

Pagination is not in our design system

Infinite scroll is not in our design system

Design system best practices

Once the list of components grow, you will be able to use the design system in practice. Here’s a list of design system best practices to help you get started.

How to use shadows in UI design?

Shadows are used in UI design every day. Popular variations and names include box-shadow, drop shadow, and many more. But how can you use shadows effectively when designing using a design system?

That’s what this post is about. Welcome to the complete guide to mastering shadows in UI design.

How to use grids in UI design

Making good use of grids can make all the difference between good and great design systems.

That being said, using grids can be hard. Here’s everything you need to know on how to use layout grids in design systems.

Daily UI: Get a free challenge and feedback

Doing a Daily UI Challenge is a great way to learn and improve as a UI designer.

Challenge your design system skills by doing a free design challenge. Use our Daily UI generator to get your challenge. Did you finish your design? Get feedback by joining our Slack community!

Profile picture of author Nick Groeneveld, a senior UX designer and mentor for The Designer's Toolbox

About the author

Hi! I'm Nick Groeneveld, a senior designer from the Netherlands with experience in UX, visual design, and research. I have completed a wide range of projects in finance, tech, and the public sector.

Take a look at Nick's LinkedIn and Medium for more.

Was this post helpful to you? Share it with others!

Facebook
Twitter
LinkedIn