💭

Design Systems

TL;DR

Design systems are a method for creating and maintaining organized standards for design and development at scale. These systems account for design elements as they pertain to a wide range of use cases, standards, components, and patterns.

Ultimately, design systems ensure consistency and flexibility across teams and bridge the gap between design and development. The system also provides helpful constraints and documentation for the evolution of a product.

The anatomy of design systems

Design systems typically consist of three main elements. These elements are designed to flex with a coherent system through scalability and shared knowledge.

At its heart, a design system should use all three elements in harmony to keep design and development activities organized, documented, and evolving in a coherent manner.

The three elements of design systems…

  • A comprehensive library
  • Concise documentation
  • Shared organization

Each element in the design system defines activities and methods for efficient and effective work, especially across large teams and organizations.

Comprehensive libraries

A main goal of design systems is to standardize a large number of different design elements that are at play in design work. This includes digital components, colors, styles, and more.

Thus, maintaining a library of reusable components, patterns, brand standards, coded snippets, tokens, and design elements is at the heart of a design system.

Since there is so much to maintain, it is often helpful to reuse design elements in order to cut down on possible inconsistencies introduced by volume.

Documentation

Documentation helps connect what is built and maintained in the design system to the why, how, and when it should be used.

Essentially, each design element in the library should have accompanying documentation to detail use cases, specifications, and standards. This ensures that what is being produced has a clear purpose and is not redundant.

Documentation also plays a large role in setting expectations for evolution and establishes a clear process for what and when something gets added or removed from the system.

In terms of collaboration, documentation assists with creating a common language between designers and developers.

Shared organization

A more subtle but equally essential element of a design system is its organization and its ability to be shared among a host of different people and teams.

Most successful design systems have found intuitive ways to centralize documentation, share a common language, and create a clear process that is scalable.

However, a sharable and organized system is not enough. Each design system requires a level of precision and conciseness that allows the whole system to be simply understood and easily navigated.

Since design systems often evolve at a rapid pace to keep up with design needs, simplicity is a hallmark of a successful design system.

Anyone should be able to find what they are looking for quickly and understand the documentation without getting frustrated or spending too much time reading. This should be true regardless of familiarity with the system.

Challenges associated with design systems

The primary challenge with creating and maintaining a design system is effectively balancing all three elements at one time, and doing so consistently.

Since design systems scale and evolve almost at will, design teams can become biased toward one element in order to save time or “be more efficient.”

For example, a design team may prioritize maintaining a component library, but neglect thorough documentation and become inconsistent in the way that the system is shared. This leads to a broken or disorganized system in the long-run (which in this case is often not that “long”).

A few pitfalls that lead to further challenges include…

  • Lack of a formalized process — adding, scaling, or removing design elements from the system
  • An incomplete library
  • Disconnected organization — between teams and between departments
  • Inconsistent or incomplete documentation
  • Disparate standards
  • Siloed teams and areas of the system

To conclude

Design systems are fantastic at keeping teams organized and evolving with design work. Done well, a design system will ensure high quality and consistent work at scale and across teams. Done poorly, the same system will create a jumbled mess for design teams that only grows with time.

Given the proper organization and upkeep, design systems are one of the best tools in a design team’s belt, allowing for consistency at scale.