How to build an atomic design system with Atomic Design?
Design System
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems.
A design system isn’t only a collection of the assets and components you use to build a digital product.
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of Application or Product.
“Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well.”
Diana Mounter
Actual Need of Design System in Workflows
Understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.
Visual language is a core part of your design standards. Defining the purpose and style of color, shape, type, icons, space, and motion is essential to creating a brand aligned and consistent user experience. Every component in your system incorporates these elements, and they play an integral role in expressing the personality of your brand.
Without standards, decisions become arbitrary and difficult to critique. Not only does this not scale, it creates an inconsistent and frustrating user experience.
“The proper study of mankind is the science of design.”
Herbert Simon
What is Atomic Design?
Atomic design is a methodology that allows (and requires) you to describe and organize every component of your design system.
Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems.
For more you can read Atomic design by Brad Frost
Components of Atomic Design
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
This approach divides design components into 5 different categories.
Atoms
Atom are the basic building blocks of all matter. Each element has distinct properties, and they can’t be broken down further without losing their meaning. These are the smallest building blocks of your project. Individual legos. Text styles, buttons, icons, input fields, checkboxes, etc.
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.
Templates & Pages
Now we have covered the basic structure of a design system through atoms, molecules and organisms it’s time to see how we can use them to create a consistent product. Organisms can be used to make up different templates of larger layouts which can contain multiple features. These templates are then used to make up the majority of a products touch points.
Conclusion
Atomic design is one such method to describe and practice design systems whilst they are becoming essential in today’s world of rapid growth and the need for holistic products. These design systems allow teams to build better products faster which are understood by users as the language is consistent across each and every touchpoint.
With a more consistent experience, we can work harder to focus on the most important parts of our product experience.