El atomic design es una metodología creada por Brad Frost en 2013 (en su libro «Atomic Design», publicado gratis online) para organizar los componentes de una interfaz en cinco niveles jerárquicos. Se inspira en la química: los átomos componen moléculas, las moléculas componen organismos, y así sucesivamente. Con los años, se ha convertido en la metodología más adoptada para diseñar y mantener design systems escalables.
En este artículo veremos qué significa, cómo aplicar sus 5 niveles a un sistema real (con ejemplos en Figma), por qué funciona pero no es una solución universal, y una guía práctica para construir tu primer design system atómico desde cero.
¿Qué es Atomic Design? Los 5 niveles
1. Átomos
Los átomos son los bloques de construcción fundamentales de la interfaz: un color, un tamaño de fuente, un icono, un campo de entrada, un botón o una etiqueta. Por sí solos, no tienen significado funcional —son demasiado abstractos para ser usados de forma aislada— pero son la base de todo lo demás.
Ejemplos: el color primario, la fuente Inter a 16px, el icono de «búsqueda», un borde redondeado de 8px o la base de un botón.
2. Moléculas
Las moléculas son combinaciones de átomos que forman un componente funcional. Una barra de búsqueda es una molécula: combina un campo de entrada (átomo) + un icono de búsqueda (átomo) + un botón de enviar (átomo).
Las moléculas tienen una única responsabilidad específica y son reutilizables en múltiples contextos.
3. Organismos
Los organismos son grupos de moléculas y/o átomos que forman una sección de la interfaz. Un encabezado (header) es un organismo: contiene el logo (átomo) + la navegación (molécula) + la barra de búsqueda (molécula) + el menú de perfil (molécula).
Los organismos empiezan a tener una identidad propia: un «header de checkout» es distinto a un «header de marketing».
4. Plantillas (Templates)
Las plantillas son esquemas de página sin contenido real. Definen la estructura: dónde va el encabezado, la barra lateral, el contenido principal y el pie de página. Trabajan con marcadores de posición (placeholders), no con datos reales.
Las plantillas separan la estructura del contenido, permitiendo diseñar la retícula antes de conocer el texto final.
5. Páginas
Las páginas son plantillas con contenido real y representativo. La página de producto, la de pago, el perfil de usuario... Son el punto donde el diseño se vuelve tangible y se puede probar con usuarios reales.
En las páginas es donde surgen los problemas: textos demasiado largos que rompen el diseño, casos de uso no considerados o datos reales que desajustan la retícula.
Las 4 ventajas de pensar en átomos
1. Escalabilidad. Un cambio en un átomo (ej. el color primario) se propaga automáticamente a todas las moléculas, organismos, plantillas y páginas. Hacer un rebranding en un design system atómico es 10 veces más rápido.
2. Comunicación de equipo. Diseñadores, desarrolladores y PMs comparten un lenguaje común. «Añade otra molécula de búsqueda» es una instrucción clara para todos.
3. Reutilización. Las moléculas y organismos son modulares y se pueden portar entre proyectos. Una «tarjeta de producto» funciona en la página de inicio, en un listado, en la búsqueda o en las recomendaciones.
4. Mantenimiento. La corrección de errores está localizada: arreglar un átomo no pone en riesgo toda la librería de componentes.
Cómo aplicarlo en Figma: Guía práctica
Paso 1: Empieza por los átomos
Crea una página en Figma llamada «Foundations» o «Tokens» con: variables de color, escalas tipográficas, sistema de espaciado, elevaciones (sombras), radios de borde e iconos base.
Paso 2: Construye 5-10 moléculas esenciales
Las más comunes: botón (primario, secundario, ghost), campo de entrada (con estados: default, focus, error, disabled), checkbox, radio, desplegable, enlace, badge y avatar.
Paso 3: Ensambla 5-10 organismos
Encabezado, pie de página, tarjetas, modales, barra de navegación lateral, secciones de formulario, breadcrumbs, paginación y tablas.
Paso 4: Diseña 3-5 plantillas
Plantilla para landing de marketing, para un panel de control (dashboard), para una página de formulario, para un listado/detalle y para una página de error.
Paso 5: Rellena las páginas reales
Solo en este punto diseñas la página de inicio, la de producto o la de pago, combinando los organismos dentro de las plantillas.
Atomic Design vs. Design System
Es una confusión habitual. La diferencia es simple:
- El Design System es el producto final: la librería de componentes, la documentación y las guías de uso.
- El Atomic Design es la metodología que usas para organizar ese sistema en niveles jerárquicos.
Puedes tener un design system no-atómico (ej. organizado por tipo de componente sin jerarquía) o usar la metodología atómica en un proyecto aislado sin un design system formal. A menudo se solapan, pero no son sinónimos.
Críticas a la metodología Atomic Design
Con el tiempo, el Atomic Design ha recibido críticas válidas:
Categorización rígida. Algunos componentes no se dejan clasificar fácilmente. ¿Una «tarjeta de producto» es una molécula o un organismo? La discusión consume tiempo y no aporta valor.
Sobreingeniería prematura. Para proyectos pequeños (1-2 diseñadores, 5-10 pantallas), es una metodología excesiva (overkill). Un sistema simple de componentes sin jerarquía funciona mejor.
No resuelve el problema de fondo. El reto de un design system no es cómo categorizar componentes, sino su gobernanza, adopción y mantenimiento en el tiempo. El Atomic Design no ayuda con esto.
El propio Brad Frost ha actualizado su visión con los años. En su blog, ahora pone menos énfasis en la rigidez de la categorización y más en la flexibilidad del modelo.
Alternativas al Atomic Design
- BEM (Block Element Modifier): una metodología de CSS que organiza por bloques, muy popular en equipos de desarrollo frontend.
- Sistema de tokens de Material Design 3: una jerarquía de 3 niveles de tokens (reference, system, component), más orientada al desarrollo.
- Patrones de Theo's Design System: se enfoca en los patrones de uso más que en la estructura de los componentes.
- Jerarquías personalizadas: muchos equipos grandes como los de Glovo, Cabify o Idealista desarrollan sus propias taxonomías híbridas adaptadas a sus necesidades.
Preguntas frecuentes (FAQ)
¿Tiene sentido usarlo en un proyecto pequeño?
Para menos de 1 diseñador y 20 pantallas, probablemente no. Para más de 3 diseñadores y 50 pantallas, sí. En el medio, depende de la velocidad de crecimiento del proyecto.
¿Debo crear una página en Figma para cada nivel?
Es una convención habitual (una página para «Átomos», otra para «Moléculas», etc.), pero no es obligatorio. Lo importante es que la jerarquía sea clara, no su organización en páginas.
¿Cuántos componentes necesito para empezar?
Para un MVP: 10-15 átomos, 8-12 moléculas, 5-8 organismos y 3-5 plantillas. Un total de 30-40 componentes. Añade nuevos solo cuando una pantalla lo requiera.
¿Es fácil de entender para un perfil junior?
Los primeros 3 niveles (átomos, moléculas, organismos) son muy intuitivos. Las plantillas y páginas requieren más experiencia para definirlas bien. Empieza a clasificar componentes en tus proyectos para interiorizar el método.
¿Puedo usarlo sin un design system formal?
Sí. Incluso en un proyecto individual, organizar los componentes en átomos, moléculas y organismos hace que tu archivo de Figma sea más fácil de navegar y mantener. No necesitas un design system completo para beneficiarte de la jerarquía.
Próximos pasos
El Atomic Design es clave para cualquiera que quiera especializarse en Design Systems, una especialización muy demandada y bien pagada. En España, un Senior Design System Designer puede ganar entre 45.000 y 65.000 € anuales según datos de InfoJobs y Glassdoor. En mercados como México o Colombia, los salarios también son muy competitivos.
El Curso de UI & Visual Design de CorsoUX dedica módulos enteros a design systems, atomic design, Figma Variables y tokens. Son más de 100 clases con mentorías 1:1.
Para profundizar, te recomendamos leer sobre qué es un design system, la metodología de Material Design 3 y nuestro tutorial de Figma enfocado en componentes reutilizables.
