Sep 28, 2022
2 min read
Atomic Design (UI) — What are Atoms, Molecules, Organisms, Templates, and Pages
Atomic Design is a user interface frontend design system that helps you organize your codes and components in a clear and reusable way.
Atoms — input text field, button
Molecules — groups of atoms, like a search field and button
Organisms — groups of molecules, like the search nav bar
Templates — groups of the organism, where design comes together to layout actions
Pages — specific instances of templates, where users will ultimately see
Some Screenshots I got from this Youtube Video that I found to be helpful in understanding the design:
Useful Links:
