Un átomo se combina con otros átomos para formar moléculas, y esas moléculas se combinan a su vez para formar organismos complejos. Brad Frost tomó esta metáfora científica y la aplicó al diseño de interfaces: el diseño atómico (Atomic Design) es una metodología que organiza los componentes visuales de un producto digital en cinco niveles jerárquicos, desde los elementos más básicos e indivisibles hasta las pantallas completas construidas a partir de ellos.
Los cinco niveles, de lo más simple a lo más complejo
Átomos: los elementos más básicos e indivisibles de una interfaz: un botón, un campo de texto, una etiqueta, un color. Moléculas: combinaciones simples de átomos que funcionan juntos como una unidad, como un campo de búsqueda formado por una etiqueta, un input y un botón. Organismos: secciones más complejas formadas por varias moléculas, como una cabecera completa con logotipo, menú de navegación y buscador. Plantillas: la estructura de una página, mostrando cómo se organizan los organismos entre sí, pero todavía con contenido genérico de relleno. Páginas: las plantillas ya rellenadas con contenido real específico, la versión final que ve el usuario.
Por qué esta jerarquía facilita tanto la consistencia a gran escala
- Un cambio en un átomo (por ejemplo, el estilo de todos los botones primarios) se propaga automáticamente a cada molécula, organismo y página que lo usa, sin necesidad de actualizar cada instancia por separado.
- Facilita que distintos diseñadores y desarrolladores trabajen con el mismo vocabulario y las mismas piezas reutilizables, en lugar de crear versiones ligeramente distintas de un mismo componente cada vez.
- Sienta las bases técnicas para construir un design system completo, ya que la propia lógica de átomos, moléculas y organismos se traduce de forma natural en componentes de código reutilizables.
Un ejemplo aplicado a un formulario de contacto habitual
Un campo de texto individual es un átomo. Ese campo combinado con su etiqueta y su mensaje de error es una molécula. El formulario completo, con varios de esos campos más el botón de envío, es un organismo. La página de contacto entera, con ese formulario más otros elementos como un mapa o información de contacto adicional, es la página final construida a partir de todas las piezas anteriores.
Por qué no es solo una cuestión de organización de archivos
Más allá de facilitar la organización técnica del código, el diseño atómico obliga a pensar de forma deliberada en la reutilización desde el principio de cualquier proyecto, en lugar de diseñar cada pantalla como si fuera un caso único y aislado. Esta disciplina reduce considerablemente la inconsistencia visual que aparece de forma natural cuando distintas personas diseñan pantallas distintas sin ningún sistema compartido de referencia entre ellas.