Design System

Un sistema de diseño (design system) es un conjunto de elementos y directrices de diseño que garantizan una experiencia de usuario coherente para un producto, por lo que resulta especialmente útil cuando el producto es creado por un gran número de desarrolladores y diseñadores.

Definición: ¿Qué es un Design System?

Un Design System es un conjunto de principios y procesos que permiten a los equipos diseñar y desarrollar productos de manera coherente y eficiente. Incluye componentes reutilizables, pautas de diseño (para ensamblar los componentes), estándares de codificación y cualquier elemento que facilite la colaboración y mejore la coherencia del producto.

Por lo general, incluye componentes como botones, íconos, cuadrículas, paletas de colores y tipografías, y a veces se extiende para incluir elementos como el tono de voz. Un Design System maduro va más allá e describe todos los "puntos de contacto", ya sean digitales (sitios web, aplicaciones móviles) o físicos (impresiones, tiendas). Por ejemplo, el Design System de Décathlon, llamado Vitamin, tiene 4 dimensiones:

• Brand (logotipo, firma de marca, voz y tono, fotos y videos...)
• Digital (reglas de accesibilidad y ecodiseño, pautas, componentes...)
• Producto (firma del producto, ecodiseño, embalaje...)
• Físico (diseño de tiendas)

En resumen, el Design System es una fuente de verdad única para diseñadores y desarrolladores, que permite crear experiencias de usuario fluidas y armoniosas. No solo se utiliza para definir la apariencia de los productos, sino también para mantener la integridad de la marca y facilitar la colaboración entre los equipos. Además, ayuda a escalar el diseño, pasando de una práctica común en un pequeño grupo de individuos (diseñadores) a una estrategia que se extiende a toda una organización y a múltiples áreas (desarrolladores, especialistas en marketing, etc.).

Los 4 (grandes) beneficios de un Design System

• Eficiencia: Permite reducir el tiempo y los esfuerzos necesarios para diseñar y construir productos, gracias a la reutilización de componentes y plantillas. Menos tiempo gastado en producción significa más tiempo para diseñar y optimizar el producto.
• Coherencia: Un Design System promueve la coherencia visual y funcional entre diferentes productos y plataformas, al proporcionar una fuente única de verdad para los equipos. Copiar y pegar y el trabajo está (casi) hecho.
• Colaboración: Facilita la colaboración entre diseñadores, desarrolladores y otros miembros del equipo de producto.
• Escalabilidad: El Design System permite construir y escalar productos de manera más eficiente, adaptándose a las necesidades y evoluciones de los usuarios y la empresa.

5 ejemplos de Design Systems

Hemos mencionado antes el Design System de Décathlon, llamado Vitamin. Pero hay otros Design Systems muy buenos que vale la pena conocer. Aquí tienes algunos ejemplos:

• Oxygen, el Design System de Doctolib.
• Material Design de Google.
• Lightning de Salesforce.
• Polaris de Shopify.
• Atlassian Design System (el DS de... Atlassian).

UI Kit vs Design System: ¿Cuál es la diferencia?

No, tu archivo de Figma con algunos componentes y unas pocas pautas de marca no es un Design System. Un UI Kit contiene componentes predefinidos, colores y tipografías listos para usar en un diseño. A menudo, el UI Kit es un simple archivo de Figma. Por otro lado, un Design System establece no solo los componentes básicos (que encontrarías en un UI Kit), sino también las reglas, principios, patrones e incluso la filosofía detrás de cada elección de diseño (ya sea para web, impresiones, tono de voz, etc.).

Cómo implementar un Design System y evitar trampas

Un Design System maduro cuesta antes de dar frutos. En promedio, permite reducir en un 30 % el tiempo que los desarrolladores y diseñadores dedican a temas de UI.

Para comprender cómo se puede implementar un Design System, consultamos a uno de nuestros expertos. Anh-Minh es Senior Product Designer en Thiga y ha trabajado en Thales, Leboncoin y BlaBlaCar. A continuación, comparte su experiencia:

1 - Establecer las bases de su Design System

La primera etapa (posiblemente la más esencial) es construir un grupo de trabajo para evaluar la viabilidad del proyecto, cómo se implementará, con qué equipo y qué gobernanza. En general, en grandes empresas que aún no cuentan con un Design System, existen múltiples UI Kits y Design Systems en diferentes niveles de madurez y despliegue. En este caso, es necesario auditar lo existente para ver qué se puede conservar y simplificar.

2 - Convencer a los equipos de utilizar un Design System

El principal enemigo del Design System son los "detractores", las personas que son reacias, especialmente en una gran empresa que tiene varios Design Systems de diferentes niveles de madurez y despliegue. Para estos colaboradores, comenzar de cero con una nueva herramienta es complicado. Las soluciones incluyen evangelizar mediante la creación de una presentación de PowerPoint que muestre los beneficios a corto y medio plazo según el departamento (desarrolladores, diseñadores, marketing, etc.). También es importante hacer que el producto sea lo más fácil posible de usar. Si el DS es demasiado complicado, la gente no lo utilizará.

3 - La mejora continua de un Design System

Un Design System no es solo una herramienta (componentes, documentación), sino también un equipo y colaboradores. Un equipo que lo enriquece constantemente. Por ejemplo, en Thales teníamos un "equipo central" de 5 personas, incluyendo un Design System Lead, un Design Lead, un diseñador, un Tech Lead y dos desarrolladores Front-end. Alrededor de este "núcleo" había un "gremio" de diseñadores y desarrolladores de todas las unidades de la empresa. Cada miembro del gremio dedicaba el 20-30 % de su tiempo al Design System.