Skip to main content
Course image for Design Systems for Developers

Design Systems for Developers

Gym Short

Design Systems for Developers will introduce you to the key concepts behind design systems and how they can benefit developers.

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

This Course is For

  • Front-end developers
  • Teams beginning the design systems process
  • Designers with coding skills

Meet the Instructor

Ethan Marcotte’s instructor headshot for Aquent Gymnasium.

Ethan Marcotte

Ethan Marcotte is an independent web designer, writer, and speaker based in Boston. He’s the fellow who started that whole “responsive design” thing.

As a partner at Autogram, Ethan helps clients plan, create, and maintain effective design systems.

Ethan has helped tackle major design challenges for companies including People Magazine, The Sundance Film Festival, and The Boston Globe.

Enroll

🛠 We’re planning some website maintenance on . We’ll be down temporarily — we apologize for any inconvenience.