Design Systems for Designers

Design Systems for Designers will teach you how to incorporate pattern libraries and design systems into your workflow and avoid many of the frustrations encountered when working with them.

About This Course

The increasing popularity of design systems in organizations both large and small is changing the way many designers work. Therefore, understanding your role in these systems is more critical than ever. In this course, you’ll learn the difference between pattern libraries and design systems. You’ll walk through the process of building a design system from scratch with helpful exercises along the way. By the end, you’ll know how to conduct a pattern inventory, work with design tokens, and discover how familiar design tools such as Figma and Sketch fit into the process.

Course Outline

Chapter 1: Introduction

Discover how the increasing size of design and development teams, as well as the increasing complexity of digital products, are driving the adoption of design systems industry-wide.
Chapter 2: How Design Systems Get Made

Explore some examples of design systems being used across the web and learn the difference between design patterns and design systems. You’ll also learn the three high-level steps for how pattern libraries are typically built.
Chapter 3: How a Pattern Gets Defined

Examine the process of conducting a design pattern inventory and then do an exercise to learn how to do it on your own. Specifically, you’ll learn why naming conventions for design patterns are so critical and a few best practices for doing it within your projects.
Chapter 4: Organizing Your Design Patterns Effectively

Learn how to organize your pattern libraries into meaningful categories in order to reflect the way they will eventually be used. In particular, you’ll discover how different organizations categorize familiar elements including typography, color palettes, user interface components, layout modules, and page types.
Chapter 5: Defining Design Tokens

Explore the world of design tokens: what they are, why they matter, and how they’re made. Specifically, you’ll learn how elements such as color values, typography elements, borders, grid layouts, and breakpoints are converted to a shared language for all members of a team to use.
Chapter 6: Systems-Friendly Design Tools

Learn a few tips for extending the use of familiar applications such as Figma, Sketch, and Adobe Creative Cloud in the world of design systems. You’ll be looking at four specific criteria to use when evaluating which application is best suited for your needs.
Chapter 7: Creating Design Systems Collaboratively

Discover how effective digital teams improve their process through collaboration. Specifically, you’ll walk through the collaborative design process — an extremely helpful exercise often used to get designers and developers on the same page.
Chapter 8: Best Practices for Systems-Minded Designers

Learn how to establish and promote a set of design principles, which is the key to making a design system work in the future. In particular, you’ll learn how to measure the effectiveness of your system, and how to assess whether new patterns are needed.
Chapter 9: Next Steps

Review the concepts covered in this course including strategies for naming and organizing patterns and defining the shape of your design system. You’ll also be given specific steps for taking your design systems work to the next level.