Table of contents

Join our Discord server!

Leverage Once UI's full potential and discuss design system topics in our growing community

Once UI for Figma - Join our Discord community

Join now!

chevron_left Back

Three types of design systems - Striking the perfect balance

Lorant Toth | Design & Development

8 months ago

Introduction

In the ever-evolving world of product design, design systems have emerged as a crucial element for ensuring a cohesive and consistent user experience across digital platforms. While the goal of every design system is to streamline the design and development process, there are different approaches to achieving this objective. In this article, we will delve into three types of design systems: those optimized for auto_awesomeperfection, bolt ease of use, and scatter_plotchaos. By understanding the strengths and weaknesses of each, you can better decide which approach is best suited for your team and product.

Design system optimized for perfection

The first type of design system is focused on achieving the highest level of quality in its token and component system. This requires a deep understanding of design tools like Figma, front-end development, and cutting-edge design methodologies. The live code serves as the primary focus, as Figma is often limited in its ability to accurately replicate advanced concepts such as dynamic, fluid scaling of whitespaces or typography, and managing an intricate token system with multiple levels of abstraction.

Pros:

If implemented effectively, this design system can yield outstanding user experience and user interface results, setting a high standard of excellence in both visual appeal and functionality.
Your product could become a benchmark for other teams, gaining recognition and admiration for its sophisticated execution.
Scales well and offers numerous opportunities for customization, which allows for a greater level of adaptability and flexibility.

Cons:

Building and executing a system like this requires a significant amount of effort that product teams might not have.
The QA team must be familiar with various concepts and comprehend the expected appearance and behavior of the implementation, as the designs may not accurately represent the outcome due to software limitations.
While the system offers excellent scalability, its complexity can make it difficult to comprehend, posing challenges for the team in managing and maintaining the design system.

Interestingly, most advanced design systems don't even attempt to replicate browser behavior within Figma or other tools, as it's highly complex and not essential. These teams recognize that code and Figma don't have to align with 100% accuracy since Figma primarily serves as a tool to expedite the ideation process, while the actual user interactions occur within the code.

Been designing the last few weeks and realized how simple but effective the @linear design system is. There is no design system team, no councils, no meetings about what we should call it or if it’s “atomic" or not. We have a system which has colors, type, icons and components pic.twitter.com/Hu4ikyQoMi
— Karri Saarinen (@karrisaarinen) August 27, 2022

This approach may be highly effective for small-scale startups where team members share a common mindset about design and site building, and collaboration is seamless. However, in larger companies or organizations where design culture is less mature, a more structured and guided system is necessary to facilitate the design process.

The Geist design system by Vercel — Geist's homepage by Vercel

There is a certain irony in the fact that the more advanced a design team and their workflow become, the less sophisticated and scalable their approaches and methodologies tend to be. Instead of maintaining an extensive system and ensuring accurate representation, these teams will concentrate on browser behavior and creating a remarkable user experience – which doesn't take place within Figma or any other rapid prototyping tool but rather in the browser itself.

Material 3

Google's design system

arrow_right_alt

Geist

Vercel's design system

arrow_right_alt

Design system optimized for ease of use

The second type of design system prioritizes simplicity and user-friendliness in its token and component system. It's geared towards teams that require a more structured approach to design, making it easier to learn and implement.

An important aspect of these design systems is their focus on accurately representing browser behavior through prototyping. By striving for precision, they facilitate better collaboration between design and development teams. These design systems endeavor to cover all components and document them as thoroughly as possible, providing a comprehensive resource for both designers and developers to reference throughout the project lifecycle. This thorough documentation helps to bridge any gaps in understanding and ensures that all team members are on the same page when it comes to design implementation.

Pros:

Allows for quicker onboarding of new team members, as the system is designed to be user-friendly and easy to understand, and it is well documented.
Reduces the learning curve, with heavy reliance on components, it's enabling teams to create and maintain designs with greater efficiency and speed.
The simplicity of the system makes it easier to manage and maintain, saving time and resources in the long run.

Cons:

May not offer the same level of customization and adaptability as more complex systems, potentially limiting the design possibilities.
The focus on ease of use might come at the cost of advanced features and capabilities, making it less suitable for teams seeking a cutting-edge design system.
Overemphasis on simplicity could result in a less polished and refined user experience.

Design systems optimized for ease of use are particularly effective for larger organizations or those with less mature design cultures. They facilitate a more streamlined design process by prioritizing user-friendly components and simpler methodologies. This approach helps teams focus on delivering a functional and visually appealing product without getting bogged down in the complexities of an intricate design system.

It's worth noting that while ease of use is an important factor, it should not come at the expense of quality. Striking the right balance between simplicity and sophistication is crucial for the success of a design system that aims to be accessible and efficient while still delivering a high-quality user experience.

The Orbit design system by Kiwi — Orbit's homepage by Kiwi

This type of design system serves as an excellent starting point, as it addresses and provides answers to all systematic questions, offering a reliable reference for both designers and developers. With its solid foundations, this design system can be scaled up and refined over time, evolving into a highly sophisticated asset that rivals the more advanced systems mentioned earlier. As the team's design culture matures and collaboration becomes more seamless, the design system can be tailored to meet the specific needs of the organization, ultimately delivering a polished and remarkable user experience.

Polaris

Shopify's design system

arrow_right_alt

Orbit

Kiwi's design system

arrow_right_alt

Design system optimized for chaos

The design system optimized for chaos is something that no one wants to encounter, yet many product teams find themselves dealing with it. This type of design system features foundations that are difficult to scale, components that deliver inconsistent experiences, and a lack of synchronization between design tools like Figma and the actual code. As a result, team members often resort to implementing their own solutions to problems, feeling that the design system is inadequate for meeting their needs.

Pros:

Teams might learn valuable lessons about the importance of a well-structured and scalable design system by experiencing the consequences of chaos.
The chaotic system could potentially act as a catalyst for change, prompting teams to reevaluate and improve their design processes.

Cons:

Difficult to improve due to its chaotic nature, with seemingly endless issues to address.
Scalability is hampered, making even simple modifications time-consuming and resource-intensive.
Minor UI solutions are often excluded from project scopes, as teams tend to prioritize building an MVP (Minimum Viable Product) over refining the design system.
Responsiveness is usually neglected, resulting in a subpar user experience on mobile devices.
Accessibility issues may arise, further impacting the user experience.
The chaotic system often leads to misunderstandings and frustration between design and development teams, hindering collaboration and productivity.

It's crucial for organizations to recognize the detrimental effects of a chaotic design system and take steps to overcome the situation. By investing in a more structured and scalable design system, teams can improve collaboration, streamline workflows, and ultimately deliver a higher-quality product that meets the needs of its users.

Conclusion

In conclusion, design systems play a crucial role in ensuring a cohesive and consistent user experience across digital platforms. As we've explored, there are different types of design systems, each with its own strengths and weaknesses:

Design systems optimized for perfection, such as Vercel's Geist and Google's Material Design.
Design systems optimized for ease of use, such as Shopify's Polaris and Kiwi's Orbit.
Design systems that are chaotic and challenging to scale, often resulting from a lack of proper planning and execution.

It's essential to choose the right design system approach based on your team's needs, expertise, and the maturity of your design culture. Regardless of the approach, the ultimate goal is to streamline the design and development process, leading to better collaboration and a more efficient workflow.

Guidelines to help you decide which design system approach is best suited for your situation:

For small startups with experienced designers

If your team consists of a few skilled designers who are capable of pushing boundaries, you can consider creating a design system optimized for perfection. In this case, your primary focus should be on the code and implementation, ensuring that the design system delivers exceptional user experience and user interface results. This approach can lead to a sophisticated and scalable design system that sets a high standard of excellence.
For startups with a small design team or large organizations

If your design team is relatively small or your organization is large with a diverse set of stakeholders, a well-established but less sophisticated design system might be a better fit. In this scenario, prioritize ease of use and simplicity, ensuring that your design system is easily learnable and implementable by various team members. This approach will help facilitate collaboration between designers and developers, resulting in a more efficient design and development process.

As a final note, Once UI is another excellent example of a design system optimized for ease of use. It provides a user-friendly set of components, patterns, and guidelines that empower designers and developers to create consistent and visually appealing user interfaces across a wide range of projects. With its focus on simplicity and usability, Once UI can help your team effectively streamline the design and development processes while maintaining a high-quality user experience.