Design system:
componentes
que escalan.
El manual visual dice cómo debe verse la marca. El design system lo implementa en piezas ensamblables: componentes, tokens y reglas que escalan sin intervención manual en cada pieza nueva.
Por qué el PDF no alcanza.
Brad Frost, en Atomic Design, articula el problema: un manual de identidad visual es una guía de referencia; un design system es una infraestructura de producción. La diferencia es la misma que entre un plano de arquitectura y los ladrillos prefabricados que permiten construir rápido y consistente. El plano dice cómo debe verse la casa; los ladrillos pre-fabricados garantizan que se vea así sin depender de la habilidad de cada albañil.
Cuando una marca tiene producto digital (app, plataforma, sitio complejo), múltiples diseñadores y desarrolladores produciendo interfaces simultáneamente, el manual PDF no escala. Cada diseñador interpreta “botón primario azul con texto blanco” de forma ligeramente distinta: distinto padding, distinto border-radius, distinto tamaño de texto. El design system elimina la interpretación: el botón ya está construido como componente — se usa, no se recrea.
Nathan Curtis, en Design Systems, formaliza: un design system incluye tres capas que el manual no tiene — tokens de diseño (los valores primitivos: colores, espaciados, tipografías codificados como variables), componentes (piezas de interfaz reutilizables construidas con esos tokens) y patrones (combinaciones de componentes que resuelven problemas recurrentes). La experiencia de producto del cluster de Oferta depende directamente de la calidad del design system: cada pantalla, cada flujo, cada interacción se construye con estos bloques.
La conexión con brand equity es directa: Sharp y Romaniuk demuestran que los activos distintivos se construyen por consistencia repetida. Un design system garantiza esa consistencia a escala — el botón de tu app se ve igual en las 200 pantallas sin que 200 diseñadores lo decidan independientemente. La gobernanza del cluster de Marca se automatiza a través del sistema.
02 — Las 3 capasLas 3 capas del design system.
Capa 1: Design tokens (fundamentos)
Los valores primitivos del sistema visual codificados como variables: colores (--color-primary: #1A73E8), tipografía (--font-display: 'Inter Tight'), espaciado (--spacing-md: 16px), border-radius, sombras. Los tokens son la “fuente de verdad” — si cambiás el token de color primario, cambia en todos los componentes que lo usan. Frost: los tokens son los átomos del sistema.
Capa 2: Componentes (bloques)
Piezas de interfaz construidas con tokens: botón, input, card, navegación, modal, tabla, CTA, badge. Cada componente tiene estados (default, hover, active, disabled, error), variantes (primario, secundario, ghost) y reglas de uso. El diseñador no diseña un botón nuevo — usa el componente existente. Curtis: los componentes son las moléculas.
Capa 3: Patrones (soluciones)
Combinaciones de componentes que resuelven problemas de diseño recurrentes: formulario de login, lista de productos, header de página, layout de email, hero section. Los patrones documentan cómo se combinan componentes para resolver necesidades específicas. Son las recetas del sistema — los organismos de Frost.
Wheeler conecta design system con branding: el design system no es solo herramienta de UX — es la implementación operativa de la identidad de marca en producto digital. Cada componente lleva los colores, la tipografía, los bordes y las proporciones de la marca. El usuario no ve “componentes” — ve marca consistente en cada pantalla.
La estrategia de contenido del cluster de Crecimiento también se beneficia: los templates de blog, landing y email son patrones del design system. Cuando el equipo de contenido usa los patrones, cada pieza nueva es automáticamente on-brand. La analítica del cluster de Rendimiento puede medir si las páginas construidas con el design system tienen mejores KPIs que las construidas ad hoc — generalmente sí, por consistencia y velocidad de carga.
03 — GobernanzaQuién decide, cómo evoluciona.
Keller, en Strategic Brand Management, establece que la marca necesita custodios que protejan la coherencia sin bloquear la innovación. En un design system, eso se traduce en 3 roles: un owner (responsable del sistema), contributors (equipos que proponen nuevos componentes) y consumers (equipos que usan los componentes). Curtis formaliza este modelo de gobernanza como “federated” — descentralizado en la propuesta, centralizado en la aprobación.
La priorización del cluster de Estrategia aplica: ¿qué componentes se construyen primero? Los que más se usan y los que más impactan la experiencia del usuario. Botón, tipografía, color y layout van primero. Componentes especializados (tablas complejas, visualizaciones de datos) van después. El MVP del design system es un “starter kit” con 15-20 componentes básicos.
La arquitectura de marca complejiza: si hay submarcas, el design system necesita theming — la posibilidad de cambiar tokens (colores, tipografía) sin cambiar componentes. La submarca usa los mismos botónes pero con otros colores. El sistema escala por configuración, no por duplicación.
La experiencia de soporte del cluster de Fidelización también se beneficia: los templates de documentación de ayuda, onboarding de producto y emails transaccionales son patrones del system. Cuando soporte usa los mismos componentes que el producto, la experiencia se siente unificada. La investigación del cluster de Mercado puede evaluar si los usuarios perciben coherencia entre producto y comunicación.
Un cliente de software B2B tenía 4 diseñadores y 6 desarrolladores produciendo interfaces. Cada uno construía botones, cards y formularios desde cero. Había 14 variantes de botón “primario” en producción. Construir un design system con 20 componentes básicos llevó 6 semanas. Después de implementarlo, el tiempo de diseño de nuevas pantallas bajó un 40% y los tickets de inconsistencia visual desaparecieron. El design system no solo protege la marca — libera al equipo de recrear lo que ya debería existir.
Lisandro IserteErrores frecuentes.
Design system sin identidad de marca como base
Construir componentes sin definir primero colores, tipografía y personalidad. El design system implementa la identidad — no la reemplaza. Sin el manual visual como input, el design system es una colección de componentes genéricos sin carácter. Frascara: la forma sin significado es decoración, no comunicación.
Construir todo de entrada
Querer tener 200 componentes antes de lanzar. Frost: empezá con un starter kit (15-20 componentes) y crecé por demanda. Los componentes que nadie necesita son deuda técnica. La priorización es clave: construir primero lo que más se usa.
Sistema que solo vive en Figma sin implementación en código
Si los componentes existen en Figma pero no en el código del producto, hay brecha entre diseño e implementación. Cada desarrollador interpreta el componente de Figma a su manera. La fuente de verdad debe estar en ambos: diseño y código sincronizados.
Sin gobernanza clara
Todos pueden agregar componentes, nadie aprueba, el sistema crece sin coherencia. Sin owner y sin proceso de aprobación, el design system se convierte en lo que intentaba evitar: un repositorio desordenado de decisiones ad hoc. La estructura operativa del cluster de Estrategia incluye roles claros para el sistema.
Cómo diagnosticar si necesitás un design system.
¿Más de 2 personas diseñan o desarrollan interfaces? Si sí, la inconsistencia es inevitable sin sistema. ¿Hay más de 3 variantes del mismo componente en producción? Auditá: ¿cuántos “botones primarios” distintos tenés? Si hay más de 2, necesitás sistema. ¿El diseñador recrea componentes que ya existen? Si recrea en lugar de reusar, está perdiendo tiempo y produciendo variación. Un design system elimina ambos problemas.
La experimentación del cluster de Rendimiento puede medir el impacto: tiempo de diseño de pantallas nuevas (antes vs después del system), número de tickets de inconsistencia visual, NPS de usabilidad. Si los 3 mejoran, el design system se paga solo. La optimización de presupuesto justifica la inversión con ROI medible.
06 — Preguntas frecuentesPreguntas frecuentes.
¿Qué es un design system?
La implementación del manual visual en tokens, componentes y patrones reutilizables. El manual dice cómo se ve; el system lo construye.
¿Manual visual vs design system?
El manual es documentación. El design system es implementación. El manual dice “botón azul con texto blanco”; el system tiene el botón ya construido como componente reutilizable.
¿Todas las marcas necesitan design system?
No. Solo si tenés producto digital, múltiples equipos produciendo interfaces o volumen que hace inviable el control manual pieza a pieza.
Referencias y bibliografía.
Frost, B. (2016). Atomic Design. Brad Frost.
Curtis, N. (2022). Design Systems: A Practical Guide. 2nd ed. EightShapes.
Wheeler, A. (2017). Designing Brand Identity. 5th ed. Wiley.
Sharp, B., & Romaniuk, J. (2016). How Brands Grow Part 2. Oxford University Press.
Keller, K. L. (2013). Strategic Brand Management. 4th ed. Pearson.
Frascara, J. (2006). El diseño de comunicación. Ediciones Infinito. Buenos Aires.
Suarez, M. et al. (2019). Design Systems Handbook. DesignBetter by InVision.
Términos relacionados