Introduction

Design systems have become increasingly popular in software development. As a developer, I've found working with design systems both challenging and rewarding. This article shares my experiences. Please note, this isn't a primer on design systems; for that, consider these resources:  

• What Is a Design System | Design Systems 101 | Figma Blog
• Design Systems 101 (nngroup.com)

History

I'll start with a story about implementing a design system for a client. Special thanks to Laurens, who has been integral from the start and provided his thoughts as well.

‍

Why a design system?  

We focused on design systems when we needed to standardize the look across multiple apps in one organization. Both designers and developers (clients as well) saw the need. Designers started using preset components and patterns to streamline their work.  

‍

Process

We had the chance to test our design system with a new app we were developing. This fostered closer collaboration between designers and developers. We used the Tailwind CSS framework, which simplified everyone's work. We based our designs in Figma, which served as our source of truth. This approach gave designers flexibility but sometimes challenged developers when designs changed.

Involving both designers and developers from the start was key. Developers would often suggest minor design tweaks to ease implementation, and designers had to be responsive to unexpected UI issues.

‍

‍

Challenges  

A design system must balance consistency with flexibility. We built a Vue library, as we primarily use Vue, but we soon needed a CSS library for other contexts.  

Successes  

The key to our design library was using it in real projects. This provided immediate feedback and made it easier to justify the project to business stakeholders. So, if I were to give any advice – start using your design system right away.

‍

Lessons learned  

Implementing a design system improved collaboration and provided instant feedback. It refined our components, making them both aesthetically pleasing and functional. Not having a dedicated team for new components meant additional work for developers across different teams. However, this approach increased efficiency, as we could reuse components developed by colleagues and contribute to the library ourselves.

Components needed to be testable in isolation and reusable, which enhanced code quality and accessibility. As more apps implemented the design system, product consistency improved. This familiarity helped reinforce our brand's identity across` products.

Moreover, it fostered better teamwork and inter-team communication, as different teams needed to use the same components. This improved knowledge sharing among teams, designers, developers, and product owners.

Over time, productivity and speed have increased. What might take many people to implement can now be done by fewer, thanks to shared components.

Conclusion

In the future, design systems will become more important. New technologies, like AI, will make them simpler to use. Here are some clear benefits:

• Consistency across products: Design systems help keep your interfaces the same on different platforms. This helps users recognize your brand and improves their experience.
• Increased efficiency: Using the same components over and over cuts down on development time and lets teams focus on more important tasks. This speeds up your projects.
• Improved collaboration: Design systems help designers and developers work better together. They communicate more clearly and need fewer changes.

Just so you don’t think design systems are all unicorns and rainbows, setting one up takes significant time and planning, adds some flexibility challenges and there will always be an additional maintenance effort.  

Starting a design system takes some investment, but the benefits in speed and quality are worth it.  

I want to hear about your experience with design systems. What good things or challenges have you noticed? You can message me Łukasz Polok | LinkedIn or Ukash (@lukaspoloki) / X (twitter.com)

or comment wherever you see this post. Let's learn from each other.

‍