Un design system es la columna vertebral de interfaces coherentes. Aquí va cómo plantearlo para que aguante cuando el equipo y el producto crecen.
Para qué sirve de verdad
- Coherencia entre productos
- Menos tiempo rehaciendo lo mismo
- Mejor tándem entre diseño y desarrollo
- Menos deuda a medio plazo
Principios
1. Empieza por tokens
Los tokens son los átomos: colores, espaciado, radios.
export const tokens = { colors: { primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a', }, neutral: { 0: '#ffffff', 100: '#f5f5f5', 900: '#171717', }, }, spacing: { xs: '0.25rem', sm: '0.5rem', md: '1rem', lg: '1.5rem', xl: '2rem', }, radii: { sm: '0.25rem', md: '0.5rem', lg: '1rem', full: '9999px', }, } as const;
2. Primitivos primero
Botón, input, badge: piezas pequeñas y estables.
import { cva, type VariantProps } from "class-variance-authority"; const buttonVariants = cva( "inline-flex items-center justify-center rounded-md font-medium transition-colors", { variants: { variant: { primary: "bg-primary text-white hover:bg-primary/90", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", }, size: { sm: "h-8 px-3 text-sm", md: "h-10 px-4", lg: "h-12 px-6 text-lg", }, }, defaultVariants: { variant: "primary", size: "md", }, } ); interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {} export function Button({ variant, size, className, ...props }: ButtonProps) { return ( <button className={buttonVariants({ variant, size, className })} {...props} /> ); }
Composición
| Nivel | Ejemplos | Rol |
|---|---|---|
| Tokens | Color, espacio, tipografía | Base |
| Primitivos | Button, Input, Badge | Ladrillos |
| Patrones | Card, Modal, Dropdown | UI repetida |
| Plantillas | PageHeader, Sidebar | Layout |
Documentación
Un design system sin documentación es solo una librería de componentes suelta.
Cada pieza debería tener:
- Ejemplos de uso real
- Props explicadas sin misterio
- Accesibilidad: roles, teclado, foco
- Sí y no: cuándo usarla y cuándo no forzarla
Versiones
{ "name": "@company/design-system", "version": "2.1.0", "peerDependencies": { "react": "^18.0.0", "tailwindcss": "^3.0.0" } }
Versionado semántico:
- Major: rompe compatibilidad
- Minor: novedades sin romper lo anterior
- Patch: arreglos
Conclusión
Es inversión de tiempo que luego se nota en productividad, consistencia, UX y cómo se habla el equipo. Empieza pequeño, itera y documenta todo lo que no quieras explicar mil veces.