Lección 5 de 12 · Lectura y práctica
Qué es design system: sistema de diseño
Respuesta rápida: qué es design system: un design system, o sistema de diseño, es el conjunto de tokens, componentes, patrones, documentación y reglas que permite construir interfaces consistentes entre diseño, producto y.
Del concepto a la práctica
Taller de esta lección
Un sistema de diseño relaciona decisiones, piezas reutilizables y reglas de uso. Su valor aparece cuando dos personas pueden construir pantallas parecidas sin copiar ciegamente una imagen ni inventar estados nuevos para cada caso.
Ejemplo resuelto
En la biblioteca, el principio «hacer visible el estado de la reserva» se traduce en un token semántico, un componente de estado y una regla: cada resultado debe mostrar disponible, reservado o no disponible mediante texto. El componente de tarjeta consume esa decisión, pero no decide por sí mismo qué significa cada estado.
Pruébalo
Separa principios, tokens, componentes, patrones y documentación.
Escribe una regla para el estado de disponibilidad.
Relaciona la regla con una tarjeta y un diálogo.
Indica qué decisión debe mantenerse igual en ambas pantallas.
Error frecuente: llamar sistema a una colección de capturas sin reglas. Corrige añadiendo propósito, límites, estados y una forma de contribución.
Ejercicio: clasifica diez elementos de una pantalla en esas cinco categorías.
Comprueba tu resultado
ningún elemento queda sin categoría y cada componente incluye al menos un estado y una regla de uso.
Mapa de prácticaEl tamaño, el espacio y el contraste ayudan a distinguir lo principal de lo secundario. Una jerarquía clara guía la lectura desde el título hasta la información y la acción. Comprueba que el orden visual coincida con la tarea de la persona.
Ver la infografía en tamaño completo ↗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.
Sigue con Diseño UI y Sistemas de Diseño
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.