For the last 2+ years, I am working on the Design System. For the last 2+ years, I am working on building a Design system at work.

I have given a few talks on the same locally and international. I keep sharing my learning on design systems on my social media profiles.

I keep getting questions about the design systems. Here I am sharing the repetitive questions:

1. Which components should be part of the design system?

Answer: It is going to be tempting to add as many components in the design system but as a Design System author you should make sure you follow the "atomic components approach". This means, that break the components to the smallest level and keep only those 'atomic' components in your design system. You can also look into the famous design system to get the starting components of inspiration.

2. How you are taking care of the multiple variants of the components?

Answer: The best approach would be to handle the variants in the same component code file. Users can change the variant bypassing the props with the component and component API can handle it internally.

The issue will come when you have multiple variants or a lot of variants. In such a case, better to create the different component files as per the variant or group the variant to create the separate component file.

3. How you are doing the testing of the components?

Answer: testing of the components is done at multiple levels. UI Devs do the unit testing by test cases. In the CI/CD, use the linters such as ESLinters, CSS, HTML validator, etc. Testers do the testing manually, automation as well as creating patterns or modules to test if the DS is working fine when users use it to build something.

4. How you are doing components styling?

Answer: As we have more than one tech stack to follow, we are using the SCSS to have the reusable styling lib. One can use the whole CSS library or can have the modular CSS.

If you don't want to have the SCSS. You can do the CSS-in-JS solution in ReactJS.

5. How you are taking care of versioning?

Answer: For versioning, we are first tagging our build in GitHub before every major release/patch. We are using NPM versioning for the DS build.

6. What all accessibility guidelines to follow?

Answer: Accessibility can vary from organization to organization. We are following AA and for few components AAA. Few things we are taking care of in Accessibility - color contrast, forms elements, Dos and Don'ts guides, ARIA* tags for few non-semantic components.

Happy Learning!!