Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

What Is A Design System?

A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.

Design system is not new. What’s new is how we apply it to our work. The design systems that we are talking about here are specific to digital products — websites, applications, etc. And they touch people who work on digital design, user experience, interaction design, and front end development.

Here are a few analogous examples:

Example 1: LEGO

Question: How many ways can you combine six 2×4 LEGO bricks of the same color?

Answer: 915,103,765 different ways!

A basic set of LEGOs will likely include a standard brick, plate, stud, tile, etc. And you probably have a few different colors for each block. When we build a design system, we’re designing the LEGO bricks that you can reuse, build a variety of structures, and voila! They all look like they’re part of the same design family.

Example 2: Taco Bell

Taco Bell has about eight ingredients and yet, they have about 50 items on their menu. And guess what? They’re just mixing and matching those same eight ingredients in different ways. With these eight ingredients, you can make a taco, a quesadilla, or a [insert your favorite late night Taco Bell treat]! Same idea applies: this is a (food) design system.

Wait a minute — are you sure it’s called a “design system”?

Well, it goes by many names. Brad Frost calls it atomic design. AirBNB calls it design language. The industry is still circling around the preferred name. Other titles include:

  • Pattern library
  • Modular design
  • Component design
  • Design language
  • User interface library

Sure, there are nuances to all of these, but they’re basically doing the same thing: creating a series of design components for you and your team to reuse. Sometimes, you’ll even find elements of a design system in a style or brand guide.

Why should you use a design system?

1) Design systems can save you time and money!

While it might feel like you’re adding on another layer, design systems can actually help you increase your efficiency. To better understand how this applies to you, consider these questions:

  1. Scale – Are you designing a product (or products) that has more than 300 screens? Will your product(s) grow significantly?
  2. Consistency – Do you want your products to have consistent branding, look and feel, and experience? Does your product currently have 20 different button styles?
  3. Efficiency – Do you want your visual designers, user experience designers, and front end developers to work faster and save time?
  4. Teamwork – Do you have projects where there’s a lot of handoff between designers or many designers work on the same project at once?

If you answered “Yes!” to even one of the above questions, then a design system is probably right for you. Working at scale, and increasing consistency and efficiency are the biggest benefits to creating and using a design system.

In addition, because you’re reusing components in your design system, the time you spend creating will level off over time. At that point, your designers and front end developers can fine-tune existing products, add delight to the experience, or focus on other projects!

2) Design systems help designers and developers work better together!

Design systems force designers to systematize their work, to think in components. Front end developers are already doing this. They’ve been doing this. When design teams create design systems, suddenly they start thinking like their developer teammates and speaking the same language.

So what? Well, as you can imagine when teammates start speaking the same language and solving problems together, a lot more work gets done and faster.

Scroll to Top