¿Qué Es un Design System?
Un design system es un conjunto de estándares, componentes reutilizables y guidelines que permiten a los equipos crear productos digitales consistentes y eficientes. Es más que una librería de componentes - es un lenguaje común entre diseñadores y desarrolladores.
Componentes de un Design System
1. Design Tokens
- Colores
- Tipografía
- Espaciado
- Sombras
- Border radius
- Componentes UI reutilizables
- Codificados y documentados
- Versionado
- Patrones de interacción
- Templates de layout
- Flujos comunes
- Guidelines de uso
- Do's and don'ts
- Ejemplos de código
- Procesos de actualización
- Guidelines de contribución
- Gestión de versiones
- Experiencia uniforme cross-product
- Reconocimiento de marca
- Carga cognitiva reducida para usuarios
- No reinventas la rueda
- Desarrollo más rápido
- Menos bugs por repetición
- Más fácil escalar equipos
- Onboarding más rápido
- Mantenimiento centralizado
- Lenguaje común diseñador-desarrollador
- Handoff más fluido
- Mejor feedback loop
- 47% más rápido desarrollo de nuevas features
- 34% reducción en inconsistencias UI
- 25% menos tiempo de design review
- Ahorro de costes: $1M+/año para enterprise
2. Component Library
3. Pattern Library
4. Documentación
5. Governance
Por Qué Es Importante
1. Consistencia
2. Eficiencia
3. Escalabilidad
4. Colaboración
ROI Típico
Design Tokens
Qué Son
Los valores atómicos que definen el aspecto visual. Son la base de todo el sistema.
Categorías
Color:
css
/ Nombrado semántico /
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-secondary: #64748b;
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
/ Escala neutral /
--color-gray-50: #f8fafc;
--color-gray-100: #f1f5f9;
--color-gray-900: #0f172a;
Tipografía:
css
/ Familias tipográficas /
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/ Tamaños /
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
/ Pesos /
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/ Alturas de línea /
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
Espaciado:
css
/ Unidad base 4px /
--space-1: 0.25rem; / 4px /
--space-2: 0.5rem; / 8px /
--space-3: 0.75rem; / 12px /
--space-4: 1rem; / 16px /
--space-6: 1.5rem; / 24px /
--space-8: 2rem; / 32px /
--space-12: 3rem; / 48px /
--space-16: 4rem; / 64px /
Otros Tokens:
css
/ Sombras /
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
/ Border radius /
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-full: 9999px;
/ Transiciones /
--transition-fast: 150ms ease;
--transition-normal: 300ms ease;
Herramientas para Tokens
Component Library
Anatomía de un Componente
1. Props/API
2. Variantes
3. Estados
4. Accesibilidad
Ejemplo: Componente Button
tsx
// Button.tsx
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
size?: 'sm' | 'md' | 'lg';
isLoading?: boolean;
isDisabled?: boolean;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
children: React.ReactNode;
onClick?: () => void;
}
export const Button: React.FC = ({
variant = 'primary',
size = 'md',
isLoading = false,
isDisabled = false,
leftIcon,
rightIcon,
children,
onClick,
}) => {
return (
className={cn(
'button',
button--${variant},
button--${size},
isLoading && 'button--loading'
)}
disabled={isDisabled || isLoading}
onClick={onClick}
aria-busy={isLoading}
>
{isLoading &&
{leftIcon && {leftIcon}}
{children}
{rightIcon && {rightIcon}}
);
};
Componentes Esenciales
Layout:
Tipografía:
Formularios:
Botones:
Feedback:
Visualización de Datos:
Overlay:
Navegación:
Documentación
Qué Documentar
Por Componente:
General:
Herramientas de Documentación
Storybook:
Docusaurus:
Custom:
Configuración de Storybook
tsx
// Button.stories.tsx
import { Button } from './Button';
export default {
title: 'Components/Button',
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'ghost', 'danger'],
},
size: {
control: 'radio',
options: ['sm', 'md', 'lg'],
},
},
};
export const Primary = {
args: {
variant: 'primary',
children: 'Button',
},
};
export const Secondary = {
args: {
variant: 'secondary',
children: 'Button',
},
};
export const AllVariants = () => (
);
Implementación
Enfoques
1. Construir desde Cero
2. Extender Librería Existente
3. Usar Framework CSS
Stack Recomendado 2025
Base:
Headless Components:
Styling:
Build:
Estructura Monorepo
packages/
├── design-tokens/
│ ├── tokens.json
│ └── build.js
├── ui/
│ ├── src/
│ │ ├── Button/
│ │ ├── Input/
│ │ └── ...
│ ├── package.json
│ └── tsconfig.json
├── icons/
│ └── ...
└── docs/
└── storybook/
apps/
├── web/
└── mobile/
package.json (root)
turbo.json
Mantenimiento y Governance
Versionado
Semantic Versioning:
Changelog:
Proceso de Contribución
1. Propuesta
2. Desarrollo
3. Review
4. Release
Seguimiento de Adopción
Métricas:
Herramientas:
Design Systems Populares
Open Source
Material UI (Google):
Ant Design (Alibaba):
Chakra UI:
Radix:
Enterprise (Referencia)
Carbon (IBM):
Polaris (Shopify):
Lightning (Salesforce):
Anti-Patrones
1. Over-Engineering Temprano
Problema: Design system completo antes de tener productos.
Solución:
2. Demasiadas Variantes
Problema: Botón con 15 variantes diferentes.
Solución:
3. Acoplamiento Fuerte
Problema: Componentes dependen demasiado unos de otros.
Solución:
4. Ignorar Accesibilidad
Problema: "Lo añadimos después."
Solución:
5. Sin Governance
Problema: Todo el mundo añade lo que quiere.
Solución:
Conclusión
Un design system bien implementado transforma la forma en que los equipos construyen productos digitales. La inversión inicial se amortiza rápidamente a través de eficiencia y consistencia.
Principios clave:
Pasos de implementación:
1. Audita el UI existente
2. Extrae patrones comunes
3. Define tokens
4. Construye componentes core
5. Documenta todo
6. Establece governance
---
El equipo DGI ofrece servicios de diseño e implementación de design systems. Contáctanos para discutir las necesidades de tu equipo.