Un design system es un catálogo de piezas ya construidas y documentadas con las que se montan tus pantallas: botones, formularios, tablas, avisos, tarjetas. No es un documento de diseño: es código real que los programadores reutilizan, con sus normas de uso escritas al lado. Y la respuesta corta a cuándo te hace falta es esta: cuando tienes más de una web o aplicación que deben parecer de la misma empresa y más de una persona tocándolas. Por debajo de eso, probablemente te sobre.
Lo escribo así de claro porque es un término que se ha puesto de moda y se está vendiendo a empresas que no lo necesitan todavía.
En qué se diferencia de una guía de estilo
Una guía de estilo o manual de marca dice cómo deben ser las cosas: estos son los colores corporativos, esta la tipografía, así se usa el logotipo. Es un documento, normalmente un PDF, y su destinatario es una persona.
Un design system dice lo mismo, pero además lo entrega hecho. La diferencia práctica se ve con un ejemplo. Con una guía de estilo, cada vez que un programador necesita un botón, lo construye leyendo que el color corporativo es tal y que las esquinas van redondeadas. Con un design system, llama al botón que ya existe y queda bien por defecto, sin decisiones que tomar.
De ahí sale la consecuencia que importa: con guía de estilo, la coherencia depende de que todo el mundo se acuerde; con design system, la coherencia es el camino más fácil. Y en un equipo con prisas, lo que es más fácil es lo que pasa.
Un sistema completo suele tener cuatro capas: los fundamentos (colores, tipografías, espaciados y tamaños, definidos como variables), los componentes (las piezas montadas con esos fundamentos), los patrones (cómo se combinan los componentes para resolver situaciones que se repiten, como un formulario de registro o una tabla con filtros) y la documentación que explica cuándo usar cada cosa y cuándo no.
Qué problemas resuelve de verdad
Dejando a un lado el argumento estético, estos son los efectos que notas en la cuenta de resultados:
- Dejas de pagar dos veces por lo mismo. Si tienes web corporativa, área de clientes y app, es muy probable que hayas pagado tres veces por un selector de fechas y tres veces por una tabla paginada.
- Las pantallas nuevas salen más rápido. Montar una pantalla con piezas existentes es ensamblar, no diseñar desde cero. El ahorro se nota a partir de la tercera o cuarta pantalla.
- La accesibilidad se arregla una vez. Si el componente de campo de formulario lleva bien sus etiquetas y su contraste, todos los formularios de la empresa lo llevan bien. Y con la normativa europea de accesibilidad ya exigible, esto ha pasado de ser una buena práctica a ser una obligación.
- Cambiar de imagen deja de ser un proyecto. Si los colores están definidos como variables en un único sitio, un cambio de marca se propaga solo. Sin sistema, es revisar pantalla por pantalla.
- Los cambios de proveedor dejan de doler. Un equipo nuevo encuentra las piezas y las normas documentadas en lugar de adivinar por qué hay cuatro azules distintos.
Fíjate en que ninguno de estos beneficios aparece el primer día. Todos se cobran con el tiempo y con el volumen. Por eso el momento en el que decides montarlo importa tanto.
Cuándo compensa y cuándo no
Esta es la tabla que suelo dibujar en una pizarra cuando un cliente pregunta:
| Tu situación | ¿Te hace falta? | Qué hacer en su lugar |
|---|---|---|
| Una web corporativa, un proveedor | No | Una guía de estilo corta y la plantilla bien hecha |
| Web más tienda online | Todavía no | Compartir colores y tipografías como variables |
| Web, área privada de clientes y app | Sí, empieza pequeño | Un conjunto reducido de componentes compartidos |
| Varias marcas o varios países | Sí, con claridad | Sistema con temas por marca |
| Software que vendes como producto | Sí | Sistema documentado y versionado |
Hay además una señal de alarma que vale más que cualquier tabla: si en tus reuniones alguien pregunta «¿este es el azul bueno?», ya tienes el problema. Si nadie lo pregunta nunca, no corras.
Cómo se construye sin montar un proyecto enorme
El error más caro es tratarlo como una obra que se entrega terminada. Un design system que se construye entero antes de usarse acaba lleno de componentes que nadie necesitaba. Se hace al revés:
- Inventario primero. Captura las pantallas que ya tienes y cuenta cuántas versiones distintas hay de cada pieza. Es un ejercicio incómodo y muy revelador: suelen aparecer cinco botones y tres tipos de aviso de error.
- Fija los fundamentos. Paleta, tipografías, escala de espaciados y tamaños, definidos como variables con nombre. Esta fase es corta y es la que más rendimiento da.
- Empieza por las cinco piezas que más se repiten. Normalmente botones, campos de formulario, avisos, tarjetas y tablas. Nada más.
- Úsalo en el siguiente proyecto real, no en una maqueta. El sistema se valida cuando resuelve una pantalla que había que entregar de todas formas.
- Documenta a la vez que construyes. Cada componente, con su ejemplo de uso y su «no lo uses para esto». Si la documentación se deja para el final, no se escribe.
- Pon un responsable. Alguien decide qué entra y qué no. Sin esa figura, en seis meses tienes otra vez cinco botones, ahora dentro del sistema.
Con ese enfoque, los fundamentos y el primer puñado de componentes salen en semanas, no en meses, y conviven con el trabajo normal del equipo.
Qué pedir a tu proveedor si ya tienes uno a medio hacer
Muchas empresas tienen trozos de sistema sin saberlo. Para saber qué tienes, pide estas cuatro cosas concretas:
- Dónde están los fundamentos y si son variables de verdad o colores escritos a mano en cada plantilla.
- La lista de componentes con un sitio donde verlos todos juntos y probarlos.
- El informe de accesibilidad de esos componentes: contraste, uso con teclado y etiquetas.
- De quién es el código y en qué repositorio vive. Si el sistema es propiedad de tu proveedor, no es un activo tuyo.
Esta última conviene mirarla con calma. Un design system es, al final, patrimonio digital de tu empresa: lo que te permite cambiar de equipo sin empezar de cero. Si no es tuyo, estás construyendo sobre terreno ajeno.
Lo que conviene retener
Un design system es tu catálogo de piezas reutilizables, en código y documentado, y su valor está en la repetición: cuantas más pantallas y más manos, más te devuelve. Si tienes una sola web, te basta una guía de estilo bien hecha y plantillas limpias. Si tienes web, área de clientes y app, cada mes que pasa sin sistema estás pagando dos o tres veces por las mismas piezas y arreglando la accesibilidad por triplicado. Y empieza siempre pequeño: fundamentos y cinco componentes usados en un proyecto real valen más que un catálogo perfecto que nadie usa.
Si tienes varias webs o aplicaciones que no acaban de parecer de la misma empresa, escríbenos y hacemos el inventario contigo: solo con ver cuántas versiones hay de cada pieza queda claro si te compensa o no.
Artículos relacionados
Preguntas frecuentes sobre
Cómo mejorar mi negocio con la metodología Anticompetencia
En Tangram no queremos que la información pase por una cadena interminable de intermediarios donde se pierden los detalles importantes.
Contarás con un interlocutor que coordinará la comunicación y trasladará las decisiones al equipo responsable de tu proyecto.
Cuando sea necesario profundizar en cuestiones de estrategia, diseño o tecnología, podremos involucrar a los especialistas correspondientes.
Así tendrás una comunicación organizada, sin necesidad de gestionar personalmente a todos los profesionales que intervienen.
Queremos que tengas acceso al conocimiento de un equipo especializado, sin sufrir la complejidad de coordinarlo.
No tendrás que averiguar a quién escribir cada vez que tengas una duda.
En Tangram contemplamos la figura del Account Manager como interlocutor principal, encargado de acompañarte durante el proyecto, coordinar la comunicación y facilitar el seguimiento de las decisiones.
Nuestra metodología incluye reuniones de revisión, canales de comunicación y herramientas para que puedas participar en el trabajo.
La organización concreta, la frecuencia de las reuniones y los canales disponibles se establecerán según el proyecto contratado.
Lo importante es que sepas con quién hablar, en qué punto está tu proyecto y qué decisiones necesitan tu participación.
Sí, podemos valorar una colaboración con los profesionales que ya trabajan en tu empresa.
No siempre tiene sentido sustituir un equipo que conoce bien tu negocio. En muchas situaciones, lo más útil es complementar sus conocimientos con especialistas en determinadas áreas.
Podemos estudiar qué responsabilidades asumiría Tangram, cuáles mantendría tu equipo y cómo coordinar las decisiones para evitar duplicidades.
La forma concreta de colaboración dependerá de la organización, las herramientas y las necesidades del proyecto.
No se trata de reemplazar lo que ya funciona, sino de aportar el conocimiento que necesitas para llegar más lejos.
No tienes por qué cambiar de proveedor para explorar una colaboración con Tangram.
Durante nuestra trayectoria hemos trabajado con agencias y consultoras, participando en proyectos en los que cada empresa asumía una parte diferente del trabajo.
Esa experiencia nos permite comprender la importancia de definir responsabilidades y coordinar a los profesionales implicados.
Podemos valorar una colaboración para cubrir necesidades concretas que tu proveedor actual no ofrece o para reforzar determinadas áreas.
Si tienes una relación profesional que funciona, no queremos que la rompas sin motivo. Queremos encontrar dónde podemos aportar valor.
La confidencialidad es especialmente importante cuando hablamos de nuevas ideas de negocio, información económica, estrategias comerciales o desarrollos tecnológicos.
En Tangram tenemos experiencia trabajando en proyectos sujetos a acuerdos de confidencialidad, motivo por el que no podemos mostrar públicamente muchos de los trabajos en los que hemos participado.
Si tu proyecto requiere un acuerdo de confidencialidad (NDA) antes de compartir información sensible, podemos revisar sus condiciones y acordar cómo proteger esa información antes de entrar en los detalles.
Entendemos que la confianza empieza por respetar lo que todavía no quieres hacer público.