Design System: cómo elaborarlo

Un sistema de diseño contiene unas guías de estilo, librería de componentes y las buenas prácticas para su uso.

El Design System sistema de diseño es un conjunto de componentes reutilizables que se reúnen bajo una serie de directrices para llevar a cabo cualquier producto digital. Entre los objetivos del sistema de diseño, se incluyen mejorar la consistencia y la calidad de la interfaz de usuario, hacer que el proceso de diseño y desarrollo sea más eficiente y enfocado, establecer un vocabulario compartido entre el diseñador y el desarrollador y proporcionar una guía clara y reconocible sobre las mejores prácticas de diseño y desarrollo.


¿Por qué utilizar un Design System?

Un Sistema de diseño bien implementado aporta muchos beneficios a un producto digital:

  • Ahorra tiempo y dinero. Los tiempos de creación se acortan dado que se pueden reutilizar componentes en lugar de crearlos desde cero para cada proyecto, por lo que se puede invertir menos tiempo en generar diseños y desarrollos y más a pensar en mejorar procesos.
  • Aporta consistencia visual en el producto y solidez a los diseños. Al crear los componentes una sola vez para poder reutilizarse, todos tienen la misma estética y se comportan con los mismos patrones ajustados a los modelos mentales y comportamientos de los usuarios de ese producto, para ofrecerles la mejor navegación.
  • Ayuda a crear un lenguaje unificado para equipos multidisciplinares.
  • Conseguimos un flujo de trabajo más ágil y colaborativo, dado que todo está estandarizado y documentado.

De qué se compone un Design System

La mayoría de Design System contiene unas guías de estilo, librería de componentes y las buenas prácticas para su uso.


Guías de estilo

Contienen documentación específica, referencias visuales y principios de diseño para crear interfaces. En un Design System habitualmente encontramos guías de estilo centradas en el branding o identidad de marca (colores, tipografías, logos…) pero para estar realmente completas se recomienda incluir el tono del lenguaje que utiliza el producto en la comunicación con el usuario, además de los estándares visuales y de interacción.


Librería de componentes

Nos ayuda a conseguir esa eficiencia a través del ahorro de tiempo y recursos. Además de ejemplos visuales de componentes, incluyen:

  • Nombre del componente: es recomendable utilizar una nomenclatura que ayude a reconocerlo de forma sencilla tanto a diseñadores como a desarrolladores.
  • Descripción: explicación de su correcto uso acompañado de “do’s” y “dont’s” para contextualizar las buenas prácticas del mismo.
  • Atributos: variables de estilo que pueden realizarse sobre el componente para adaptarlo a necesidades específicas (color, talla, forma, copy…)
  • Estados: se recomienda estandarizar los componentes por su estado “default” y crear variables en función de las necesidades de la navegación para facilitar su usabilidad.
  • Código: se añade el extracto de código del componente. Algunos Design Systems o sistemas de diseño incluso comparten múltiples ejemplos y ofrecen un “Sandbox” para probar diferentes personalizaciones.
  • Front-end & backend frameworks: para implementar los componentes. Se aplica para evitar errores innecesarios.

Patterns o buenas prácticas

Muestran combinaciones reutilizables de componentes y plantillas que abordan objetivos comunes con secuencias y flujos.


En resumen

  • Un Design System forma parte de la estrategia del producto.
  • Un Design System ayuda a los diseñadores y a los desarrolladores a estar más focalizados en la visión y la experiencia de usuario del producto.
  • Un Design System no es una librería, pero una librería sí forma parte de un Design System.
  • Un Design System facilita un lenguaje compartido impulsado por las personas al servicio de las personas (diseño centrado en el usuario).

Referencias de Design System

Cada día más empresas apuestan por utilizar Design System para sus productos y facilitan librerías y recursos para diseñadores y desarrolladores:



IBM Carbon Design System – Es el Sistema de diseño de IBM, uno de los más completos y detallados actualmente.



Apple Human Interface Guidelines – Apple tiene su propio Design System para asegurarse de que todas las interfaces de sus productos y aplicaciones que utilizan su sistema operativo (iOS) cumplen la imagen de marca.

design system apple guidelines

Polaris. – Design System de Shopify, muy orientado a ecommerce

design system polaris

Atlassian Design System – Herramientas como Trello están basadas en este Design System. Además, utiliza ejemplos de interacciones con micro-animaciones en sus componentes.

sistemas de diseño Atlassian Design System

Google Material Design System – Es el sistema de diseño de Google, al igual que los anteriores, fija estándares de su marca para la aplicación en sus productos, sobre las guías de componentes, especificaciones y documentación para desarrolladores.

Autor: Equipo UX/UI