Design system through a developer's eye

Key takeaways:

Why design systems are important for standardizing the look across multiple apps.
How using Tailwind CSS and Figma improved collaboration between designers and developers.
The challenges of balancing consistency with flexibility in a design system.
The benefits of implementing a design system, like improved collaboration, efficiency, and product consistency.
The importance of using a design system in real projects for immediate feedback and improvement.

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:

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.

Various styles of buttons with different text and icons are displayed, showing design options for a user interface.

‍

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.

‍

Someone comes up with an interesting idea, but their enthusiasm is immediately dampened by another person.

‍

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.

Various UI elements like tabs, labels, and section headings are displayed, illustrating different design options for a user interface.

‍

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.

‍