Introduction

Atomic Design is a design methodology for crafting robust design systems with an explicit order and hierarchy. If you're unfamiliar with design systems, let me explain. Design system is a comprehensive set of guidelines, principles, components, and standards that are documented and maintained to ensure consistency and efficiency in designing and developing digital products or services. The atomic design creates a more structured and scalable system by breaking the design down into its smallest components.

Classification

Atomic design is classified into five levels.

1. Atoms

2. Molecules

3. Organisms

4. Templates

5. Pages

Atoms

Atoms in design systems are the smallest elements that cannot be broken down further.  These include things like buttons, input fields, switches, etc. Atoms take in all the properties with very little to no customization on top of it to ensure consistency.

Molecules

Molecules are combinations of multiple atoms. For example, if you have defined an atom for a button and an atom for an icon, you can combine these atoms to create a molecule for a button with an icon.

Organisms

Organisms are groups of molecules that work together to create a more complex component, such as a header or a footer. For example, you can group molecules for a logo, navigation, and search bar to create an organism for a header.

Templates

Templates in design systems help define a standard page layout across multiple pages with similar functionality. Templates are standardized layouts for organizing atoms, molecules, and organisms across your product.

Pages

Pages in atomic design are instances of templates in your user interface but in high fidelity. Pages are what your users will see in the finished product.

Conclusion

Atomic design focuses on building design systems from atomic level. This helps in maintaining consistency throughout building components for the design system. It is good practice to follow the atomic design methodology to create robust design systems.