Description
Like programming UI design has many frameworks and methods to help us work faster and more efficiently, atomic design is one of those methodologies. What is Atomic design? It is a way for us to create reuasble components from single buttons to more complex components like cards or forms, here is how it works. Everything we see and touch in our daily lives are build out of atoms which are the smallest functional units, then you have Molecules which are build from two or more atoms, next you have more complex structures calles organisms which are build out of two or more molecules.
This is just a simplified explanation on how our universe works but try to apply these principles to UI design, let's say that you are building a design system where do you start? Well you should start with the smallest thing like a button for example, you can already see similarity this button is our atom small and simple, now let's say that we have three atoms: a button, a label and simple input filed, let's try to combine these atoms into a molecule, what do we get? Well should get something that resembles a search bar, after that we crate an organism which is something created out of molecules and atoms like a navbar, and this is what we created.
Using this process when designing our website becomes a bit easier and consistent, by starting small and building upon it, this process naturally works with react when we get to coding. Like I mentioned earlier this only one of many methods on how to approach UI Design.