The construction of the Design System in the vision of the devs

Working as a mobile developer, I'm focused on user experience and usability. Thus, we work together with the designers, thinking about how we can make our application even more accessible to whoever is using it.

At the beginning of my career in technology, at the age of 18, my first job was as a process analyst, where I was responsible for carrying out requirements surveys with the client and stakeholders, transcribing the documentation using the BPMN notation and later training our users so that they could read and understand this documentation, because the next step after the requirements were approved, was to start software development.

In this company, I worked in a department that automated processes, that is, we transformed activities that were carried out manually into automated systems. So, I believe that with all this experience I had dealing directly with our users, in addition to later acting as a support analyst, it made me direct my career as a developer having precisely this focus on the user and the experience, always worrying about the impact that I provide through the screens and codes I produce.

In my view, understanding the business is no longer a role only for the PO (Product Owner) of the product, or designers. I believe in the real impact we have on people's lives, and one way to demonstrate this is through the interfaces of the applications we create, as our end user cannot know how the code was developed, but can understand whether or not that interface facilitates its usability. .

Throughout this article I will be giving my opinion on this subject that I see even more relevant because frontend applications are becoming more and more complex and robust, and also because many contents that I see about Design System are always based on the designer's vision (which is very important), but I believe that we can build a good vision together on the subject, and for that we need to see all the benefits of having a DS and what our role is in this journey.

Different types of career

Before we start to understand the Design System, it is important to have the vision that times are changing, and with that the market also changes and consequently the professions. Currently, it is common to see content about Y, W and T careers, mainly in the technology area.

But how is our type of career connected to the Design System?

As you know, and I've mentioned it in other articles, I like to plan and think about my career in the long term. I've been following the T career, and a premise for it is for professionals to seek to gain knowledge in other subjects in a deeper way, and in my case, I constantly study subjects related to design, interfaces and users... But there are infinite possibilities, how to pursue a technical and management career at the same time. To understand a little more about these new types of careers, I will leave some content at the end of the article for you to delve into later.

Another common point between these new types of careers is to maintain consistency in obtaining learning and soft skills, in addition to the technical part.

So I believe that this can be an excellent reason to start our learning about the DS (affectionately nicknamed by the designers which means Design System).

What is a Design System?

The DS is a living product, that is, it can constantly be improved and evolved, in addition to being a product that dynamically serves other products.

In this product we will have rules, components, typography, colors, usage patterns, responsiveness, sizes... These rules and specifications will help us to have more consistency in the projects that we use the DS, thus gaining enormous usability and gaining experience.

What are the steps for building a DS?

Building a DS is a project that takes a considerable amount of time, as designers have to go through a whole step-by-step process, such as:

• Conduct an immersion to understand users and stakeholders;
• Beginning of design ideation;
• Usability tests;
• Creation of screens;
• Handoff with the development team;

These are just a few steps, and as it was noticeable, it really takes immersion and understanding for the creation of a DS by the designers.

But have you ever thought about our role as devs in the creation of the Design System?

Meiuca is a reference company in Design Systems and they quote: "If you don't have anything in code, then you don't have a DS", that is, despite having Design in the name, it doesn't mean that only they create the product. Therefore, for the DS to actually exist and be put into practice in projects, we devs have to code it.

What are the benefits of the Design System?

I could spend a long time talking about the benefits we get from having a DS, but I highlighted the ones that in my view are the most important.

Are they:

• Less time to be spent on creating screens;
• Increase the scalability of a project;
• Facilitate interface changes;
• Consistency in user experience and code;
• Enable developers in projects that use DS to maintain a greater focus on business rules;
• Prevent duplicated code (very commonly we see duplicated components, when we don't have a true single source, like DS);
• Improve communication between teams, as the DS is our source of search and truth to maintain visual consistency, teams will be more aligned for the arrival of new members in the project;
• Increases the dissemination of knowledge and sharing about visual experiences, focusing on building the visual identity of the product/company;
• Security for the user to use the application;

Regarding the benefits of having a DS, I would like to comment a little more on the last point, Security for the user to use the application.

When we maintain the visual consistency of our applications, for example through typography, colors and components, which depart from the same visual principle, we are building the brand of our company and consequently of our product.

We often associate security only with maintaining controls for intrusions, for example, but when we maintain a consistent visual identity, we are associating this image with what we want to convey with our product/application, thus providing even more security to our users.

How can we bring a DS to life?

Usually a DS comes to life by creating a library of components, which follow a set of predetermined rules. But for this DS to really be faithful to what was proposed and to be able to convey everything that was idealized by the design team, we have to follow some good practices in the development of this code, such as:

• We use variables (called tokens by the designers) for dimensions, colors and fonts, because if the DS evolves and changes small rules, our code needs to adapt efficiently and quickly. Also, when we use these tokens, we change the value in just one file and all places that are using it will automatically change as well, as we see in the image below:
• We use good practices in the development of this lib, because DS is a project like others, where we must use semantic commits, tests...
• Perform code review, to help maintain this library, as other projects will be using this product, and maintaining code consistency helps to keep the DS "alive";
• We think about the behaviors that these components will have in a particular way and create properties that do not compromise their quality, in short, maintain the quality of the code and allow your component to adapt to different behaviors.

Following good practices in the development of the codes we produce not only helps us in creating the DS, but in our professional growth as well. It's important that we keep an eye on the impact we make on people's lives through what we deliver, and the best way to measure that is through the code we create.

I believe that my main purpose with this article is to show that together we can build new visions and new ways of visualizing what we are in constant contact with.

And for us mobile and frontend devs, understanding interfaces, usability and the experience of our users has been an increasingly relevant requirement for these positions.

And have you ever had the opportunity to create a Design System or to use it?

I hope this article piques your curiosity even more and makes you want to explore other subjects in our amazing world of development.

So that you know even more about the subject, I leave below the link where my designer friends Bruno Ranieri and Nickolas Gomes participated in a podcast and brought many insights on the subject.

I would also like to thank my designer friend Grizilli who brought me many tips for this article, in addition to helping me with the LinkedIn publicity card.

Links to deepen our knowledge:

Podcast Lambda 3 - Design System

Design System in Meiuca's view - Article

How the Design System can transform your digital product - Article