Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de React.js

Curso Práctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

¿Qué es Atomic Design?

12/29
Recursos

Aportes 14

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿Qué es atomic design?

Piensa en una aplicación. Identifica cada parte, navega por ella, cambia de sección. Te das cuenta? muchos componentes son muy parecidos. Conoce a atomic design, una metodología encargada en interfaces.

Átomos

Ahora necesito que recuerdes las clases de química. Sabrás que todo en el universo está compuesto por átomos. Este es nuestro primer nivel de abstracción. Cuando diseñes un UI, mira los botones, textos, imágenes o entradas de texto. Son las partes más fundamentales y pequeñas que usamos.

La imágen de arriba te ayudará a identificar que cosas pueden tomarse como átomos en tu próxima aplicación.

Moléculas

Las moléculas son una unión de átomos. Todas estas moléculas, normalmente tienen una función específica para la cuál necesitan varios átomos. Por ejemplo, la glucosa C6H12O6, es la energía en carbohidratos del humanos. Ahora, pasemos al diseño. En interfaces, una parte como un comentario de twitter, una sección de youtube de ME GUSTA y NO ME GUSTA, o el menú en los videos de platzi para avanzar o retroceder en la clase, son todos moléculas. Estas estás compuestas de algunos componentes más pequeños (como por ejemplo, de botón y cuadro de texto). Este es nuestro segundo nivel. Crear moléculas es simple, y recuerda que deberán tener una función única en nuestra UI

Organismos

Los organismos, ya son un nivel mucho más complejo. Los organismo están compuesto de muchas moléculas. Pero lo más interesante, es que tienen vida propia, y pueden interactuar en una manera muy amplia con otros organismos. Imagina una abeja con una flor, ambos colaboran de una u otra manera a que el otro esté bien. En nuestro diseño, imagina al header. El header está compuesto de muchos elementos, y tienen un impacto muy grande en la app. O incluso, de una sección como una tienda de ropa en la paǵina web. Seguramente te das cuenta, que estos tienen muchos artículos, y todos constan de una imaǵen, precio, y un ordenamiento. Puedes verlo así:

Átomo⇒ imágen, precio, descripción

Molécula ⇒ el cuadro que contiene a la imágen, al precio y a la descripción.

Organismo ⇒ todos los cuadros ordenados en forma de tabla.

El organismo si te das cuenta, puede usar moléculas del mismo tipo o diferentes. El punto clave, es que no trates de abarcar tanto, y que pertenecen a una sección claramente definida en nuestra app.

Templates

Los templates son prácticamente lo que vimos de Layouts. Es un poco más fácil de comprender. Es la plantilla en la cual siempre organizarás los organismos. Es decir, el esqueleto que indica donde irá por ejemplo, el Header, el footer, grid y sección de comentarios.

Pages

Finalmente tenemos a la constitución de nuestra app. Las pages son en sí, toda la página funcionando con contenido interactúando entre ellas.

Una recomendación. No pienses en forma secuencial el atomic design. Es decir, no pienses ⇒ primero hago los átomos, después hago las moléculas, tercero los organismos… Según el mismo autor de atomic design, dependerá mucho de tu aplicación y de las necesidades que hay que cubrir. Más bien, es una manera mental de interpretar la UI

No atribuyas atomic design como algo único de React o del desarrollo web ⇒ es un método de desarrollo de UI que se puede usar en cualquier interfaz.

Te recomiendo profundamente leer el siguiente link, del cual usé toda la referencia. Además, es del autor del Atomic Design.

Atomic Design Methodology | Atomic Design by Brad Frost

🟡Atom
🟢Molecules
🔵Organisms
🔴Templates
Creo que se hace asi 😅

Resumen de la clase:
Átomos:

  • Representación de pequeños elementos o unidades
  • Botón, texto, imagen, etc.

Molécula

  • Es la uniónde átomos .
  • Texto + imagen, etc.

Organismo

  • Es la unión de moléculas
  • Un header: logo + nav + buscador

Templates:

  • Es la unión de organismos de forma estructurada formando una sección
  • Home, about, etc.

Page:

  • Es la combinación del template, API e interacciones del usuario.

si ponen la velocidad a 0.5x , oscar esta bien borracho, dando clases xD

Pienso que puede ser algo asi…

El diseño atómico, consiste en mirar todo de una manera clasificada, partiendo de lo más simple hasta llegar a estructuras complejas cuyos elemetos se relacionan entres sí.

Lo más simple es el átomo, se considera esos elementos individuales e independientes, por ejemplo: una imagen, un texto, una figura, etc.

Luego, las moléculas, que son el conjunto de átomos que forman algo con sentido, por ejemplo, un avatar, que puede ser la unión de una figura y una imagen para darle la forma de una avatar circular.

Luego los organismos, que son la unión de moléculas, por ejemplo una barra de navegación, donde estará quizá la molécula avatar acompañadas de otras moléculas como un botón, etc.

Luego los templates, son la unión de varios organismos, pueden ser por ejemplo el header, conteniendo la barra de navegación (organismo), una barra de menú (otro organismo), etc.

Finalmente, las pages, que son la unión de templates que forman el total de lo que se presenta al usuarioy conjugan todo lo creado con un sentido y funcionamiento establecido.

Lo importante del diseño atómico, es que permite realizar actualizaciones de manera fácil, porque uno se puede modificar por ejemplo un átomo, y esto se replica en los demás niveles.

Super, con esto del diseño atomico, todo tiene sentido.

Esto me recuerda a “todo es una caja” o “Everything is a box”, es una buena forma de mirar un proyecto, descomponerlo en cajas y empezar a armarlo caja por caja

Estoy escribiendo esto en una caja, ahora voy a darle click a la caja de publicar

No se si este bien, cómo siempre se reciben comentarios con mucho amor jaja.


Atomic design es una forma de identificar los elementos de un sistema para poder construirla de una forma eficaz.

Atomos:
tenemos que tener en cuenta que todo el unirverso está compuesta de atomos. En atomic design el primer nivel de abstraccion de UI son todas las partes mas pequeñas como botones, textos, labels, imagenes etc.

Molécula:
Las moleculas son la union de atomos que cumplen una tarea particular o dan algun sentido al sistema. Por ejemplo los botones de “like” “dislike” de youtube.

Organismos:
Los organismos se los considera un nivel mas complejo, estan compuestos por muchos moléculas, pero lo mas interesante es que tienen vida propia y pueden interactuar con otros organismos. Por ejemplo el header esta compuesto por muchos elementos y tiene un impacto muy grande en nuestra app

Templates:
Los template son los Layouts, es el esqueleto de la pagina

Pages:
Las pages son en si todo el conjunto de objetos mensionados anteriormente que conforman el sistema total

Les dejo el blog donde el propio creador explica lo que es Atomic Design
atomic design