¿Qué tienen en común empresas como Atlassian, Airbnb y Trello? Las tres, entre muchas otras, han adoptado la metodología de Design System a la hora de gestionar la parte visual de sus proyectos. Pero, ¿qué es realmente un Design System?

Los componentes de un Design System

Un Design System es un conjunto de reglas, limitaciones y principios definidos, que aplicamos durante el desarrollo de un proyecto. Está compuesto por un estilo, una voz y elementos, pero es más que la suma de esas partes. En realidad, se basa en la definición y reutilización de esos elementos, a fin de mantener una consistencia a lo largo de todo el producto.

Para explicar cómo se articulan los componentes, nos basaremos en atomic design, un concepto desarrollado por Brad Frost, que consta de 5 etapas:

• Átomos. Son las unidades mínimas de las que disponemos y a partir de las cuales creamos interfaces. Incluimos aquí elementos funcionales HTML como inputs, etiquetas y botones. Estos poseen características únicas que los diferencian de los demás.
• Moléculas. En esta segunda etapa, la idea es combinar varios átomos entre sí. Esto nos permite crear un elemento mínimo que puede reutilizarse muchas veces, como por ejemplo una etiqueta, junto a un input y un botón.
• Organismos. Estos están formados por varias moléculas y átomos, y componen las secciones de una interfase gráfica.
• Templates. Los templates articulan organismos dentro de una estructura de página determinada, y permiten mostrar todos los elementos necesarios para dar funcionalidad a esta última.
• Páginas. Las páginas son aplicaciones concretas de un template, con sus correspondientes contenidos y detalles finales.

Los beneficios de un Design System

Cuando distintos equipos trabajan en las diversas partes del desarrollo de un producto pueden surgir desinteligencias e inconsistencias (en el uso de colores o en los estilos tipográficos, por ejemplo). Lo que hace Design System es mantener el orden: reutiliza los componentes y, como consecuencia directa, aumenta la eficiencia. Se definen estándares y patrones dentro de cada uno de los elementos del sistema. Por ende, al tratarse de elementos estandarizados, se promueve la consistencia dentro del producto y, por último pero no por eso menos importante, se trabaja con una escala que permite seguir creciendo de manera coherente a lo largo del tiempo.

Uno de los motivos principales por el cual los Design Systems tienen tanta aceptación, es la cantidad de beneficios que aportan a los proyectos. Por un lado, tener un único source of truth al cual tanto diseñadores como desarrolladores puedan referirse, permite que todos estén en la misma página constantemente, facilitando la colaboración y la escalabilidad y, evitando a su vez problemas de consistencia. Además, permite establecer prioridades, impacta directamente en la eficiencia y reduce el retrabajo. Demasiadas ventajas para no considerarlos, ¿no?

(*) Soledad Mari: Diseñadora UX de intive-FDV