A Design System at its very core is a way of designing an application in reusable components with clear standards. They consist of tools for designers & developers, patterns, components and brand guidelines.
A Design System offers your company a few valuable things:
Design Systems empower designers and developers to collaborate more efficiently and build applications more quickly. Learning how to look at a design, and break it down into a system, is just as important as the tools and workflow needed to enable the system’s success.
Design has always been largely about systems, and how to create products in a scalable and repeatable way… These systems enable us to manage the chaos and create better products… A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.
– Airbnb
To break a problem into a collection of reusable components we use a system called atomic design. Atomic design compares these design elements to the periodic table of the elements where the smallest components are atoms which make up molecules, then organisms, then templates and then pages (okay it stops sounds sciencey after organisms). Rather than summarising Brad Frost great article on atomic design linked here. We will focus on atoms and molecules which will be the most reusable pieces in your Design System. Atoms are the basic building blocks, these will be style versions of basic HTML elements. Molecules are where we start to see the reuse.
As an example let's take the Shortcut story card.
As atoms, you have the header, text, buttons (separately as they all have separate functionality and style), the colored left card adornment and then the outer card itself. To become something functional, they are combined as a molecule. Molecules can be complex but they are relatively simple combinations of atoms built for reuse.
For developers, tools like Storybook are a great way to quickly start and document your component libraries. It works with React, Angular and Vue which means no matter your creed, you should be able to build something very scalable with very little effort.
The screenshot is taken from Wix’s Storybook
The really nice thing is Storybook can be exported as a static website so your whole organization can see the components you have built. this will become a documentation hub for developers and help designers when they're looking to see what the developers are currently using.
Other useful libraries (and alternatives to Storybook) to help when considering a Design System:
In my next post, I will show you how to get started with Storybook so check back soon!