Design System: the shared language of Design and Tech teams
- Post
- Articles
- Year
- 2023
Everything changes when everyone speaks the same language. Soluto, Soluble's design system (DS), is that language for our Design and Technology teams. It altered the way we operate three years ago, exactly when we needed it the most. The pandemic forced us to work from home in 2020, requiring us to rethink how we functioned and, most importantly, how we communicated. Since then, it has continued to assist us in gaining our freedoms.
Let us begin from the beginning. A design system is a collection of components, guidelines, and documentation. It has aided us in developing projects in a much more collaborative manner, aligning our thoughts and making shared choices, and unifying language and work procedures. And for what purpose? To improve agility, consistency, usability, scalability, and, ultimately, product quality by optimizing the design and execution of digital goods. But also to enjoy the design and development process.
Doesn't it seem too wonderful to be true? Yes, it requires consistency in terms of maintenance, updating, and documentation. In fact, by definition, our Soluto is a work in progress that is always evolving. But whatever the love we offer it returns to us doubled. We all benefit from Soluto: designers, developers, clients, and users. Let's look at the tricks that go into this magic.
The source of truth
Soluto is our foundation, the common starting point that enables Design and Technology to develop each new project with more speed and efficiency, while preserving consistency despite the complications they may provide. We built a common vocabulary for both teams, a means of identifying things, and we agreed on a set of rules and standards to best coordinate the components. Soluto creates the basis for the project's design system, all names, decisions, documentation, components, colors, and structure are reusable and flexible to the demands of the digital products we develop for the brands we work with.
The Design team creates, out of Soluto, the DS of the new project and delivers it to Tech as a documented Figma file. Naming and documentation are key to the success of a design system and to ensure that this hand off leaves no room for doubt. In case there are any doubts, using the same names speeds up communication and resolution: both teams talk about the same thing and, thus, we understand each other sooner. A design system is not only a library of elements, it must also be the only source of truth for designers and developers in the creation of a digital product.
The logic behind the design
The Technology team converts the information obtained from Design into code and arranges it using Soluto, their code counterpart of the design system. This version is a JSON file (a lightweight JavaScript-based data interchange format) in which they input the configuration, using the same nomenclature, and customize whatever will be applied to the new project. Having this foundation speeds up the development process since it eliminates the need to build color schemes, button characteristics, and so on from scratch. Another way they save time is thanks to the documented Figma file that the Design team created: with all of that information, Tech no longer have to develop style sheets for the project.
This collaborative technique enables Tech to layout while understanding the reasoning behind the designs. This manner, we gain agility while also achieving near-perfect design-development fidelity. Furthermore, Soluto is linked and constantly updated, so if an enhancement or a bug has to be fixed, it will be applied to all projects when the version is updated.
Consistency, agility, efficiency... and, most importantly, time. The key effect of employing the design system between Tech and Design is time. Time to focus on the product's impact on the business, as well as its quality and the digital user experience. We couldn't ask for more.