Definitions

The Pattern Lab is a design-first tool that allows designers and developers speak the same language to each other. The designer should be able to set rules and guidelines which they can follow confidently to solve any interaction problem. The developer should be able to consume the pattern lab and design system in order to build any interaction the designer has created while also adhering to the design styleguide, using reusable code modules, and without repeating themselves.

Atomic Design

In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.

Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.

Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.

Components

The building blocks of our pattern lab. The smallest piece of UI you can divide your patterns into, without abstracting it or turning it into plain content. Components do not necessarily have specific behaviours, or purpose, on their own. They are abstractions – you will never have a single component on a page unless it’s part of a pattern with a specific purpose.

A button is a component. It will have some sort of icon or text label in it to inform you of the action you’d be performing when you click it. It has a click input from you, and will output something to you as a result.

From a development standpoint, a component does not necessarily have to mean a specific element in the HTML. A component can be made up of multiple logical elements that describe its attributes, like divs or spans.

Patterns

Patterns are component(s) coming together to form an interaction with the user, thereby gaining a purpose. They have specific rules, attributes and behaviours, as defined by our design language and style guides.

A login form is a pattern. It uses two form field components, and a button component. Its purpose is to authenticate the user by asking them for a username and password, and then getting them to submit the form via a submit button.

Patterns may also exist within patterns. Depending on the use case, their attributes may change slightly, but their purpose will stay the same.