Crush the Challenge of Implementing a Design System as a Beginner

Crush the Challenge of Implementing a Design System as a Beginner

As a beginner, implementing the best design system is tough. Here are some tips to get started. First of all, as a starting point, it is better to build your design system on top of some other design system, like material. But it doesn’t make sense to copy their components, right? You don’t have to copy their UI. Just pick their guideline first. Let’s start with typography.?The material suggests that you have 6 heading fonts, 2 subtitles, 2 body fonts, 1 caption & 1 overline font.?Next, start reading their guideline for all of them individually.?What is the minimum font size? What is X height? What should be the line height? Letter spacing etc.?These individual?design decisions are called design tokens. Implement your design tokens to the font of your choice from the Google font’s library.

Once you are done with font size, do the same with colors.?How many colors does the material recommend? What should be the contrast? How many primary & secondary colors?

Next, you need icons, for this, I would suggest using some already-built icon libraries. You can download the “Iconsax” Figma file for free, it has all the components that you’ll need. (https://iconsax.io/). Once you are done with icons, move towards components. What are the things that you need to use again & again? Let’s list some of the basic ones that you will always need.?Buttons, input fields, radio buttons, banners, snack bars, menu, tabs, switches & tooltips.?You can also check the material components list to read their guidelines individually.?What is the min-width & height of a button? What are the different states of a button? Hover state? Active state? Presses? Disabled? Etc.?Prepare a list of these variants & their guidelines for the components that you are going to need.

And it’s okay if you miss something. The design system is never final. We can keep updating it while designing. And instead of using the design system in the same file, create it in a separate file & publish it as a Figma library so that you can reuse it for multiple files/projects.

Once done with all the basics here are some of the articles that’ll help you move forward.

• https://material.io/
• https://atlassian.design/
• https://polaris.shopify.com/
• https://www.carbondesignsystem.com/