How I Started Working With Design Systems

The Intersection of My Career and Design Systems

You likely already have a sense of my career and education's twists and turns, so I'll skip that part. Instead, I'll try to explain why and how I entered the field of Design Systems and the effect it had on my life! We'll go over some reflections on my experiences with Design Systems, from the initial discovery to improving designer-developer collaboration, while highlighting some key moments and insights! I'll try not to be boring!

So... During my "developer phase," I gained extensive knowledge about systems and modularity and I understood the importance of semantics and the optimal design and implementation strategies to minimize errors and enhance user experience. I learned about variables and how they could be created and applied in the best way possible. This meant that, sometimes (maybe more times than we should), we would change the design because things were not thought properly (if you're a designer... don't make that face!)

It was around this time that I first discovered the concept of design systems and what they mean—a set of interconnected patterns and shared practices that unify language and style across diverse platforms. And it was... not surprising. It was what the developers were doing for a long long time, but now it had a name, because we feel the need to give names to everything. And that helped me to understand what it was and how to use or create one. A lot!

The Aha Moment: Unveiling Design Systems

I believe the first time I got in touch with what we were calling a "design system" at that time, was around 2015. I had started working at a company where we were serving a client. We had developed all the components in such a way that they could be reused; we just needed to import them to build the pages. Basically, we had what is called a ui-kit of sorts. We had modular-ish components, we were using variables (I remember arriving at a time when the team had just found out that the brand colour had been wrong all along, and they were changing the hex colour everywhere, ending with us implementing the colour variables for the project), we had page templates... but that was it (note to developers: it was not just this, okay? Go on...)

Demystifying Design Systems: Beyond the Hype

Look, I get why everyone is talking about Design Systems and all the clients and brands want one and everyone nowadays is working on a Design System (or so they think)... But something that I learned by experience was, right at the first meeting with a client, to ask what they want... and then tell them that what they are asking for is not a Design System (unfortunately). There is still a big misunderstanding of what a Design System is and not everyone needs one. Sometimes it's ok to just... create a small component kit and move on.

Fostering Collaboration: Bridging the Gap Between Design and Development

Now, probably the reason that got me to focus more in Design Systems was the way I could improve my design workflow and how I designed things and organised things in general, based on what I had learned from development. I noticed that, the more similar things were, the easier it would be for everyone involved! So, in a different project, a couple of years later, I was creating a connection between the Design and Development teams and got involved in the definition of how the Design System for that client was going to be made! We were designing components and adjusting based on development input and the other way around. At that time, I believe I had started working on my frontend framework (that was never really finished... figured) and we were applying the naming convention that I proposed, based on Atomic Design, but without the scientific names, because those don't really help. And I remember feeling really overwhelmed.. but happy! We were being able to create components that were modular, using variables, defining patterns and documenting everything from Design, to Development! (just a side note: Figma wasn't a thing yet)

The Maturation of a Design System: An Evolving Journey

We were learning has we were going! At that time, we were working with a new technology and we even had to implement some features that didn't exist in order to present what we needed and wanted (features that were later introduced to the product we were using). I believe I had the same 4 or 5 tabs opened with the existent Design Systems I felt were really good at that time and feeling like I was faking everything I was doing... But as the popular series Everything is a Remix, by Kirby Ferguson, proposes: "everything mankind creates takes inspiration from something that has come before". So I was basically looking at existent things, merging and mixing them together, and based on what we were learning with the project, I was retaining information, even without me noticing it. I remember proposing a structure for the Design System, it getting approved... and then it changing constantly and evolving and becoming something I didn't think that was going to be. And I can't get mad about it! It was great!

The Synergy of Design and Development: A Call for Unity

There are multiple ways the interaction between design and development can happen, but let me tell you that, in every place I've worked, the idea is always the same, because the problems continue to exist: developers and designers should work more closely together because they can help each other and ease the entire build process of something. I'm not saying that they need to be seat next to each other and stop doing their work because they need to be in constant interaction. I'm saying that people shouldn't be afraid to ask things and try to improve their work based on inputs

Here's a recent example: I'm actively working on a Design System for my current company, among other projects. A couple of months back, as we tackled a new feature, I received a request that called for a fresh implementation. I quickly sketched out some initial designs and refined them through several iterations. Once we were satisfied with the outcome, I showcased the design to our development team, and it initially seemed fine. However, as the developer began the actual work, he recalled critical details and raised significant points that had a substantial impact on the business. The feature, growing increasingly complex and time-intensive, required much more work and a more careful strategy, leading us to put the project on hold.

The Takeaway: Uniting Designers and Developers for a Common Goal

What lessons can I (or we) take from this experience? I've come to realise that designers and developers must collaborate more closely. There have been times when I've pondered over a problem for what seems like forever, only to find out that a developer already has a simple solution, making me feel like I've just been wasting precious time.

So, if you're in the midst of developing a Design System, or any other project really, make it a point to communicate with the developers on your team. Together, try to discover the most effective ways to partner up and establish joint processes (I'll be sure to delve into DesignOps in upcoming articles). Try to explore how you can support each other to achieve superior and more impactful results!

In conclusion, my journey with Design Systems has been transformative, not just for my personal growth but also for the way I approach collaboration between design and development. It's a continuous learning process that evolves with each project and interaction. As we strive for better communication and shared understanding, we unlock the potential for more innovative and cohesive products. Whether you're a designer, developer, or part of a larger team, remember that the synergy created by working together is the cornerstone of any successful project. Embrace the challenges, learn from each other, and always aim to bridge the gap between disciplines for the benefit of the end product!

That’s all folks!

Thanks for reading it all! Feel free to share your thoughts!

You can also find me on dribbble, behance and Instagram.