Design systems: can I use multiple design systems in one project?

Mahmoud Mahmoud
2 min readFeb 21, 2024

--

Design systems (Preline, Material Design, Shadcn UI)
Design systems (Preline, Material Design, Shadcn UI)

In previous articles, we discussed the importance of using design systems & components and how this increases the speed of production which leads to lowering the cost and explained what and whom to consider? We also talked about the pros and cons of 5 design systems in 2 parts (Part 1 & part 2).

Can I use more than 1 design system in the same project? In my opinion, yes but you need to put in your mind that the developers will need to include these libraries (Design systems) in the file so you should put a limit to the design systems you are using.

Talking about Coffee shops App, I used 3 different design systems in the design, however I tried to use one of them as the essential and the other 2 systems, I limit the use of elements from them to number of styles that could be add separately without the need to include the whole system into the developers’ code.

What & Why I used?

As I mentioned earlier I used 3 design systems and I had My reason:

3 Images from Preline design system.
What & Why I used?
  1. Preline:

It was my main design system because it is totally free and offers a lot of premade components for designers and developers as well.

Also I like that it has:
- The best typographical hierarchy with a lot options available for different hierarchal levels.
- The buttons has a lot of variations with the ability to add leading or trailing icon/logo which will make the buttons in your design very consistent.

But It has some limitations:
- The coloring palette is not that good.
- Buttons such as Segmented buttons.

2. Shadcn UI: The reason I used it is because I like its color palette. Their color palette includes 10 variants of almost any color which give you the opportunity to have different states of your elements and components using the same color.

3. Material Design: As being owned by one of the biggest tech companies make the design system is very solid and helped me to cover the shortage in come components from Preline.

May be you are asking “why not to use it as my main design system?” The answer for me could be summarized in 2 points. First, I don’t like their icons’ system which looks very formal. Second, they don’t provide as many variations of the buttons as Preline.

Refrences

  1. https://m3.material.io/
  2. https://ui.shadcn.com/docs
  3. https://preline.co/docs/index.html

--

--

Mahmoud Mahmoud
Mahmoud Mahmoud

Written by Mahmoud Mahmoud

Experienced UI/UX designer with 3 years of experience in Figma, Adobe XD, Prototyping, and Wireframing. Self-motivated & creative person with leadership skills.

No responses yet