Most asked questions I get on the Design System

For the last 2 years, I am working on the Design System. For the last 1 year, I am working on building a Design system for my company.

I have given a few talks on the same locally and international too. I keep sharing my learning around DS on my social media profiles such as Twitter or Linkedin. Yeah!! folks reach to me with their doubts and questions around design system and here are that :< /p>

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

Answer: It is going to be tempting to add as much as components in the design system but as Design System author you should make sure you follow "atomic components approach". Which 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. The consumer 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 1 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 the GitHub before every major 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.