About Design Systems
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.
Further Reading
Applying System Design to our products
The Atomic Design methodology is about taking small elements and building them into bigger ones.
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
Examples:
Polaris by Shopify
Lightning by Salesforce
Atlassian Design System
Material.io by Google
and many more...
What we have:
UI Kits (Figma)
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:
ย
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.
To create Design Tokens, we need to decide what language our components will be written in, and how we plan on styling those components.
Then we can create a way to define our tokens and deliver them into the styles of our components.
A good first component to build would be our Button Component for Ferguson.com.
It utilizes a lot of our Design Tokens
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.