Atomic Design — fundamentos, átomos, moléculas y organismos en la UI

¿Qué es Atomic Design?

Atomic Design es una metodología para crear sistemas jerárquicos de interfaces, donde cada elemento de UI pertenece a uno de cinco niveles: átomos (elementos básicos), moléculas (combinaciones de átomos), organismos (bloques complejos), plantillas (esquemas de página) y páginas (pantallas específicas con datos). La analogía está tomada de la química: los átomos se combinan en moléculas, las moléculas en organismos, los organismos en plantillas, las plantillas se llenan de contenido y se convierten en páginas.

La metodología fue propuesta por el diseñador web Brad Frost en 2013 como respuesta al problema del "pensamiento de página" — cuando cada nueva pantalla se diseña desde cero sin tener en cuenta los componentes existentes. En el libro "Atomic Design" (2016), Frost describe la implementación de la metodología en proyectos de grandes empresas: IBM, GE, Starbucks. Según Nielsen Norman Group (2022), el Atomic Design reduce el tiempo de diseño de nuevas pantallas en un 30–50% gracias a la reutilización de componentes ya creados.

El Atomic Design no es tanto una tecnología como una filosofía de organización de la UI. No está vinculado a un framework específico y es aplicable tanto en la web (React, Vue) como en el desarrollo móvil (Jetpack Compose, SwiftUI). En IT Sectr, utilizamos el Atomic Design para construir sistemas de diseño para nuestros clientes: identificamos componentes atómicos en la etapa de diseño y los transferimos a componentes de código en Compose/SwiftUI.

Cinco niveles: átomos, moléculas, organismos, plantillas, páginas

Cada nivel del Atomic Design resuelve su propio problema y tiene un área de responsabilidad estricta. Los átomos son los bloques de construcción más pequeños de la interfaz que no se pueden dividir más sin perder significado: botón, campo de texto, icono, etiqueta, casilla de verificación. Los átomos no contienen lógica de negocio ni dependen del contexto. Definen las características visuales básicas: color, tamaño, espaciado, tipografía.

Las moléculas son combinaciones de dos o más átomos que forman unidades funcionales simples. Un campo de entrada con una etiqueta y un mensaje de error es una molécula. Una tarjeta de producto con imagen, nombre y precio es una molécula. Las moléculas pueden contener lógica básica (mostrar/ocultar error), pero no contienen procesos de negocio. Las moléculas son el primer nivel en el que los componentes se vuelven reutilizables en diferentes pantallas.

Los organismos son bloques de interfaz complejos formados por moléculas y átomos que implementan una función específica de la aplicación. Un formulario de inicio de sesión (campo de email, campo de contraseña, botón de envío, enlace "olvidé mi contraseña") es un organismo. Un encabezado con logotipo, búsqueda y navegación es un organismo. Los organismos pueden contener lógica de negocio y acceder a la API, pero solo dentro de su función.

Las plantillas son esquemas de página que definen la disposición de los organismos en la pantalla sin contenido específico. Una plantilla define la cuadrícula, las columnas, las zonas de contenido — un wireframe a nivel de código. Las plantillas no contienen datos, solo marcadores de posición. Permiten evaluar la estructura de la página antes de llenarla con contenido.

Las páginas son pantallas específicas de la aplicación donde la plantilla se llena con datos reales. En este nivel se verifica cómo se ven los componentes con contenido real (cadenas largas, datos faltantes, errores). Las páginas son el único nivel que ve el usuario final. Los cambios a nivel de página no deben afectar a átomos, moléculas y organismos — si un componente necesita ser modificado, el cambio se realiza en su nivel y la página lo recoge automáticamente.

Ventajas y limitaciones de Atomic Design

Las ventajas del Atomic Design se hacen evidentes al escalar interfaces. Una biblioteca de componentes única garantiza la consistencia visual: un botón se ve igual en todas las pantallas porque es el mismo átomo. Según Brad Frost (2016), las empresas que implementaron Atomic Design reducen el tiempo de desarrollo de nuevas pantallas en un 30–50% mediante la reutilización de moléculas y organismos ya creados.

Limitaciones — el Atomic Design no describe cómo gestionar el estado de la aplicación. La metodología solo responde a la pregunta "cómo organizar los componentes de UI" pero no aborda la lógica de negocio, el enrutamiento ni la gestión de datos. La segunda limitación es la dificultad para definir los límites: ¿dónde termina una molécula y comienza un organismo? En la práctica, los límites son difusos y diferentes equipos pueden clasificar el mismo componente de manera distinta. Se recomienda establecer reglas en los tokens de diseño y en un catálogo de componentes (Storybook, Jetpack Compose Preview).

La tercera limitación es la abstracción excesiva para proyectos pequeños. Si una aplicación consta de 5 pantallas, crear una jerarquía de átomos y moléculas es trabajo innecesario. El Atomic Design se vuelve beneficioso cuando el número de pantallas supera las 20 y los componentes se reutilizan en diferentes páginas.

Atomic Design vs Feature-Sliced Design

Atomic Design y Feature-Sliced Design (FSD) resuelven problemas diferentes y pueden usarse juntos. El Atomic Design es una metodología para organizar componentes de UI, el FSD es una metodología para organizar las capas de negocio y la aplicación en su conjunto. El Atomic Design responde a la pregunta "cómo dividir la UI en partes reutilizables", el FSD responde a "cómo organizar el código en torno a las funcionalidades de negocio". No compiten: se puede tener una estructura FSD con capas de features y entities, y dentro de cada capa usar Atomic Design para organizar los componentes de UI.

Combinación típica: FSD define la estructura modular de la aplicación (capas, slices), el Atomic Design define la estructura interna de los componentes de UI dentro de cada slice. Por ejemplo, el slice feature.auth contiene moléculas (LoginForm, PasswordInput) y organismos (AuthPage) ensamblados según las reglas de Atomic Design. La capa shared contiene átomos (Button, Input, Label) reutilizados en todas las funcionalidades.

Atomic Design en aplicaciones móviles: Compose y SwiftUI

Jetpack Compose y SwiftUI admiten naturalmente la jerarquía de Atomic Design mediante la composición de componentes. Los átomos en Compose son funciones @Composable básicas: AppButton, AppTextField, AppCheckbox. Cada función acepta parámetros de personalización (color, tamaño, estado) y no contiene lógica de negocio. Los átomos se definen en la capa shared y se exportan como un UI-kit.

Las moléculas son funciones @Composable que combinan varios átomos: LabeledTextField (etiqueta + campo de entrada + mensaje de error), ProductCard (imagen + nombre + precio). Las moléculas pueden contener estado básico (validez del campo) pero no acceden a la API ni a la ViewModel. Se reutilizan en diferentes organismos.

Los organismos son funciones @Composable a nivel de funcionalidad: LoginForm (LabeledTextField para email + LabeledTextField para contraseña + AppButton de envío + enlace de recuperación). Los organismos trabajan con la ViewModel mediante funciones Intent y pueden contener lógica de negocio. En SwiftUI, se construye una jerarquía similar mediante @ViewBuilder y estructuras View personalizadas.

En SwiftUI, un átomo es una estructura View personalizada AppButton, una molécula es un campo de entrada con etiqueta en HStack, un organismo es un formulario de inicio de sesión. Esta estructura permite reutilizar componentes en todas las pantallas — cambiar un átomo (color del botón) se aplica automáticamente a todas las pantallas. La combinación de Atomic Design con un sistema de diseño garantiza la consistencia de la interfaz sin control manual de cada pantalla.