Comienzas un nuevo proyecto, recuerdas que ya has construido algo similar anteriormente pero no sabes donde lo guardaste, que nombre tiene, si debes actualizarlo debido a los guidelines… entras a la base de datos de tu equipo para buscar algo similar pero vez que mismos tipos de proyectos tienen diferentes tamaños de letra, colores que no sabes si son los correctos, un header hecho sin Auto layout. Y tú, otra vez, rehaciendo todo desde cero.
Si esto te suena familiar, es probable que necesites un Design System.
Diseñar sin sistema es diseñar +veces (lo mismo)
Al trabajar con varias marcas sabemos que debemos respetar ciertos parámetros de diseño por cada una y que en su mayoría están especificados en las guías de diseño. Ademas de esos parámetros, todas las marcas deben a su vez respetar ciertos parámetros propuestos por el canal al cual van dirigidos (página web, email, banner…). Todo esto hace que sí o sí hayan muchos elementos que se van a repetir entre proyectos. El problema recae cuando los proyectos son creados por diferentes diseñadores, con interpretaciones diferentes de que se puede o no, del uso que haga de los guidelines y de los conocimientos técnicos de cada uno, lo que termina dando como resultado falta de estructuras compartidas, sin lógica reutilizable, sin consistencia visual.
En otras palabras sabía que nuestro team (o yo mismo) había construido elementos que me podían servir otra vez…pero no los encontraba o no eran consistentes. En algunos casos no se utilizaban componentes, ni Auto Layout, ni seguían una misma escala tipográfica. Todo esto sumaba minutos, frustración y resultados dispares.
En mi caso me hacia aún más “choque” la situación porque yo ya sabía como se sentía trabajar con un buen sistema. Venía de un equipo con tokens definidos, componentes nombrados, documentación clara. Y me pasó como dice el dicho: “Nadie sabe lo que tiene hasta que lo pierde”.
El punto de quiebre (Gracias Adobe)
Una compañera y yo propusimos implementar un Design System en Figma, pero no fué sencillo. El equipo estaba cómodo con Adobe XD y en su mayoría no tenía casi nada de experiencia con la herramienta propuesta. Además, habían ciertas limitaciones debido al tipo de industria a la cual trabajábamos. La idea había sido presentada y habíamos iniciado el proceso de manera progresiva pero no había sido tomado como un proyecto fundamental… hasta que llegó la noticia: Adobe descontinuaría XD.
Aprovechamos el momento para explicar al equipo más razones del por ahora que teníamos que migrar definitivamente a Figma trabajar con un Design System podía ser un cambio positivo mencionando aspectos como:
- Acceso a todos los assets desde una librería compartida.
- Reutilización de componentes: cambia el contenido, no la estructura.
- Elementos responsivos con Auto Layout.
- Edición colaborativa en tiempo real.
- Naming convention definido.
Y así tuvimos el “visto bueno” y el apoyo para enfocarnos en desarrollar un Design System para el equipo y que realmente pudiese implementarse en nuestro workflow.
Cómo construimos nuestro Design System (paso a paso)
No queríamos solo una biblioteca bonita. Buscábamos eficiencia, consistencia y escalabilidad. Lo hicimos con foco estratégico, en estos pasos:
- Auditoría de proyectos anteriores → ¿Qué se repetía? ¿Qué podíamos estandarizar?
- Mapeo de necesidades por canal → Email, web, video, redes… cada uno tiene sus matices.
- Definición de design tokens → Colores, tipografías, espaciados.
- Naming convention clara → Nada de “final_final_v2”.
- Variantes por marca → Respetar identidad, mantener estructura.
- Componentes reutilizables → Botones, cards, templates, íconos.
- Documentación accesible → Qué usar, cuándo y cómo.
- Plan de mantenimiento → El sistema vive, cambia, mejora.
¿Y el resultado?
Aún tenemos trabajo en progreso, son muchas las marcas y sub equipos con las que contamos y además hemos tenido que entrenar a los diseñadores que no estaban tan familiarizados con la herramienta, pero actualmente realizamos gran parte de los trabajos utilizando el Design System. Hoy tenemos una librería escalable y práctica. El equipo tiene acceso a componentes bien construidos con un par de clics. El tiempo de desarrollo ha disminuido notablemente. Diseñamos con mas coherencia entre marcas y canales.
Pero mas allá de eso, cambió algo más importante: la forma en que colaboramos.