Ideally you will have your fundamentals library set up first as all your components will draw from this.
A component library can be managed in many different ways and with many different tools. To keep things simple when trying to wrangle legacy design you can opt for just using Sketch or Figma without the use of a DSM.
Think about a framework in which you can organise your component library, one way would be utilising the Atomic design methodology by Brad Frost.
This methodology allows you to breakdown component into simple devices and this has a number of benefits. Creating components from the atom level enables you to conduct accessibility testing at that level, ensuring contrast is correct and when linked with the developers component library ensuring the end product is fully accessible.
There are other benefits as well. When utilising an atom across many components you can quickly and easily update the source. For example, if you have a button and that buttons pulls it’s color from the fundamentals library. If you update that color in the fundamentals library it will trickle down and update the button and where ever the button is used.
You can see how this would be useful when you get to molecules and organisms. At these levels you get to do you second round of accessibility testing; checking for proximity to ensure the further the component is built out it meets a standard each step of the way.
Having a seperate page for your: atoms, molecules & organisms is a nice way to layout your component library in Sketch to make it easy for users to be onboarded. Contract designs will be up to speed quicker. Developers can quickly find components and devices then use the inspect tool to view their specs. Of course a DSM will make this easier but this is a great first step when dealing with an existing design structure. Go back to basics.
“make it easy for users to be onboarded”
