Design Systems 101

Design Systems 101

What is a design system?

This is what says -

The complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.

Here is another definition -

A collection of rules, constraints, and principles implemented in design and code. Its a collection of re-usable components to tie whole products together.

A design system is much more than that, it contains guidelines for motion and animation. For example - Google Material UI is a design system, which is built on material design principles. Polaris is a design system for Shopify that merchants can use to create great experiences for merchants.

The goal of using any design system is to make "design" more efficient and productive.

What is a style guide?

A style guide is a document that represents the styles, patterns, practices, and principles of a company/brand and teaches how to use it.

What is a pattern library?

An organized set of related, reusable components, often containing code examples, design guidelines, and use cases.

Why do you need a design system?

Design doesn't scale easily. What does it mean? It means if there is only one frontend engineer who is working on the codebase, design discrepancies are not that likely to appear. But with every new person joining the team, very often new ideas and patterns appear in the overall design (related to spacing, typography, colors) which increases the overall design entropy, growing the inconsistency and increasing overall maintenance costs. Design can scale only with the help of a design system.

How to create a design system?

Design systems can be created using tools like Figma or Lingo or Storybook for React. Here are some useful steps:

  1. First create an inventory or collection of all re-usable UI components. From the collection, it is easier to reveal inconsistencies in your design language.
  2. Build a design system maintenance team consisting of designers and front-end developers.
  3. Establish rules and principles for the design system.
  4. Build the typographic scale, color palette, and icons library.
  5. Make design discussions a part of the sprint retrospective process.

How to implement Storybook in React?

Storybook allows you to develop React components in isolation. But what it can also be used for is to create a showcase of re-usable component used throughout your application.

Storybook Reference