En los viejos tiempos, construíamos “Páginas”. home.html, about.html, contacto.html. Si querías cambiar el color del botón, tenías que editar 50 archivos. Hoy construimos Sistemas. Brad Frost acuñó el término Diseño Atómico. Enmarca la interfaz de usuario como una jerarquía biológica. Se alinea perfectamente con la Arquitectura basada en componentes (React, Vue, Svelte). Si no usa esto, su código base probablemente sea un caos de estilos inconsistentes. Estás copiando clases CSS en lugar de importar componentes.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

Por qué Maison Code impone el diseño atómico

No construimos “sitios web”. Construimos “Productos”. Los productos viven durante 5 años. Sin un Sistema de Diseño, un producto se pudre. Atomic Design es la vacuna contra “UI Rot”. Obliga a los desarrolladores a pensar en “Patrones”, no en “Páginas”. Nos permite escalar el equipo. Diez desarrolladores pueden trabajar en la misma aplicación sin pisarse unos a otros.

1. La Jerarquía

Átomos

Los bloques de construcción más pequeños. No pueden descomponerse más sin dejar de funcionar.

Ejemplos: <Botón>, <Entrada>, <Etiqueta>, <Icono>, <ColorSwatch>.

Código:

Botón const = ({ variante, niños }) => {
  devolver <button className={`btn-${variant}`}>{niños}</button>
}

Los átomos tienen estilos globales pero cero lógica de aplicación.

Moléculas

Grupos de átomos unidos entre sí para funcionar como una unidad.

Ejemplo: <Formulario de búsqueda> (Entrada + Botón).
Ejemplo: <ProductCard> (Imagen + Título + Precio + Botón).
Filosofía: Haz una cosa bien. Una molécula puede tener un estado de interfaz de usuario local (“isOpen”), pero rara vez una lógica empresarial.

Organismos

Grupos de moléculas se unieron para formar una sección distinta de una interfaz.

Ejemplo: <Encabezado> (Logotipo + Navegación + Formulario de búsqueda + Icono del carrito).
Ejemplo: <ProductGrid> (Lista de ProductCards).
Estado: Los organismos a menudo controlan el “Estado local” o hablan con la API. Son los componentes “inteligentes”.

Plantillas

Objetos a nivel de página que colocan componentes en un diseño.

Ejemplo: <MainLayout> (Encabezado + Barra lateral + Contenido + Pie de página).
Contexto: Definen la grilla, pero no el contenido. Ellos manejan la capacidad de respuesta.

páginas

Instancias específicas de plantillas con contenido real.

Ejemplo: Página de inicio, Página de detalles del producto. Las páginas conectan el enrutador a la tienda (Redux/Zustand) y pasan datos a los organismos.

2. Por qué esto es importante para la calidad del código

Reutilizabilidad

Si construyes un buen átomo <Button>, lo usarás 1000 veces. Si corrige un error en el Botón (por ejemplo, agregar un control giratorio de carga), lo corrige en 1000 lugares al instante. Esto es Apalancamiento.

Consistencia

(Consulte Consistencia de marca). Los desarrolladores no tienen que adivinar “¿Qué relleno necesita este botón?”. Simplemente importan <Botón>. El Sistema de Diseño hace cumplir las reglas de la marca. No hay “píxeles rebeldes”.

Desacoplamiento de lógica y vista

Átomos/Moléculas: Componentes “tontos”. Toman accesorios (título, imagen) y representan la interfaz de usuario. No saben nada sobre tu API.
Organismos/Páginas: Contenedores “inteligentes”. Obtienen datos (useQuery) y los transmiten. Esto facilita las pruebas. Puedes probar la interfaz de usuario a través de Storybook sin burlarte de la API.

3. Implementación: estructura de directorios

No arrojes todo en /components. Organizar por lógica:

src/
  componentes/
    ui/ # Átomos (botón, entrada) - La "base"
    bloques/# Moléculas (ProductCard, Hero)
    secciones/# Organismos (Encabezado, Pie de página)
    diseños/# Plantillas
  páginas/# Rutas

Esta estructura le dice al nuevo desarrollador exactamente dónde buscar.

4. Tokens de diseño: el ADN

Los átomos necesitan valores. Colores, Espaciado, Tipografía. Estas son Fichas de diseño. Guárdelos en un archivo de configuración (Tailwind Config o Variables CSS).

:raíz {
  --color-primario: #FF5733;
  --espaciado-md: 16px;
}

Ahora, su componente React usa var(--spacing-md), no 16px. ¿Si desea cambiar el nombre del sitio? Cambie un archivo. Todo el sitio se actualiza. Los tokens son el contrato entre Diseño e Ingeniería.

5. El flujo de trabajo del libro de cuentos

No puedes construir átomos dentro de una página. Hay demasiado ruido. Necesitas un “laboratorio”. Storybook es ese laboratorio. El <Botón> se construye de forma aislada. Pruebas todos sus estados: “hover”, “disabled”, “loading”, “error”. Te aseguras de que sea accesible. Sólo cuando está perfecto lo metes en la App. Desarrollo impulsado: primero cree la interfaz de usuario en Storybook. Conéctelo a los datos en segundo lugar.

6. El modelo de gobernanza (¿A quién pertenecen los átomos?)

¿Quién puede cambiar el <Botón>? Si todos lo cambian, se rompe. El equipo del sistema de diseño. En organizaciones grandes, ingenieros específicos poseen la “Biblioteca de UI”. Los ingenieros de producto consumen la biblioteca. Si un ingeniero de producto necesita una nueva variante de botón, realiza un PR a la biblioteca. Se revisa su coherencia y accesibilidad. Esto evita la “desviación de componentes”.

6. El problema del organismo (¿Dónde pongo esto?)

La parte más difícil de Atomic Design es el área gris. “¿Es esto una molécula o un organismo?” Regla del código de casa:

Si tiene lógica de negocios (llamadas API, conexión redux), es un Organismo.
Si es puramente presentacional (entran accesorios, sale UI), es una Molécula.
Si contiene un Organismo, debe ser una Plantilla o una Página. (Los organismos no deben contener otros organismos para evitar el “infierno de perforación de accesorios”).

7. Prueba de regresión visual (cromática)

El diseño atómico funciona mejor con las pruebas visuales. Como tienes una biblioteca de átomos, debes asegurarte de que no se rompan. Usamos Chromatic (de Storybook).

CI/CD crea Storybook.
Chromatic toma capturas de pantalla de cada componente.
Compara píxel por píxel con la rama “principal”.
Si un píxel cambió, la compilación falla. Esto le da la confianza para refactorizar CSS. “Cambié el relleno global. ¿Rompí el botón de pago?” Cromático te lo dirá.

8. El sitio de documentación (altura cero)

Storybook es para desarrolladores. Los diseñadores necesitan Altura cero. Se sincroniza con Figma y Storybook. Muestra:

El Diseño (Figma).
El Código (Reaccionar).
Lo que se debe y no se debe hacer (pautas de uso). Esta es la Fuente Única de la Verdad. Sin esto, los desarrolladores y diseñadores se distancian.

9. Componentes compuestos (Reacción avanzada)

¿Cómo se construyen moléculas complejas como un “menú desplegable”? Pasar 50 accesorios (isOpen, onClose, item1, item2) es feo. Utilice el Patrón de componentes compuestos.

<Desplegable>
  <Dropdown.Trigger>Abrir</Dropdown.Trigger>
  <Menú.desplegable>
    <Dropdown.Item>Editar</Dropdown.Item>
    <Dropdown.Item>Eliminar</Dropdown.Item>
  </Dropdown.Menu>
</Desplegable>

El padre <Dropdown> contiene el estado (Contexto). Los Niños leen el estado. Esto mantiene tus átomos limpios y componibles.

10. Accesorios de estilo frente a accesorios de tema (diseño API)

¿Deberías permitir style={{ marginTop: 10 }} en tus Atoms? No. Si permite estilos arbitrarios, los desarrolladores utilizarán valores arbitrarios. “Necesito 13px aquí”. Estrategia: Restringir los accesorios al tema. <Margen de cuadro="md" color="primario" /> Esto obliga a los desarrolladores a ceñirse a los tokens de diseño. Elimina la “escotilla de escape”. La restricción genera coherencia.

11. Diseñar tokens en Tailwind (estrategia de configuración)

Tailwind es Atomic CSS, pero necesita Atomic Design. No utilice valores arbitrarios (w-[123px]). Configure sus tokens en tailwind.config.js.

tema: {
  colores: {
    primario: "var(--color-primary)", // Se asigna a la variable CSS
  },
  espaciado: {
    md: "var(--espaciado-md)",
  }
}

Ahora, los desarrolladores deben usar bg-primary y p-md. Físicamente no pueden usar colores fuera de marca si se apegan a la configuración. Esto es “Ingeniería de barandillas”.

12. Conclusión

El Diseño Atómico no es sólo para Diseñadores. Es el modelo mental para la ingeniería frontend moderna. Convierte el Caos en Orden. Convierte “Páginas” en “sistemas”. Le permite realizar envíos más rápido, con mayor calidad y menos miedo. Empiece a pensar en átomos.

¿Código de espagueti?

Refactorizamos bases de código heredadas en arquitecturas atómicas escalables utilizando React y Tailwind.

Arquitectar mi interfaz de usuario. Contrate a nuestros arquitectos.