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:
Hope this post will help you better understand the atomic design strategy and hopefully will make your design process easier 🤘
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 is the first step in the atomic design strategy, atoms are mostly when you designing the buttons, headlines, paragraphs of your design system.
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 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 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 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.