Qué es un sistema de diseño

Un sistema de diseño (design system) es un proceso y conjuntamente una fuente de recursos que ayuda a los equipos a diseñar y desarrollar los productos digitales de una compañía.

Es un proceso porque se encuentra en constante evolución. Un sistema de diseño está vivo y progresa continuamente a la vez que los productos que ayuda a desarrollar.

Es una fuente de recursos porque proporciona, entre otros elementos, una biblioteca de componentes funcionales y unas reglas o pautas de uso.

El propósito fundamental de un sistema de diseño es facilitar el trabajo de los equipos.

Una de las claves del éxito de los sistemas de diseño es que están concebidos para facilitar el trabajo y dar soporte a todos los miembros de un equipo de desarrollo de producto. Su vocación es ser interdisciplinar. De modo que sirva de ayuda a diseñadores, desarrolladores, product owners, etc.

La idea de disponer de elementos de interfaz reutilizables no es nueva. Existe desde hace décadas. Con formas y nombres diferentes: UI kit, guía de estilo, widgets, etc. El hecho diferencial o valor añadido que aporta un sistema de diseño es que proporciona los elementos que necesitan tanto los diseñadores como los desarrolladores. Además de que no permanece estático, sino que evoluciona constantemente para adaptarse a las nuevas necesidades de los productos que ayuda a construir.

Principales beneficios de un sistema de diseño

Brad Frost es uno de los primeros y más influyentes autores que han teorizado sobre los sistemas de diseño. En su libro Atomic Design (2013) aporta un listado de los principales beneficios que se derivan de disponer de un sistema de diseño:

Promueve la consistencia y cohesión de todos los interfaces y aplicaciones.
Incrementa la productividad de los equipos. Ahorrando tiempo y dinero.
Facilita un flujo de trabajo colaborativo entre las distintas disciplinas implicadas en los proyectos de desarrollo (jefes de proyecto, diseñadores, desarrolladores front-end, desarrolladores back-end, etc.)
Establece un vocabulario común para todas las partes implicadas en el desarrollo. Incluyendo proveedores externos.
Proporciona documentación útil para ayudar a formar a todas las partes implicadas en el desarrollo. Incluyendo proveedores externos.
Facilita el testeo en distintos navegadores y dispositivos.
Constituye una base sólida que se debe extender y mejorar con el tiempo.

A los sistemas de diseño hay que dedicarles tiempo

El desarrollo de un sistema de diseño requiere de una importante dedicación de tiempo y recursos. Si bien, una vez que se ha desarrollado, incrementa la velocidad y productividad de los equipos.

No hay que considerar un sistema de diseño como un proyecto con un alcance limitado. Debe ser considerado como parte del producto. Y como tal, crecer y evolucionar de manera ilimitada.

En el momento en el que un sistema de diseño deja de reflejar la realidad del producto, está obsoleto. Para evitarlo hay que disponer de un workflow que lo actualice constantemente.

El “secreto” para desarrollar un sistema de diseño realmente efectivo no es otro que el que exista una auténtica colaboración y comunicación entre todas las partes implicadas y hacerlas trabajar de manera colaborativa, iterativa e incremental.

La base de un sistema de diseño: la guía de estilo

No existe una convención universal sobre los entregables que debe o no debe contener un sistema de diseño. En gran medida depende de las necesidades, recursos y conocimientos de cada compañía. El mínimo que debería incluir es lo que se conoce como guía de estilo (style guide).

Las guías de estilo reciben varios nombres alternativos: pattern libraries, UI libraries, component libraries.

La guía de estilo es una colección de componentes y reglas de uso que el equipo debe seguir para asegurarse de que las diferentes partes de un producto sean consistentes y proporcionen una experiencia coherente al usuario.

Una buena guía de estilo cuenta, al menos, con las siguientes funcionalidades:

Proporciona descripciones de los componentes que incluye.
Facilita el código fuente de cada componente.
Permite visualizar los componentes a distintas resoluciones de monitor.
Proporciona mecanismos para visualizar las distintas variantes de un componente.
Proporciona contenidos reales de ejemplo para las distintas plantillas.
Proporciona información contextual sobre el uso adecuado de los componentes.

Las piezas de un sistema de diseño: los componentes

La unidad básica de un sistema de diseño la constituyen los llamados componentes. Son con los que construiremos los interfaces de nuestra aplicación.

Para entender el concepto de componente, es habitual compararlos con los bloques de LEGO. Nos es mala aproximación, pero le faltan matices. Los bloques de LEGO son piezas muy pequeñas y reutilizables. Mientras que los componentes de un sistema de diseño pueden ser de dimensión y/o funcionalidades muy diferentes. Por ello el autor Brad Frost, en su libro Atomic Design (2013), popularizó la metáfora de la química básica. De modo que los componentes pueden ser de tipo “átomo”, “molécula” u “organismo”. Ayudando a entender que la construcción de los componentes de un sistema de diseño implica jerarquía.

La clave de los componentes está en desarrollarlos de modo que puedan estar ubicados en “cualquier” sitio. Es decir, deben ser modulares.

No menos importante que la modularidad es que los componentes incluyan instrucciones de uso que nos permitirán utilizarlos de manera lógica y consistente, a través de todos los productos.

Ejemplos de sistemas de diseño

Algunas compañías publican en abierto sus sistemas de diseño. Suelen hacerlo aquellas que cuentan con una comunidad de desarrolladores externos que trabajan desarrollando aplicaciones que vivirán en su mismo ecosistema.

Lo cual nos brinda una oportunidad única de estudiar y aprender de los sistemas de diseño que estas compañías han desarrollado. Nos ayudará a la hora de crear y mantener los nuestros propios. Porque sí, si puedes permitírtelo, existen importantes ventajas derivadas de crear un sistema de diseño propio.

Algunos ejemplos destacados: