S-)

Design System: el idioma común de Diseño y Tech

Post
Artículos
Año
2023

Hablar un mismo idioma lo cambia todo. Para nuestros equipos de Diseño y Tecnología, ese mismo idioma es Soluto, el design system (sistema de diseño, o DS para abreviar) de Soluble. Hace ya tres años que revolucionó nuestra forma de trabajar justo cuando más lo necesitábamos. En 2020 la pandemia nos envió a trabajar desde casa y tuvimos que replantear nuestra forma de trabajar y, sobre todo, de comunicarnos. Desde entonces, no ha dejado de ayudarnos a conquistar libertades.

Empecemos por el principio. Un design system es un conjunto de componentes, estándares y documentación. Contar con él nos ha ayudado a desarrollar las tareas de forma mucho más colaborativa, a alinear nuestra forma de pensar y tomar decisiones conjuntas, y a unificar lenguaje y procesos de trabajo. Y esto, ¿para qué? Para optimizar el diseño e implementación de los productos digitales ganando en agilidad, consistencia, usabilidad, escalabilidad y, en definitiva, en calidad del producto. Pero también para ser más felices durante el proceso de diseño y desarrollo.

Parece demasiado bueno para ser cierto, ¿verdad? Sí, también necesita constancia con su mantenimiento, actualización y documentación. De hecho, nuestro Soluto es un work in progress por definición, siempre está evolucionando. Pero todo el cariño que le dedicamos, él nos lo devuelve multiplicado. Con Soluto ganamos todos: diseñadores, desarrolladores, clientes y usuarios. Veamos los trucos detrás de esta magia.

La fuente de la verdad

Soluto es nuestra base, el punto de partida común que ayuda a Diseño y Tech a construir cada nuevo proyecto con agilidad y de forma más eficiente, manteniendo la coherencia a pesar de las complejidades que puedan presentar. Con él, establecimos un idioma común para ambos equipos, una forma de nombrar las cosas, acordamos una serie de normas y requisitos, para orquestar los componentes de la mejor manera posible. Nombres, decisiones, documentación, componentes, colores, estructura… todo es reutilizable y adaptable a las necesidades de los productos digitales que creamos para las marcas con las que trabajamos, porque Soluto pone los cimientos para crear el sistema de diseño para los proyectos.

El equipo de Diseño crea, a partir de Soluto, el DS del nuevo proyecto y se lo entrega a Tech como un archivo de Figma documentado. La nomenclatura y documentación son claves para el éxito de un sistema de diseño y para que este hand off no deje lugar a dudas. En caso de haberlas, usar los mismos nombres agiliza la comunicación y resolución: los dos equipos hablamos de lo mismo y, así, nos entendemos antes. Porque un sistema de diseño no es solo una librería de elementos, también debe ser la única fuente de la verdad para diseñadores y desarrolladores en la creación de un producto digital.

La lógica detrás del diseño

El equipo de Tecnología traduce a código la información recibida desde Diseño y la organiza en base a su propio Soluto, su versión del sistema de diseño traducida a código. Esta versión es un archivo en formato JSON (un formato ligero de intercambio de datos basado en JavaScript) donde introducen la configuración con la misma nomenclatura y editan todo lo que va a aplicarse en el nuevo proyecto. Tener esa base agiliza su proceso de desarrollo: no es necesario crear de cero la configuración de colores, las propiedades de botones... El Figma documentado de Diseño también acelera el trabajo de Tech: con toda esa información ya no necesitan crear hojas de estilo para el proyecto.

Este sistema colaborativo permite a Tech maquetar entendiendo la lógica que hay por detrás de los diseños. Así ganamos en agilidad pero también en fidelidad diseño-desarrollo, que es casi perfecta. Además, Soluto está conectado y en continua actualización, de forma que si hay alguna mejora o es necesario corregir un error, se aplicará a todos los proyectos al actualizar la versión.

Consistencia, agilidad, eficiencia… pero sobre todo tiempo. Tiempo es el principal resultado del uso del sistema de diseño entre Tech y Diseño. Tiempo para dedicarlo a poner el foco en el impacto del producto en el negocio, mejorando su calidad y la experiencia digital del usuario. No pedimos más.