What is a design system?

A design system is a reference guide that defines each component of a project insuring a consistent design.  The term is usually applied to digital products but can be extended to a brand’s entire output. Designers and front-end developers are likely to be the primary users of a design system.

In most cases, a design system will be comprised of:

• Components: the elements used to create the website/app/experience (colors, typography, icons, etc.)
• Guide: Instructions for how to use the components – both technically and philosophically (size, placement, interactivity, purpose etc.). This should be as visual as possible.
• Shareable reference: A repository for the system, including assets, instructions, example and best practices.

While a UI library may be part of  a design system, it is not one by itself. A design system must include the instructions for using the library.

Why create a design system?

Creating a design system for your project allows you to:

• Save time (& money): having a centralized resource for reusable components will avoid wasting time redesigning elements (a form component could be re-used for several projects).
• Create intuitive experiences: Design systems allow you to create projects that feel cohesive and display a unified design philosophy.
• Improve your collaborative work: A design system offers you and your team a shared vocabulary to work with.

Patterns & principles

Design systems can be broken down into two main components: patterns and principles.

Patterns

While “components” refer specifically to individual elements (i.e: form, button etc.), the term “patterns” can also refer to a wider set of interactions (i.e: the account creation flow).

Most design systems include two types of patterns:

• Universal patterns are elements that exist on almost all websites/apps and that don’t need to be re-invented for the experience you are designing (i.e: text, buttons, forms, etc.)
• Specific patterns are elements that are designed for the specific interactions or aesthetic of your product (i.e: the set up screen of a bluetooth speaker app will likely want to refer to the physical object’s design).

Designing patterns out of context can be difficult (how will you design your button if you don’t know where it will be placed or its purpose?).Designing an entire page (including the button) and extracting the individual components for your design system after the fact is often a better workflow.

Principles

Most design systems include two types of principles:

• Universal principles are applicable to many other companies and products, but applies to you as well (i.e: accessibility – all websites should be responsive, including yours.)
• Specific principles are specifically relevant your product (i.e: Patagonia’s “Don’t cause Unnecessary Harm”principle highlights the companies sustainability statement).

Atomic design

Atomic design is a popular approach to design system. It uses the analogy of chemistry to outline the hierarchy of components in a system.

Paragraphs were written by  Jack Strachan for UX Planet

Atoms: In chemistry atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. When we relate this to our design systems the atoms are very much the basic assets of our product. They are the foundational building blocks that comprise all our user interfaces such as type, labels, colours and spacing.

Molecules: Molecules are a group of atoms pieced together to take on new properties or to complete a function. In design systems, we can think of our molecules as our building blocks or ‘atoms’ that we are piecing together to form a functional element. Perhaps we are putting together an image header with a title label for a profile molecule or doing something more complex such as constructing a checkout function using atoms to form the molecule.

Organisms: Both atoms and molecules are simple functional forms in our design systems that can be reused across a product. Organisms are slightly more complex and form bigger chunks of our product. We can think of these organisms in our design systems as groups of molecules. Where atoms make up a molecule to form a search feature it can be combined with another molecule that forms the page navigation to make an organism — a complete page navigation with a search feature. These will be used as a distinct pattern across a product.

Documenting and sharing your design system

Your design system should be organized and easy to share. Using a Google Doc for the guide is a good starting point. Popular software for creating components includes Sketch and Adobe XD. When you share an XD file with collaborators, they will be alerted of any changes you made each time they open the project. Large companies often formalize their design system into a website, but this isn’t necessary for each project.

Using an existing system

While you can create your own design system, starting with an existing, well crafted system and customizing it is a great option. Companies such as Apple, Google, Shopify etc. offer free guides and UI kits for a variety of UX software.

Let’s take Google’s Material.io system as an example. It can be used in a variety of ways (just code, Sketch, Figma or XD). Since we’ll be mostly using XD for our UX work in this class let’s download there:

• Launch Adobe XD
• Go to File > Get UI Kits > Material Design
• Click on the download file for Adobe XD (Component Sticker Sheet for Adobe XD).

Once the file is open, you will see that it contains a lot of components for an array of devices. The guide for using these components can be found on the project’s website: https://material.io/design/ (i.e: if you want to see how the guidelines for using buttons, go to Components > Buttons and you will find examples and explanations).

Create a new Adobe XD file and add an artboard the size of the device you are designing for. You can copy and past components from the Material XD file onto the artboard and customize them (font, size, color etc.).

Food for thought

Here are a few examples of great design systems and other resources:

• New York City Transit Authority Graphics Standards Manual (1970) – digitized book and short video introduction
• Apple’s Design System (Human Interface Guidelines – HIG) – Guidelines for designing software/apps for apple devices.
• Google’s Material Design – Used by Google for all their products (i.e: Google maps, YouTube), but also by other designers who want to create elegant interfaces (not just for Google devices). Open-sourced. Watch this video introduction.

• “Laying the Foundation for the NPR Design System” – A case study describing the process of creating a design system for NPR.