¿Cómo se consigue que todas las pantallas de una web o aplicación mantengan el mismo estilo y funcionen de manera coherente? A medida que un producto digital crece, organizar correctamente sus botones, formularios y demás elementos resulta cada vez más importante.
Atomic design ofrece una forma práctica de hacerlo. Esta metodología divide la interfaz en componentes pequeños y reutilizables que pueden combinarse para construir secciones y páginas completas. Así, el diseño se mantiene ordenado y puede evolucionar con mayor facilidad.
Qué es atomic design
Atomic design es una metodología aplicada al diseño UX/UI que permite construir interfaces digitales a partir de componentes pequeños, reutilizables y organizados de forma jerárquica. En lugar de diseñar cada pantalla desde cero, propone crear un sistema de elementos que puedan combinarse para formar páginas, aplicaciones y productos digitales.
La metodología fue desarrollada por el diseñador Brad Frost y divide las interfaces en cinco niveles: átomos, moléculas, organismos, plantillas y páginas. Estos niveles permiten entender una interfaz como un conjunto y al mismo tiempo, como una suma de piezas relacionadas.
Atomic design no es un proceso lineal. No es necesario terminar todos los botones antes de empezar a diseñar una pantalla. Se trata de un modelo mental que permite moverse continuamente entre los componentes y el resultado final.
Para qué sirve atomic design
Atomic design ayuda a mantener la coherencia cuando una web o aplicación empieza a crecer. Sin una estructura común, es fácil terminar con botones distintos, formularios duplicados o componentes que realizan la misma función de maneras diferentes.
Esta metodología permite:
- Reutilizar componentes en distintas pantallas.
- Mantener una identidad visual coherente.
- Diseñar nuevas funcionalidades con mayor rapidez.
- Reducir diferencias entre diseño y desarrollo.
- Documentar las decisiones de interfaz.
- Facilitar el mantenimiento del producto.
También ayuda a mantener un diseño de interacción coherente, ya que permite definir cómo deben comportarse los componentes cuando una persona utiliza la interfaz.
Atomic design se centra principalmente en la organización de la interfaz. No sustituye la investigación, las pruebas de usabilidad ni el conocimiento de las personas que utilizarán el producto.
Los cinco niveles de atomic design
Átomos: los elementos básicos
Los átomos son las piezas más pequeñas de una interfaz. No pueden dividirse en otros elementos funcionales sin perder su sentido.
Algunos ejemplos son:
- Botones.
- Iconos.
- Enlaces.
- Etiquetas.
- Campos de texto.
- Títulos.
- Imágenes.
- Casillas de verificación.
Un botón necesita un tamaño, un color, una tipografía y unos estados concretos. También debe mostrar qué ocurre cuando el usuario pasa el cursor, utiliza el teclado o no puede realizar la acción.
Los colores, tamaños, tipografías y espaciados suelen organizarse como fundamentos o design tokens. Algunas empresas los consideran átomos y otras los mantienen en una categoría independiente. Ambas estructuras son válidas si resultan claras para el equipo.
Moléculas: combinaciones con una función
Las moléculas se forman al combinar varios átomos para realizar una función sencilla.
Un buscador, por ejemplo, puede estar compuesto por:
- Una etiqueta.
- Un campo de texto.
- Un icono.
- Un botón.
Por separado, cada elemento tiene una utilidad limitada. Juntos forman un componente reconocible que puede utilizarse en una cabecera, un catálogo o una página de resultados.
Organismos: secciones completas
Los organismos son componentes más complejos formados por átomos y moléculas. Representan secciones completas de una interfaz.
Una cabecera puede incluir el logotipo, el menú de navegación, el buscador y el acceso al área personal. Cada parte funciona por separado, pero la combinación forma un organismo que puede repetirse en diferentes páginas.
Otros ejemplos serían:
- Un formulario de registro.
- Una cuadrícula de productos.
- Una tabla de datos.
- Un menú lateral.
- Un bloque de testimonios.
Es en este nivel donde los componentes empiezan a mostrar su comportamiento dentro de un contexto más real.
Plantillas: la estructura de la pantalla
Las plantillas organizan los organismos dentro de una distribución general. Funcionan como el esqueleto de una pantalla y todavía no necesitan contener el texto o las imágenes definitivas.
La plantilla de una ficha de producto podría establecer la posición de la galería, el nombre, el precio, la descripción y el botón de compra.
También ayuda a anticipar situaciones menos cómodas: títulos demasiado largos, ausencia de imágenes, descripciones extensas o contenidos que cambian según el usuario.
Páginas: la interfaz con contenido real
Las páginas son versiones concretas de las plantillas. Incluyen los textos, imágenes, datos y estados que encontrará el usuario.
Por eso conviene probar las páginas con:
- Contenidos cortos y extensos.
- Listas vacías.
- Mensajes de error.
- Datos incompletos.
- Diferentes idiomas.
- Estados de carga.
- Distintos tamaños de pantalla.
Probar todas estas situaciones permite detectar problemas relacionados con la experiencia y usabilidad del usuario antes de que el producto llegue a su versión definitiva.
Ejemplo práctico de atomic design
Imaginemos el panel de una plataforma de formación. La pantalla muestra los cursos de un estudiante, su progreso y las próximas clases.
La estructura podría organizarse así:
- Átomos: botones, iconos, títulos y barras de progreso.
- Moléculas: buscador de cursos, selector de filtros y tarjeta de progreso.
- Organismos: menú lateral, cabecera y listado de cursos.
- Plantilla: distribución general del panel.
- Página: panel de un estudiante concreto con sus cursos y porcentajes reales.
Si se crea una pantalla de certificados, el equipo podrá reutilizar la cabecera, el menú, los botones y parte de la estructura. Solo tendrá que diseñar los componentes específicos de la nueva funcionalidad.
Cómo aplicar atomic design paso a paso
1. Revisa lo que ya existe
Si el producto ya está en funcionamiento, comienza con un inventario visual. Reúne botones, formularios, tarjetas, menús y otros patrones que se repitan.
2. Parte de una pantalla real
No conviene diseñar todos los átomos de manera aislada. Es mejor comenzar con un flujo concreto, como un registro, una compra o una búsqueda. A partir de esa pantalla se identifican los componentes necesarios y se comprueba su comportamiento dentro de un contexto.
3. Define los fundamentos
Establece las reglas básicas de color, tipografía, espaciado, bordes e iconografía. También es importante definir desde el principio los criterios de accesibilidad.
4. Crea componentes y variantes
Convierte los patrones frecuentes en componentes reutilizables. Cada uno debe incluir los estados que realmente necesite.
Un botón puede tener versiones principal, secundaria y de peligro, además de estados de foco, carga y desactivado. No es necesario crear una variante para cada pequeño cambio visual.
5. Prueba con contenido representativo
Utiliza textos, imágenes y datos parecidos a los definitivos. Esto permite detectar problemas que no aparecen con contenido de relleno.
Atomic design organiza la interfaz, pero no confirma que sea fácil de usar. Es recomendable combinarlo con UX Research y pruebas con usuarios.
6. Documenta las decisiones
Cada componente debería explicar para qué sirve, cuándo debe utilizarse, qué variantes tiene y cómo se comporta.
La documentación evita que cada persona interprete el sistema de una manera distinta y facilita la colaboración entre diseño, producto y desarrollo.
Aunque no es imprescindible dominar la programación para UX/UI, entender cómo se implementan los componentes ayuda a diseñar soluciones más realistas y facilita el trabajo con el equipo de desarrollo.
Aprende a diseñar productos digitales con criterio
Aprende a investigar, diseñar, prototipar y validar experiencias digitales incorporando sistemas de diseño y herramientas de inteligencia artificial.
Preguntas frecuentes sobre atomic design
¿Quién creó atomic design?
Atomic design fue desarrollado por Brad Frost como una metodología para crear sistemas de interfaces modulares y reutilizables.
¿Atomic design es un design system?
No. Atomic design organiza los componentes mediante una jerarquía. Un design system también incluye principios, documentación, patrones, procesos y responsables de mantenimiento.
¿Se puede aplicar atomic design en Figma?
Sí, elegir Figma permite organizar átomos, moléculas y organismos mediante componentes, variantes, variables y bibliotecas compartidas.
¿Sustituye al uso habitual de ChatGPT?
No es imprescindible para diseñar con atomic design. No obstante, comprender cómo se implementan los componentes ayuda a crear sistemas más realistas y mejora la colaboración con desarrollo.
