Volver al blog
Design SystemReactArquitectura
Atomic Design: Organizando componentes como un profesional
Cómo implementar Atomic Design en tu proyecto React para crear un sistema de componentes escalable y mantenible.
10 de diciembre de 20242 min read
Atomic Design en la práctica
Atomic Design es una metodología creada por Brad Frost que nos ayuda a pensar en nuestras interfaces como un sistema de componentes.
Los 5 niveles de Atomic Design
| Nivel | Descripción | Ejemplos |
|---|---|---|
| Átomos | Elementos indivisibles | Button, Input, Label |
| Moléculas | Combinación de átomos | FormField, NavLink |
| Organismos | Secciones complejas | Header, Footer, Hero |
| Templates | Layouts sin contenido | PageLayout |
| Páginas | Templates con datos | Home, Blog |
Beneficios
- Reutilización: Los componentes se usan en toda la app
- Consistencia: Un cambio se refleja en todos lados
- Mantenibilidad: Código organizado y predecible
- Escalabilidad: Fácil agregar nuevas features
Estructura de carpetas
/src/components
├── atoms/
│ ├── button/
│ └── typography/
├── molecules/
│ ├── nav-link/
│ └── theme-toggle/
├── organisms/
│ ├── header/
│ └── footer/
└── templates/
└── page-layout/
La regla de oro
Los componentes de nivel inferior nunca deben importar componentes de nivel superior.
Esto mantiene las dependencias limpias y predecibles.
Conclusión
Atomic Design no es solo una estructura de carpetas, es una forma de pensar en UI. Una vez que lo internalizas, crear interfaces complejas se vuelve mucho más manejable.