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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
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