0Pricing
Frontend Academy · Lección

Atomic Design: átomos, moléculas y organismos

Clasifique los componentes en átomos, moléculas, organismos, plantillas y páginas para crear un vocabulario común entre diseño e ingeniería.

Atomic Design: átomos, moléculas y organismos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es Atomic Design?

Atomic Design (Brad Frost, 2013) es un modelo mental para organizar los componentes de UI en cinco niveles de complejidad: átomos, moléculas, organismos, plantillas y páginas. Proporciona un vocabulario compartido para diseñadores e ingenieros.

Átomos: los bloques de construcción más pequeños

Componentes de propósito único que no pueden dividirse más. Botones, campos de entrada, iconos, etiquetas y muestras de color. Son abstractos y reutilizables en cualquier contexto.

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

Moléculas: grupos simples de componentes

Combine átomos para realizar una tarea útil. Un SearchBar es un Input + Button + Icon. Un FormField es un Label + Input + ErrorMessage. Siguen siendo componentes de propósito general.

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

Organismos: secciones complejas

Composiciones más grandes que forman secciones diferenciadas de una interfaz: un Header (logo + navegación + barra de búsqueda + menú de usuario), un ProductCard (imagen + título + precio + botón) o un SignupForm. Tienen más contexto.

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

Plantillas: esqueletos de página

Diseños de nivel wireframe que organizan organismos sin contenido real. Un BlogTemplate tiene un Header, un Main con espacios para Article y un Sidebar.

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

Páginas: contenido real

Plantillas con contenido real. La página /blog/[slug] renderiza BlogTemplate con la publicación real, widgets de la barra lateral y elementos de interfaz.

Estructura de carpetas

Muchos equipos organizan los componentes por nivel.

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

Ventajas

Vocabulario compartido entre diseñadores y desarrolladores. Fomenta la composición en lugar de la duplicación. Facilita la creación de sistemas de diseño. Promueve pensar primero en la unidad reutilizable más pequeña.

Crítica: la categorización estricta es difícil

En la práctica, la línea entre molécula y organismo es difusa. Muchos equipos terminan discutiendo dónde encaja cada elemento, lo que frustra el objetivo de aportar claridad.

Alternativa moderna: basada en funcionalidades

Muchas bases de código grandes de React/Vue prefieren organizarse por funcionalidad (auth/, checkout/, dashboard/) en lugar de seguir niveles atómicos estrictos. Atomic Design sigue funcionando para la capa compartida del sistema de diseño.

Atomic Design en Storybook

Storybook se adapta bien a Atomic Design: las categorías de nivel superior Atoms, Molecules y Organisms facilitan explorar la biblioteca de componentes.

Cuándo usar Atomic Design

Es más adecuado para: bibliotecas de sistemas de diseño compartidas entre varias aplicaciones, equipos grandes que necesitan un modelo mental común y proyectos con una participación activa de diseñadores. Evítelo en: aplicaciones pequeñas, prototipos y SPA centradas en funcionalidades, donde la colocación conjunta es más importante.

Comprobación rápida

En Atomic Design, ¿qué tipo de componente es un SearchBar creado a partir de un Input + Button + Icon?

Resumen: Atomic Design

Cinco niveles: átomos (Button, Input, Icon), moléculas (SearchBar, FormField), organismos (Header, ProductCard), plantillas (diseños) y páginas (contenido real). Vocabulario compartido y pensamiento centrado en la composición. La estructura de carpetas refleja las capas. Es ideal para sistemas de diseño compartidos; para el código de la aplicación, las carpetas basadas en funcionalidades suelen ser mejores que las atómicas.

Preguntas frecuentes

¿La lección «Atomic Design: átomos, moléculas y organismos» es gratis?

Sí — el texto completo de «Atomic Design: átomos, moléculas y organismos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Atomic Design: átomos, moléculas y organismos»?

Clasifique los componentes en átomos, moléculas, organismos, plantillas y páginas para crear un vocabulario común entre diseño e ingeniería. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Atomic Design: átomos, moléculas y organismos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Atomic Design: átomos, moléculas y organismos
  2. Configuración de un monorepo con Turborepo
  3. Microfrontends: Module Federation
  4. Estructura de carpetas basada en funcionalidades
← Volver a Frontend Academy