Add your color palette to Figma's Local Styles for easier access as well as simplified updates to your colors across all your components if you ever change the colors in the future.
Add your text styles to the Local Styles as well to be able to manage those styles across all your components all at once.
If you require icons, it's a good idea to have them each in a different Master Component and in an Artboard called "Icons" to have them all grouped together and available in your Design System.
Now, once you have all your individual UI elements and Local Styles added to Figma, it's time to group the atoms together to form molecules. Group Child Instances of each element together to form your component. Add Auto Layout to your Group so everything resizes with your atom's length. It's also important that you use Child Instances and not the Parent itself so you can keep all your Parent Atoms neatly organized elsewhere even though they are used in hundreds of other molecule components.
Use your Local Styles to apply the right colors and typography values to your newly created molecule.
In this example, I'm creating the Base Component of my buttons. It's important to note that when creating the Base, you want to add every element that would be used in later variation or state. Here, I'm anticipating needing an Icon on the left and on the right so i have added a random icon as placeholder. We'll be able to change those later.
From the Base Component, we can copy/paste it to create our different tiers of buttons. It's important to note that you should always create a new component on top of the duplicated Child Base Component. We want each button to be a Parent Component in order to be accessible via the Design Library from other Figma Documents. In the below flowchart, you can see that I used the Base component's Instance for my Primary, Secondary and Tertiary buttons. Next, I used those tier component's instances to create their respective states. This is because each tier's states should be nested under their "Normal" state to streamline styling. This will result in a hierarchy where you can modify the Base layer for high-level values like border radius, spacings and atoms, and use the <tier>/Normal Components to control each tier's specific look including their fill and borders.</tier>
