About This Course

Much of your time as a developer is spent making things work, but as the scope of what you are responsible for continues to increase, your day-to-day tasks can feel overwhelming. Design systems have become an increasingly popular way to help manage this workload, but have introduced new challenges of their own. In this course, you will learn how to use design tokens as well as an overview of various techniques for integrating patterns into a production environment.

Course Outline

• Chapter 1: Introduction

  Learn how modular design has reshaped developers’ work and how design systems have emerged as a way to manage the production of digital products.

• Chapter 2: How Design Systems Get Made

  Discover the difference between design patterns and design systems. Plus, review some examples of design systems in the wild. You’ll also examine how and why design systems get made.

• Chapter 3: Planning to Build a Design Pattern

  Explore the anatomy of a design pattern and walk through the different types of patterns you might need to inventory and build. Specifically, you’ll be learning the difference between structural and aesthetic patterns. You’ll also learn how to understand a pattern’s context — and why that matters.

• Chapter 4: Building a Design Pattern

  Examine the most common front-end approaches for building a design pattern, and some considerations to plan for when building your design system’s front-end architecture.

• Chapter 5: Defining Design Tokens

  Discover how design tokens are used to store variables such as typography, color, and spacing so that your design system can be shared across platforms. Specifically, you’ll explore how a number of organizations handle tokens and look at examples of tokens in Sass as well as the use of CSS custom properties.

• Chapter 6: Choosing the Right Tools for Your Pattern Library

  Explore the world of automation in this brief tour of pattern management software that includes a look at Storybook and Fractal, two popular solutions for managing the user interface components in your pattern library.

• Chapter 7: Creating Patterns in Fractal

  Learn the fundamental steps for creating a pattern library in Fractal. The skills you learn in this chapter will be transferable to other types of pattern management software such as Storybook or Knapsack.

• Chapter 8: Integrating Patterns Into Your Products

  Discover how to ensure that your pattern library stays synchronized with your production code. Specifically, you’ll learn how different organizations have implemented robust methods for developing, building, testing, and versioning reusable components across their digital product line.

• Chapter 9: From Pattern Library to Design System

  Explore how to use your pattern library as a foundation for a healthy design system for your team. In particular, you’ll learn best practices for communicating changes and for collaborating with designers and other members of your organization.

• Chapter 10: 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 receive a number of online and offline resources that will help you take your design systems work to the next level.

Prerequisites

• Mac or Windows desktop or laptop
• Familiarity with how to clone a GitHub repository
• Familiarity with HTML and CSS