What is Atomic Design
What is Atomic Design π¦
Courtesy of @bymarkgerkules
β
Atomic Design is basically a design system strategy that separates the whole process when designing design systems simply to make the whole process easier and in a more organized way.
β
The process is separated into 5 steps:
β
π΅ Atoms
π΅ Molecules
π΅ Organisms
π΅ Templates
π΅ Pages
β
Hope this post will help you better understand the atomic design strategy and hopefully will make your design process easier π€
Introduction
Atomic Design is a strategy of designing design systems developed by Brad Frost and can help you build your design systems easily and in a more organized way hope this post will help you understand the atomic strategy better and hopefully, it will help you in your next design project!
Atoms
Atoms is the first step in the atomic design strategy, atoms are mostly when you designing the buttons, headlines, paragraphs of your design system.
Molecule
Molecule is the second step of the atomic design strategy, a molecule is basically a group of different components such as a headline and a button merged together.
Organism
Organism is the third step of the atomic design strategy, and this is a group of the same molecules together, such as pricing cards, people profiles, posts, and more.
Template
Template is the fourth step of the atomic design strategy, and as the name already tells us, this is all the elements we talked about (buttons, headlines, cards) merged together to make the screen looking complete.
Pages
Pages are the final step of the atomic design strategy, and in this step, you basically take what you already did before with the template step and organize it differently on each page according to the project.
Get 50+ Marketing Tools we use in Tegra π€
Follow the link π tegra.co/tools to get a list of ππ+ ππ«ππ (π¨π« ππ‘πππ©) π π«π¨π°ππ‘ π¦ππ«π€πππ’π§π ππ¨π¨π₯π¬ that we and other growth agencies use to scale businesses like yours + growth hacking insights.
