You should start building your system from atoms, then progress with the UI design. However, there is no “one fits all approach”, there are no boxes to be ticked along the way. For example, if you already designed the product and only now decided to build a design system you can take a step back and review all of your components. Cut out all components, look for common patterns, define atoms, molecules, organisms and change the ones that don’t match. Moreover, there are no strict guidelines on how elements should be organised, if you feel like a button fits under molecules, not atoms, that’s completely fine. The system needs to be functional for the people using it. This is why it’s important to speak to them and discuss their needs and vision first.
But what is essential to keep in mind is that when we truly design with atomic, the same component is going to be reused in very different contexts. All elements should be generic (a ‘list’ rather than a ‘contact list’) and use consistent, clear naming that reflect the element and its variant/property e.g., atom/colour/blue/90 or atom/button/primary/active.
One of the great tools you can use to start building the design system is Figma, the super-powerful design and prototyping tool that I have been using for a while now. Features that Figma offers are helpful in creating reusable elements that can be shared with the whole team within the workspace library. Here are some of the features: