¿Cuál es el valor de un Sistema de Diseño?

Esta es quizás la pregunta que se repite con mayor frecuencia entre las personas que entran en contacto con "Sistemas de Diseño". Probablemente la más común después de “¿Qué es un Sistema de Diseño?” ;)

Un Sistema de diseño es una herramienta para mejorar el entendimiento entre los diferentes perfiles que trabajan de manera colaborativa. Es un producto que incluye no solo código y librerías de diseño, sino también un lenguaje compartido, una serie de acuerdos, guías, procesos estandarizados y herramientas comunes.

No es raro haber oído hablar de Sistemas de Diseño, incluso trabajar en una compañía que usa y mantiene uno, y sin embargo no tener claros cuales sus beneficios; al fin y al cabo nos pasa igual con muchos de los productos internos que existen en cualquier organización.

Aunque debería ser fácil de contestar, lo cierto es que no tiene una única respuesta, ya que depende tanto de la calidad y madurez del propio Design System como del tamaño y enfoque del equipo, y el tipo de producto en el cual se implementa.

De cualquier manera he intentado crear una lista genérica con los beneficios más relevantes:

• Acuerdo
• Agilidad
• Alineación
• Calidad
• Comunicación
• Consistencia
• Convergencia
• Eficiencia
• Entendimiento
• Foco
• Madurez
• Velocidad
• Persistencia de decisiones
• Propósito común

Acuerdo

Un Design System actúa en su conjunto como única fuente de la verdad para las diferentes disciplinas que colaboran en la creación de un mismo producto.

• Actúa como contenedor de información sobre decisiones acordadas.
• Sirve como referencia accesible y útil en la resolución de discrepancias.

Agilidad

Un Design System facilita la agilidad en producto, al prevenir estancarse en temas ya discutidos, acordados, documentados e implementados.

• Distribuye uniformemente entre todos el peso de las tareas de diseño y código.
• Permite crear prototipos, experimentos y lanzar MVPs en menor tiempo, asegurando que aspectos como consistencia o accesibilidad no son dejados fuera del producto inicial para cumplir con los tiempos de salida a producción .

Alineación

Un Design System asegura que las diferentes partes del producto están alineadas.

• Asegura por naturaleza que el resultado del código está alineado con las guías de Diseño.
• Fomenta la unificación de nomenclatura en los archivos de diseño, documentación y código.
• Fomenta la unificación de unidades de medida.
• Sirve como marco de implementación para mejoras de accesibilidad.

Calidad

Un Design System provee un enfoque sistemático para gestionar la calidad del código y las decisiones de diseño.

• Previene la generación de errores que son inevitables al crear algo desde cero.
• Previene la repetición de errores
• Al estar en constante evolución a través de iteraciones, cada componente va adquiriendo mejor calidad con el tiempo, sobre todo comparado con componentes nuevos.
• Al ser un sistema modular, cerrado y versionado, reduce el riesgo de pérdidas tanto en código como en diseño.
• Es fácil de aislar para valorar su calidad y medir en su integración externa.
• Recibe gestión de calidad constante, la cual además incrementa cuando mayor es la adopción.

Comunicación

Un Design System actúa tanto como canal, como lenguaje de comunicación común para las diferentes disciplinas que colaboran en la creación de un mismo producto.

• Provee un foro idóneo donde compartir conocimiento transversal.
• Al unificar lenguaje facilita el entendimiento.
• Actúa como disparador de conversaciones interdisciplinares.
• Previene el bloqueo de tareas de desarrollo por cambios de diseño

Consistencia

Un Design System permite obtener los mismos resultados de calidad a lo largo del tiempo.

• Ayuda a que una vez decididos, diseñados y documentados, tanto los diseños como su implementación en código sean iguales cada vez que se reutilizan.

Convergencia

Un Design System agrupa el esfuerzo de todos los perfiles bajo un mismo paraguas.

• Fomenta a que los desarrolladores y diseñadores colaboren en una sola dirección para lograr objetivos comunes.

Eficiencia

Un Design System asegura el máximo rendimiento del tiempo invertido en código y diseño, con el mínimo desperdicio de energía para conseguir los mismos resultados.

• Mejora el enfoque, minimizando la inversión de tiempo en crear productos desde cero, para usarlo en resolver problemas.
• Mejora el código a base de iteraciones, que es más barato comparado con escribir código de calidad desde cero bajo demanda.
• Elimina la necesidad de comunicar reiterativamente decisiones de diseño que están documentadas e implementadas.
• Libera a los equipos del mantenimiento de código propio, a menudo duplicado.

Entendimiento

Un Design System facilita el entendimiento al proveer una serie de herramientas y recursos que cierran la brecha entre diferentes perfiles.

• Documenta procesos acordados.
• Elabora y refina un vocabulario común que facilita la comprensión de las especificaciones.
• Estandariza canales y procesos para reportar y solucionar problemas.
• Ayuda a elaborar un modelo conceptual común del producto en el que se trabaja.
• Minimiza la falta de información al reducir la opacidad de las diferentes partes del ecosistema.

Foco

Un Design System despeja el camino de tareas redundantes, facilitando poner foco en lo que realmente importa.

Madurez

Un Design System refleja la madurez de un equipo interdisciplinar.

• Permite acelerar la maduración de los equipos.
• Requiere tomar decisiones importantes y mejorar procesos que resultan beneficiosos en otras áreas.
• Al requerir trabajar de manera colaborativa, fomenta la “polinización” de conocimiento.

Persistencia de decisiones

Un Design System incrementa la duración de las decisiones tomadas.

• Previene la volatilidad de la información, despegándola de estar sujeta al puesto de las personas, o su relación con el producto o la compañía.
• Define un espacio que protege al código y al diseño de perderse, en un potencial caso de cambio de dirección en cualquiera de las áreas de la compañía.

Propósito común

Un Design System ayuda al propósito común de diferentes disciplinas que colaboran en la creación de un mismo producto.

• Alimenta al crecimiento en una sola dirección.
• Facilita la puesta en producción de MVPs de alta calidad en diseño, código e interacción.

Velocidad

Un Design System permite tomar decisiones y generar valor más rápido.

• Idear es más rápido si el lenguaje visual está claro, existe documentación de marca y guías de estilo.
• Plasmar esas ideas en las herramientas de diseño es más rápido si ya existen símbolos y estilos predefinidos en UI Kits.
• Compartir especificaciones entre diseñadores y desarrolladores es más rápido si existe un lenguaje común, herramientas compartidas y un proceso claro y acordado.
• Traducir esos diseños en código es más rápido si ya existen componentes y estilos listos para producción.
• Hacer QA es más rápido si se hace sobre un producto construido con elementos que ya han sido validados.
• Reduce el tiempo de incorporación a nuevos miembros al equipo.
• Reduce el tiempo que lleva aprender a trabajar con un sistema nuevo.

---

Quizás te interese este otro post: ¿Qué es un Sistema de Diseño?

---

¡Saludos!

Turo
DesignOps en Adevinta Spain

Sobre nuestro equipo:
En Adevinta Spain tenemos Sistemas de Diseño para todas nuestras marcas, que incluyen guías de estilo, manuales de colaboración, Tokens, Componentes y UI Kits tanto para Web como para Native Apps.

Echa un vistazo a SUI Components nuestro proyecto de React Open-Source con el que creamos todas nuestras Webs.