Design Systems: La Base de Productos Consistentes
Un design system es una colección organizada de componentes reutilizables, tokens de diseño y documentación que permite a equipos construir productos consistentes a escala. No es solo una librería de componentes en Figma — es un lenguaje compartido entre diseño y desarrollo.
Componentes de un design system
- Design tokens: los valores atómicos del sistema — colores, tipografía, espaciado, sombras, border radius
- Componentes UI: elementos reutilizables como botones, inputs, cards, modales, tablas, tooltips
- Patrones: combinaciones de componentes para resolver problemas comunes (formularios, navegación, dashboards)
- Documentación: reglas de uso, do's and don'ts, ejemplos de implementación para cada componente
- Assets: íconos, ilustraciones y otros recursos gráficos con convenciones de uso definidas
¿Cuándo necesitas un design system?
- Cuando tienes más de 2-3 personas diseñando o desarrollando el mismo producto
- Cuando notas inconsistencias: el mismo botón se ve diferente en distintas pantallas
- Cuando los diseñadores pierden tiempo recreando componentes que ya existen
- Cuando los desarrolladores preguntan constantemente '¿qué color es este?' o '¿cuánto padding lleva?'
- No lo necesitas si eres un equipo de 1-2 personas en un MVP — empieza simple y evoluciona
Design system vs UI kit vs librería de componentes
| Concepto | Qué incluye | Cuándo alcanza |
|---|---|---|
| UI kit | Componentes visuales en Figma, variantes y estilos. | Prototipos, MVPs y equipos chicos. |
| Librería de componentes | Componentes en código, props, estados y tests. | Productos con frontend repetido o varios equipos. |
| Design system | Tokens, componentes, patrones, documentación, accesibilidad, contenido y gobernanza. | Productos que necesitan consistencia, escala y mantenimiento. |
La diferencia importante es operativa: un design system reduce decisiones repetidas. Define qué usar, cuándo usarlo, cómo se comporta, cómo se implementa y quién mantiene cada pieza.
Design systems populares para estudiar
- Material Design (Google): el más completo y documentado — referencia obligatoria para Android y web
- Apple Human Interface Guidelines: principios de diseño para iOS y macOS
- Ant Design: design system orientado a productos enterprise y dashboards (muy popular en startups)
- Shadcn/ui: componentes React con enfoque en personalización — muy popular en el ecosistema Next.js
- Carbon Design System (IBM): referencia excelente para productos de datos y analytics
Consejo: No intentes construir un design system completo desde el primer día. Empieza con tokens (colores, tipografía) y 5-10 componentes básicos. El sistema crecerá orgánicamente con las necesidades del producto.
Ejercicio práctico: mapa mínimo de design system
Elegí una pantalla real de producto, por ejemplo login, dashboard o checkout. Identificá los componentes repetidos y armá un mapa mínimo del sistema de diseño.
- Tokens: colores, tipografía, espaciado, radios y sombras.
- Componentes: botón primario, input, card, navegación, tabla o modal.
- Patrones: formulario, estado vacío, lista, alerta o flujo de confirmación.
- Reglas: cuándo usar cada variante y qué errores evitar.
Checklist de entrega
- Una captura auditada con inconsistencias marcadas.
- Una tabla con 5 tokens base y su uso.
- Una lista de 5 componentes priorizados.
- Una regla clara para botón, input y card.
Entregable: publicá una página de portfolio con el antes, el sistema mínimo y el después aplicado a una pantalla.
Mini proyecto para portfolio UX/UI
Si querés mostrar esta habilidad para empleo, no presentes solo pantallas lindas. Publicá una pieza pequeña de sistema:
- Definí tokens de color, tipografía, espaciado y radio.
- Documentá 5 componentes: botón, input, card, modal y tabla.
- Mostrá estados: default, hover, focus, disabled, error y loading.
- Explicá reglas de uso y errores comunes.
- Conectá Figma con una implementación simple en React o Tailwind.
Salida laboral: esta evidencia conecta con roles de product designer, UI designer, frontend UI, design systems assistant y equipos de producto. Seguí la ruta de Product Designer, revisá empleos y compará perfiles en el marketplace de profesionales.