Atomic Design is a methodology used to design a user interface. By using this concept, we can create scalably and reusable components.
It has Five distinct levels
- Atoms
- Molecules
- Organisms
- Templates
- Pages
ATOMS — Represents basic building blocks of the App. Example Any Buttons, Labels.
MOLECULES — Represents a group of atoms combined together. For example, a button and a text field combined together and formed a Molecules
ORGANISMS — Combine ATOMS and Molecules together and forms a complex structure. For example, combine the Search and navigation bar to form a header
TEMPLATES — This form combines most of the organisms and forms a page.
PAGE — Specific Instance of the Template. In Mobile App, Pages represents the Screen of the Applications
Sample UI Screen
