The world of design systems: what and whom to consider?

At the beginning and when you are working in small sized companies, you will not create your own design system, instead you will use design systems created by other companies. Choosing the right design system is crucial in today’s ever-evolving digital landscape. These systems form the backbone of consistent user experiences, guiding designers and developers in creating seamless interfaces across platforms and devices. However, with numerous options available, the selection process can be daunting. This article aims to simplify this process, offering insights and guidelines to help designers and teams choose the ideal design system for their needs. Let’s explore the art of selecting the perfect design system.

What to consider?

There are multiple elements to put in mind when choosing the design system to work with because this could reflect in the experience you will offer to your user and will also affect the speed of the production. In my opinion, for real life projects, sometimes you will need to integrate more than one design system. The elements you will need to consider are:

• The limitations of the design system: for some systems you will find that they don’t cover all the elements with the same quality. ex: Preline design system Does not have a good color system.
• The frontend team: in certain cases, you will find that your frontend team is not comfortable working with a certain design system and more comfortable working with another due to the availability of the react components.
• Your project matters: your project plays an important role in choosing the design system as for some projects you could find that there are already pages coded using a certain design system which will reduce the amount of time the front end team will need.

Design systems

Nowadays, there are a lot of design systems in the market. In this article I will give you some examples. In the next article, I will talk about the pros and cons of them:

Design systems

1. Material Design: Google design system. You can find it is documentation Here. You can find the figma link in the same directory.

2. Shadcn UI: Beautifully designed components that you can copy and paste into your apps. Accessible, Customizable, and Open Source. You can find Here. You can find the figma link in the same directory.

3. Preline UI: is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. You can find it Here. You can find the figma link in the same directory.

4. Chakra UI: Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. You can find it Here . You can find the figma link in the same directory.

5. Ant design: It has react components. I think that it is a Chinese design system because some elements is not translated from Chinese language but yet it worth a try. You can Find it Here . You can find the figma file at Figma. however I did not find an official figma file.

Resources

1. Material Design. https://m3.material.io/
2. Shadcn UI. https://ui.shadcn.com/docs
3. Preline UI. https://preline.co/docs/index.html
4. Chakra UI. https://chakra-ui.com/getting-started
5. Ant Design. https://ant.design/
6. Ant Design Figma. https://www.figma.com/community/file/822070817360747147