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 search field and button

Organisms — groups of molecules, like the search nav bar

Templates — groups of the organism, where design come together to layout actions

Pages — specific instances of templates, where users will ultimately see

Screenshots from the Youtube Video above:

--

--

Hanwen Zhang

Hanwen Zhang

Full-Stack Software Engineer at a Healthcare Tech Company | Document My Coding Journey | Improve My Knowledge | Share Coding Concepts in a Simple Way