Diseño de Sistemas Web: Cómo Escalar Sin Romper Nada

El Problema de Escalar Sin Sistema

Una startup de Buenos Aires creció de 3 developers a 15 en un año.

Al mes, el sitio web tenía:

• 4 versiones del mismo botón (tamaños inconsistentes)
• 8 tonos de azul (supuestamente el mismo color)
• 5 formas diferentes de mostrar errores
• Tipografía que variaba sin razón

El CEO preguntaba: "¿Por qué nuestro sitio se ve como si 5 agencias diferentes lo hicieran?"

Respuesta: Porque no tenían design system.

Sin design system, cada developer es un director creativo. Y eso es caos.

Qué Es Un Design System (De Verdad)

No es un Figma bonito

Muchos piensan: "Voy a hacer un Figma con todos los colores y fuentes. Eso es un design system."

No. Eso es un documento. No es un sistema.

Un design system es:

• Biblioteca de componentes: Botones, inputs, cards, modales, etc.
• Guía de uso: Cuándo usarlos, cómo combinarlos
• Código reutilizable: CSS, React components, variables
• Documentación viva: Que se actualiza con el código

Por qué necesitás uno (Números reales)

| Métrica | Sin System | Con System | |---|---|---| | Tiempo para crear nueva página | 4-6 horas | 30-45 min | | Bugs de inconsistencia | 15-20 por sprint | 1-2 por sprint | | Developers necesarios para mantener | N/A | 0.5 (tiempo compartido) | | Tiempo onboarding nuevo developer | 2 semanas | 2 días |

Los números hablan solos.

Los Pilares del Design System

1. Color System

No es una lista de colores. Es una arquitectura de color.

Estructura típica:

Primarios (Brand)
- Primary-900, Primary-700, Primary-500, Primary-300, Primary-100

Secundarios (Funcionalidad)
- Success (verde): para estados positivos
- Warning (naranja): para alertas
- Error (rojo): para problemas
- Info (azul): para información

Neutrales (Base)
- Grises del 50 al 900 (para backgrounds, borders, text)

Por qué funciona: Un developer nuevo sabe exactamente qué color usar en cada caso. Sin deliberar.

Regla de oro: Máximo 11 tonos por color (900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 0).

2. Tipografía Como Escala

No es "usa Arial o Helvetica". Es una escala tipográfica.

Escala recomendada:

Display (h1): 48px, Bold, Line-height 1.2
Heading 1 (h2): 32px, Semi-bold, Line-height 1.3
Heading 2 (h3): 24px, Semi-bold, Line-height 1.3
Heading 3 (h4): 18px, Medium, Line-height 1.4
Body Large: 16px, Regular, Line-height 1.6
Body Regular: 14px, Regular, Line-height 1.6
Body Small: 12px, Regular, Line-height 1.5
Label: 12px, Medium, Line-height 1.4

¿Por qué en ratios? Porque escala en cualquier viewport. Responsive automático.

3. Componentes Reutilizables

Jerarquía típica:

Atoms (Lo más pequeño)
├── Button
├── Input
├── Label
└── Icon

Molecules (Combinaciones simples)
├── Form Group (Label + Input)
├── Button Group
└── Card Header

Organisms (Secciones completas)
├── Form
├── Navigation
├── Hero
└── Footer

Regla práctica: Un componente es reutilizable si lo usás en 3+ lugares.

4. Espaciado y Layout

No uses números al azar. Usa una escala de espaciado.

Escala común (en píxeles):

4px - gaps mínimos
8px - default gap
12px - medium spacing
16px - standard padding
24px - large padding
32px - section spacing
48px - hero spacing
64px - landscape spacing

Por qué funciona: Múltiplos de 4 o 8 se alinean mejor. Menos bugs visuales. Más consistencia.

Cómo Implementar Un Design System En Argentina

Paso 1: Auditoría (1-2 días)

Analiza tu sitio actual:

• ¿Cuántos tonos de azul usas?
• ¿Cuántos tamaños de botón hay?
• ¿Cuántas tipografías diferentes?
• ¿Qué componentes se repiten?

Documenta todo.

Paso 2: Define Tokens (2-3 días)

Crea los fundamentales:

• Paleta de colores (11 tonos por color)
• Tipografía (escala completa)
• Espaciado (escala de 4/8)
• Sombras (2-3 variantes)
• Bordes/Radius (2-3 tipos)

Exporta a JSON o CSS variables.

Paso 3: Componentes Base (1 semana)

Implementa los componentes que usas MÁS:

• Button (4 variantes: primary, secondary, ghost, danger)
• Input (con focus, error, disabled states)
• Card
• Badge
• Tooltip

No intentes hacer todo. Empieza con lo básico.

Paso 4: Documentación (Vivo)

Storybook, Zeroheight o similar. Con ejemplos, uso, no-usar.

Actualiza cada vez que cambias un componente.

Paso 5: Adopción (Ongoing)

• Nuevo proyecto = usa el system
• Viejo proyecto = migra componentes por componentes
• Code review = ¿Usa un componente que no existe? Propone al system

Casos Reales: Startups Argentinas

Caso 1: Fintech (CABA)

Antes: 8 developers, 0 design system. Cada uno hacía su cosa.

Después: 1 semana implementando system. 3 colores, 12 componentes.

Resultado:

• Bugs visuales bajaron 80%
• Nuevas features se hacían 50% más rápido
• Developers menos frustrados (ya no debatían colors)

Caso 2: Marketplace (Rosario)

Antes: Sitio que se veía como "frankenstein". Diferentes secciones parecían de diferentes webs.

Después: Design system en Figma + React components.

Resultado:

• Aspecto más profesional (más confianza para usuarios)
• Conversión subió 15% (simplemente por consistencia visual)

Caso 3: Consultoría (Mendoza)

Antes: Cada client tenía su color/fuente.

Después: System base + customización limitada por cliente.

Resultado:

• Mantenimiento 60% menos tiempo
• Clientes más felices (ven actualización en todo)
• Escabilidad: ahora manejan 5x clientes con mismo equipo

Errores Comunes

Error 1: Over-engineering

"Voy a crear 47 componentes de una."

Mal. Empieza con 10. Agrega según necesites.

Error 2: Design System muerto

Se crea, se documenta... y nunca se actualiza.

Resultado: Semana 3, alguien crea un botón diferente "porque urgente." Adiós sistema.

Solución: Asigna 1 person (part-time) a mantenerlo.

Error 3: Developers ignorando el sistema

"Esto se vería mejor así."

Solución: Code reviews que enforzan uso de componentes.

FAQ: Preguntas Reales

¿Design system es solo para grandes empresas?

No. Es especialmente útil para pequeños teams. Multiplica tu capacidad.

¿Cuánto cuesta implementar?

En Argentina: $5K a $20K pesos depende de complejidad. Pero se recupera en velocidad en 2-3 meses.

¿Figma, Storybook, o ambos?

Figma para diseño. Storybook para código. Idealmente ambos y sincronizados.

¿Qué si cambio de framework (ej: Vue a React)?

El design system es independiente. Reimplementás componentes pero tokens (colores, espacios) se reusan.

Siguiente Paso: Escalá Tu Equipo

Si tu equipo está creciendo y tu sitio empieza a verse inconsistente, es hora de un design system.

Nosotros ayudamos startups y PyMEs en Argentina a implementarlos. Sin boludeces. Sin 47 componentes innecesarios. Sistema práctico que funciona.

¿Necesitás diseño consistente?

📱 WhatsApp: +549113903722 📧 Email: beersechconsultas@gmail.com

O exploá diseño UX/UI profesional y desarrollo web a medida.

---

Última actualización: Diciembre 2024 Tiempo de lectura: 10 minutos Dificultad: Avanzada