Atomic design is the framework that can help you accelerate your process for creating amazing design systems.
It consists of 5 different stages
- We start with the basic or most fundamental elements that can’t be broken down further anymore.
- form labels, inputs, buttons, colors, etc.
- Molecules are formed by grouping atoms and can make a new UI element. Molecules function together as Units.
- a search bar
- Organisms are further formed by grouping molecules to make a relatively complex UI.
- Navigations, Sidebars, etc.
- Templates are the layout for the website without any real content. They combine organisms into a proper website layout.
- Pages are the instances of the Templates, we can make many pages from the same template. Pages are the templates with the final assets or real content placed in the proper position.