Design System: the common language of Design and Tech
Speaking the same language changes everything. For our Design and Technology teams, that same language is Soluto, Soluble's design system (or DS for short). Three years ago it revolutionized the way we work, right when we needed it most. In 2020 the pandemic sent us home and we had to rethink how we worked and, above all, how we communicated. Since then, it hasn't stopped helping us win freedoms.
Let's start from the beginning. A design system is a set of components, standards, and documentation. Having one has helped us develop tasks in a much more collaborative way, align how we think and make joint decisions, and unify language and work processes. And what's the point? To optimize the design and implementation of digital products while gaining agility, consistency, usability, scalability, and ultimately product quality. But also to be happier during the design and development process.
Sounds too good to be true, right? Yes, it also requires consistency in its maintenance, updating, and documentation. In fact, our Soluto is a work in progress by definition, always evolving. But all the care we dedicate to it comes back multiplied. With Soluto everyone wins: designers, developers, clients, and users. Let's see the tricks behind this magic.
The source of truth
Soluto is our foundation, the common starting point that helps Design and Tech build each new project with agility and more efficiently, maintaining coherence despite the complexities they may present. With it, we established a common language for both teams, a way of naming things, we agreed on a series of standards and requirements, to orchestrate components in the best possible way. Names, decisions, documentation, components, colors, structure… everything is reusable and adaptable to the needs of the digital products we create for the brands we work with, because Soluto lays the groundwork to create the design system for projects.
The Design team creates, based on Soluto, the DS for the new project and delivers it to Tech as a documented Figma file. Nomenclature and documentation are key to the success of a design system and so this hand off leaves no room for doubt. If there are any, using the same names speeds up communication and resolution: both teams talk about the same thing and thus we understand each other sooner. Because a design system is not just a library of elements, it must also be the single source of truth for designers and developers in the creation of a digital product.
The logic behind the design
The Technology team translates the information received from Design into code and organizes it based on its own Soluto, its version of the design system translated into code. This version is a file in JSON format (a lightweight data interchange format based on JavaScript) where they enter the configuration with the same nomenclature and edit everything that will be applied to the new project. Having that foundation speeds up their development process: there's no need to create color configuration from scratch, button properties… The documented Figma from Design also accelerates Tech's work: with all that information they no longer need to create stylesheets for the project.
This collaborative system allows Tech to markup while understanding the logic behind the designs. This way we gain in agility but also in design-development fidelity, which is almost perfect. Additionally, Soluto is connected and in continuous update, so if there's any improvement or a correction is needed, it will be applied to all projects when updating the version.
Consistency, agility, efficiency… but above all time. Time is the main result of using the design system between Tech and Design. Time to dedicate to focusing on the product's impact on the business, improving its quality and the user's digital experience. We don't ask for more.
