Personally, for most of the recent large projjects i've been involved in which require building a large design system from scratch here's what i've done:
I used either an 8pt or 4pt grid system. Meaning all components heights are multiples of 8.
Most atomic components such as buttons have 3 different sizes; large(40px height) Medium(32px height) Small(24px height)
Other larger components are also using multiples of 8 so that the smaller components then fit in them and create other 4pt divisible margins between them; so if I put a 24px button into a 32px table row I have 4px margin either side of the component.
I create a typographic scale using one of the many type scale calculators out there. Using something like a 1.333 scale ratio (what scale to use is dependant on the product and what type sizes we would need)
I then set the line heights to be multiples of 8 or 4 so that type fits evenly into the components and creates equal, predictable margins and paddings around other elements.
I then throw this all out the window when the developers implement it and just make up padding values and use flexbox.
:D Only joking, the above has worked for me more or less, but certain things like the line height thing is more useful for figma than in actual development where you probably just want to set the line height to a percentage or em value.
https://www.designsystems.com/ probably has some of the best articles on these sort of things. But interested to see what other people say
Personally, for most of the recent large projjects i've been involved in which require building a large design system from scratch here's what i've done:
I used either an 8pt or 4pt grid system. Meaning all components heights are multiples of 8.
Most atomic components such as buttons have 3 different sizes; large(40px height) Medium(32px height) Small(24px height)
Other larger components are also using multiples of 8 so that the smaller components then fit in them and create other 4pt divisible margins between them; so if I put a 24px button into a 32px table row I have 4px margin either side of the component.
I create a typographic scale using one of the many type scale calculators out there. Using something like a 1.333 scale ratio (what scale to use is dependant on the product and what type sizes we would need)
I then set the line heights to be multiples of 8 or 4 so that type fits evenly into the components and creates equal, predictable margins and paddings around other elements.
I then throw this all out the window when the developers implement it and just make up padding values and use flexbox.
:D Only joking, the above has worked for me more or less, but certain things like the line height thing is more useful for figma than in actual development where you probably just want to set the line height to a percentage or em value.
https://www.designsystems.com/ probably has some of the best articles on these sort of things. But interested to see what other people say