Skip to main content
Course image for Design Systems for Designers

Design Systems for Designers

Gym Short

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.


  • Mac or Windows desktop or laptop
  • A passion for learning about design systems

This Course is For

  • Web and UX designers
  • Creative directors
  • Teams that are new to the design systems process

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.


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