No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Ventajas de Atomic Design

9/26
Recursos

¿Por qué es importante usar el diseño de sistemas en proyectos digitales?

El diseño de sistemas es fundamental en la creación de proyectos digitales eficientes y escalables. Adoptar esta práctica moderna y generalizada de construir interfaces y mantener sistemas de diseño tiene numerosas ventajas. No solo estableces una base sólida para tu producto, sino que también facilita la adición de nuevas funcionalidades conforme tu producto madura. Además, contar con un sistema de diseño en marcha asegura que todos en el equipo hablen el mismo "lenguaje", optimizando la comunicación entre diseñadores, desarrolladores y otras áreas involucradas.

Un sistema de diseño robusto permite una comunicación clara y efectiva. Cuando un diseñador solicita a un desarrollador implementar un filtro o un botón, existe una comprensión mutua de cómo debe verse y funcionar. Esto también es fácilmente comprensible para personas fuera del área de diseño, como los equipos de producto o de negocio. La estandarización del lenguaje se traduce en sesiones colaborativas más fluidas y permite un desarrollo más rápido y consistente del producto.

¿Cómo se aplica el concepto de Atomic Design en la práctica?

El Atomic Design es un enfoque práctico que ayuda a estructurar y organizar los componentes de diseño en un sistema. Se basa en identificar y comprender elementos básicos y cómo estos se combinan para formar estructuras más complejas. Comienza con los átomos, que son las partes más pequeñas y fundamentales, y avanza hacia moléculas y organismos, que son combinaciones de estos átomos.

  • Átomos: Unidades básicas que no se pueden dividir, como un icono o un logotipo.
  • Moléculas: Combinaciones de átomos que crean componentes simples como un campo de búsqueda con un botón.
  • Organismos: Unidades más complejas formadas por múltiples moléculas, como un encabezado completo con logo, menú de navegación y campo de búsqueda.

Por medio de esta metodología, se busca identificar los patrones recurrentes para establecer estructuras modulares y reutilizables en el diseño.

¿Cuál es el desafío de crear un inventario de componentes?

El reto de crear un inventario de componentes es central en el Atomic Design, ya que permite controlar y entender cada elemento del sistema. Este proceso meticuloso implica listar cada uno de los componentes identificados presentando la nomenclatura adecuada. Esto conlleva un trabajo minucioso pero esencial para garantizar que el sistema sea fácil de manejar y escalar a lo largo del tiempo.

  1. Identificación: Enumerar componentes como átomos, moléculas, y organismos.
  2. Documentación: Trasladar estos elementos a un documento estructurado para control y referencia futura.
  3. Nomenclatura: Asignar nombres claros y consistentes a cada componente para facilitar la comunicación.

Esto permite que los equipos de desarrollo y diseño trabajen de manera más ágil y coordinada, evitando duplicaciones y asegurando la consistencia visual y funcional del producto. Al manejar este inventario, se facilita la creación futura de prototipos y wireframes de mediana y alta fidelidad, otorgando una eficiencia sin igual al proceso de desarrollo.

Aportes 20

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Este ejercicio me ayudó mucho a identificar, es práctico para divisar los elementos que se repiten y su forma para poder organizar el sistema de diseño.

Ventajas de Atomic Design:

  • Práctica generalizada y más común de construir interfaces y mantener un sistema de diseño.
  • Es la manera de construir un sistema de diseño.
  • Fácil de comunicar con personas no-diseñadoras.
  • Es una forma más sencilla de aterrizar una idea
  • Diseños consistentes y escalables

Ventajas de Atomic Design (una forma de contruir el Design System)

  1. Es la práctica más común para crear el prototipo y que se mantenga a largo plazo.
  2. Fundamentos de los Design Systems, es más fácil el trabajo con el equipo.
  3. Fácil de explicarlo con los no-diseñadores.

¿Para el inventario de componentes no deberíamos hacerlo pensando en código? Es decir, ponerle los nombres que van a ser utilizados en desarrollo para que todos hablemos el mismo lenguaje.

¿El footer podría considerarse como “template”?

Por cierto chicos, en Figma se pueden crear elementos para replicarlos rápidamente

Mi aporte

Cuando empecé a hacer este ejercicio me puse a pensar que anteriormente solo diseñaba con creatividad y buscando patrones pero ahora entiendo que todo es parte de un sistema y que en el fondo tener uno nos va a facilitar el trabajo de seguir diseñando nuevas interfaces en el futuro. A seguir practicando.

sinceramente el curso es demasiado interesante, pero como profesor creo que el profesor queda mucho a deber, no le entiendo a la manera en como baja la información a los formatos

Mis apuntes


Dupliqué el formato del listado de componentes y está quedando de esta forma:

Nunca había hecho un documento de este tipo pero es interesante analizar cada componente desde su forma más básica.

Las primeras paginas del prototipo, identifique los atomos, moléculas y organismos con colores y su inicial. Hecho en invision app

¿Alguien sabe qué comando dbo usar para “clonar” un elemento en Invision? Como hace el profe al seleccionar una imagen y la arrastra y la está duplicando. Intento usar los comandos de Adobe, como Alt + arrastrar, pero no me funcionan 😦

acá remito el ejercicio de identificación de los componentes (átomos, moléculas, organismos..) ![](https://static.platzi.com/media/user_upload/exported-freehand.png-48fa6c51-d99d-4b56-a411-3d2cca5e47f4.jpg) ![](https://static.platzi.com/media/user_upload/inventario%20de%20componentes-7e6b3b49-e443-4224-9e13-e3ecea82e30c.jpg)

💥 Spoiler del reto: Los componentes son cientos, puede que miles dependiendo que tan larga sea la web y que tanta información contienen. 👋

Atomic Design es la metodología de diseño más demandada por reclutadores. 💪