Design system, diseña un sistema y no una página

mayo 19, 2021

Hace un tiempo hice esta pequeña introducción para saber por dónde empezar un design system, pero creo que también es importante ahondar un poco más sobre lo que es un design system y para qué sirve.

¿Qué es un design system?

Es una herramienta para desarrollar productos más rápido, la metáfora que se usa mucho es que el design system son los bloques de lego con los que creamos nuestros producto.

En general el design system se manifiesta como una guía de estilos, galería de componentes y un manual de creación.

El design system tiene que estar adaptado al tamaño del equipo y las necesidades del producto.

Si no, te arrestará la policía del UX

Es ante todo una herramienta de comunicación entre departamentos para crear de manera eficientemente un producto complejo.

¿Para qué sirve un design system?

Si alguna vez haz trabajado en un producto complejo (por ejemplo una app) te darás cuenta que hay componentes que usarás en varias partes del producto.

Por ejemplo: un botón, lo usarás en la web del producto, en distintas pantallas de la app y en los banners de marketing ¿Por qué no usar el mismo diseño de botón en todos los sitios?

La idea del design system es no tener que reinventar la rueda cada vez que tienes que crear una nueva página, sino crear un sistema que ahorre tiempo a desarrolladores, diseñadores, product owners y goblins de marketing.

Esto ahorra tiempo y hace el producto más consistente: mejoramos la experiencia de usuario y al mismo tiempo desarrollamos más rápido.

Los elementos re-utilizables son el alma de un sistema

Cuando somos jóvenes, y teníamos ganas de vivir: diseñábamos páginas por separado para unirlas después y hay algunos equipos de trabajo que se organizan de esta manera:

Tú haces la página de producto, yo hago la página de checkout y nos vemos en dos semanas para compararlas y sufrir tres semanas

Es como en las películas de miedo cuando dicen “Vamos a separarnos”

Creo que está de más decir que esta es una mala idea por que:

  1. Los usuarios no usan una página por separado, usan varias páginas en conjunto para hacer un proceso: comprar un queso, crear una cuenta, etc. Si diseñamos una experiencia completa tendremos un mejor resultado que si diseñamos páginas por separado.
  2. Los diseñadores que trabajan por separado inevitablemente repetirán trabajo: Si estoy creando la página de checkout es probable que tenga que diseñar un dropdown, y es probable que mi compañera que está haciendo la página de producto también, y si no nos coordinamos puede pasar que los dos estemos creando el diseño de un dropdown por separado.

Por eso crear elementos re-utilizables es una muy buena idea. Y te preguntarás qué es un elemento re-utilizable, pues como su nombre lo indica es un pedazo de diseño que puedes utilizar para crear otros diseños: Una pieza de lego.

El design system está compuesto por elementos re-utilizables y se agrupan así

Basado en atomic design de Brad Frost, la idea es crear componentes para crear diseños y no crear diseños en sí mismos.

1Crea tokens

Los tokens son algo así como las piezas individuales de lego con los que vas a crear tus componentes: son los colores, tipografías y spacings[1] de tu design system (A grandes rasgos).

En este post ahondo más sobre los tokens en el design system y cómo nombrarlos.

2Crea componentes con tus tokens

Diseña componentes re-utilizables que puedas modificar fácilmente a través de tus Tokens.

El objetivo es que cuando tengas que crear una página nueva ya tengas una lista de componentes que puedes utilizar para crear todos los elementos.

En este ejemplo muestro como los Tokens de color crean la base de componentes que después puedes re-utilizar

3Crea páginas con tus componentes

Con esos componentes diseña páginas re-utilizables. En general este es uno de los pasos más olvidados de la creación de un design system y es uno de los que más ahorra tiempo al momento del trabajo del día a día.

En vez de crear una página específica, creamos páginas que podemos re-utilizar si cambiamos un par de cosillas

[1] Spacings son las medidas que usas en tus diseños. Se manifiestan en paddings, margins, borders y border radius.

Etiquetas: , ,

1 comentario

  • […] Originalmente este artículo incluía qué es un design system y para que siver pero he decidido crear otro post para explicar esto con profundidad: Design system, diseña un sistema y no una página […]