What is a Design System?

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

A design system includes a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Open

Further Reading

Design Systems Handbook

Applying System Design to our products

The Atomic Design methodology is about taking small elements and building them into bigger ones.

Open

• Atoms: the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

• Molecules: In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

• Organisms: Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

• Templates: Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

• Pages: Pages are specific instances of templates that show what a UI looks like with real representative content in place.

Further Reading

Atomic Design by Brad Frost

Examples:

• Polaris by Shopify

  • Example of a Button component definition

• Lightning by Salesforce

  • Example of a Button component definition

• Atlassian Design System

  • Example of a Button component definition

• Material.io by Google

  • Example of a Button component definition

• and many more...

What we have:

• UI Kits (Figma)

  • Ferguson UI Kit

  • Checkout UI Kit

  • PDP UI Kit

  • PLP UI Kit

• Principles, Guidelines, & Standards (Zero Height)

  • a starting point for Design Tokens

What we need:

• Component library, which includes:

  • List of built components, and

  • Documentation for how to implement

Tooling:

Figma

Figma is a web-based UI design tool. Since it’s web-based, you’re able to have multiple people in a single design file at 1 time (like Google Docs) and you can embed design files elsewhere on the web and have them update in real time (like in documentation).

Figma supports Plugins which extend the functionality of the platform. Custom plugins can be developed and launched to account for custom workflows and integrations.

ZeroHeight

ZeroHeight is simply a documentation platform designed FOR Design Systems. Aside from giving you a great structure to start from, what’s attractive about ZeroHeight is the tools that it integrates with.

Other Tools

While we only use Figma and ZeroHeight on the design side, many other tools have been made for both design and development to make the work of creating Design Systems easier. One that we recommend looking into is StoryBook (it’s also used by Build.com).

How to get started:

1. To build a component, we will need Design Tokens to build it from so that any changes made down the road will cascade into all of our components.

2. To create Design Tokens, we need to decide what language our components will be written in, and how we plan on styling those components.

3. Then we can create a way to define our tokens and deliver them into the styles of our components.

4. A good first component to build would be our Button Component for Ferguson.com.

   1. It utilizes a lot of our Design Tokens

   2. Plenty of technical decisions will need to be made in order to support all of our button use-cases.

• We can determine how and where we document our components so that others can have visibility and awareness of them after our first component is created.