PS: I am republishing my 2019 blogs on the Design system at the Hash node. However, these blogs are still valid.

---

We are again and again talking about the components. Make the list of the components, make the reusable components. I am sure you must be scratching your head that what these components are? How I pick the components? Will, there be any architecture of the components?

Atomic Design

Today we are going to look into the components only. If you will search on the internet for the term 'Design system' you will find a lot of articles referring to the 'atomic designs'. The design system works on the same philosophy. Pick the smallest component from the application. Smallest means an individual component can work in isolation and can be reused to create other components, applications, or patterns. Such as buttons, paragraphs, radio buttons, etc.

atoms & molecules

Button, paragraph, radio button...all are examples of the atoms of the design system. You need to list these atoms for your Design system. Now, moving ahead you can use these atoms to make one component such as combining two buttons will make a button group and we will name this category 'molecules' (or anything which you want). Generally in the design system terminology, people prefer - atoms, molecules, and compounds.

compounds

What are the compounds? Compounds are the working module made up of atoms and molecules such as Accordion, Data-table, etc.

Your 70% of the components in the Design system are atoms. Invest good time on them.

Happy Learning!!