Atomic Design: una metodología para trabajar en equipo

Atomic Design: una metodología para trabajar en equipo

Diseñar y desarrollar productos de manera rápida y eficiente es una gran ventaja competitiva para cualquier empresa. Pero ¿cómo lograr este ideal cuando se trabaja con diferentes clientes y en diferentes industrias? Atomic Design podría ser la solución para este dilema.

Es probable que como desarrollador FrontEnd hayas escuchado este término al menos alguna vez. En caso contrario, no temas, ya que en este artículo cubriremos las nociones básicas para que puedas aprender a utilizarlo y aplicarlo en tu trabajo.

En términos simples, Atomic Design es una metodología creada por Brad Frost la cual se presenta como solución para el problema actual de crear interfaces que sean compatibles con la gran variedad de tamaños de pantallas que existen.

Gracias a su perspectiva con componentes individuales, pero que son parte de un todo, nos permite entender la importancia de construir sistemas de diseño. De esta forma, nos ayuda a crear productos digitales más fáciles de entender, tanto para nuestros usuarios como para del equipo de FrontEnd que debe llevarlo a la práctica.

Esquema de Atomic Design: átomo, molécula, organismos, templates y páginas

Atomic Design: Simbología y equivalencias

El origen de su nombre se debe a que los distintos componentes de un diseño particular son homologados con elementos de la química. En base a esto, es posible identificar lo siguiente:

  • Átomo: Se corresponden con los elementos indivisibles de HTML. Por ejemplo: Input, Label, Botón, etc.
  • Molécula: En la química, se trata de la unión de dos átomos. Por lo tanto, en el plano del diseño, serán dos elementos “átomos” que se unen. Por ejemplo: una barra de búsqueda que contiene un Input, un Label y un botón.
  • Organismos: Es la unión de diferentes “moléculas”, por lo tanto implicará la conjugación de distintas moléculas de nuestro diseño. A su vez, éstas contienen los elementos “átomos”. Por ejemplo: un nabab que contiene una molécula menú, una molécula barra de búsqueda, una molécula sesión, etc.

Los últimos dos elementos, si bien sus nombres no se basan en la química, son términos bastante conocidos por los desarrolladores:

  • Templates: Es donde se colocan los organismos y se articulan. De esta forma, es posible ver en perspectiva la integración entre los componentes de una manera abstracta, ya que los templates no tienen datos.
  • Pages (Páginas): Es la parte final de esta metodología, donde se le agregan datos a los templates y se puede ver una representación real de la interacción de los organismos.

Este último elemento es muy importante, ya que permite realizar pruebas a los elementos creados. Sobre este punto, es importante hacerse las siguientes preguntas para asegurarnos de considerar la perspectiva de los usuarios:

¿Cómo se verá si un usuario no tiene datos almacenados?
¿Qué pasará si el usuario no tiene una foto de perfil?
Cómo se comportan las moléculas en diferentes tamaños de pantallas (smartphone, tablets, smartTV, consolas de videojuegos, etc.)

En esta fase de pruebas es donde podemos apreciar claramente las ventajas de trabajar con Atomic Design. Gracias a que los cambios se realizan directamente en los átomos y estos afectan en cadena las moléculas, los componentes, templates y páginas, el flujo de trabajo se facilita tremendamente.

Durante mi propia experiencia utilizando Atomic Design, he podido darme cuenta de que varias personas creen que se debe usar de manera secuencial, es decir, crear primero el átomo, luego la molécula y así sucesivamente. Sin embargo, se llega a mejores resultados y mejores tiempos de desarrollo cuando se trabajan en conjunto los 5 elementos. De hecho, Frost recomienda utilizarlos de manera paralela. Otra de sus ventajas es que esta metodología se acopla muy bien en equipos compuestos por diseñadores y FrontEnd.

Esto se debe a que la aplicación de este método de trabajo permite a los componentes de diseño entregar mockups. Más tarde, en conjunto con el equipo FrontEnd, es posible analizar e identificar los elementos presentes, permitiendo su validación en diferentes resoluciones junto con diferentes contenidos. En conclusión y, en base a mi propia experiencia, te puedo asegurar que la adopción de Atomic Design es especialmente práctica cuando ya existen guías de estilos (paleta de colores, fuentes, iconos, etc.) en la organización.

Como toda metodología, su efectividad va a depender del entorno laboral e incluso el tipo de proyecto en el que te encuentres trabajando. Por eso, te recomiendo analizar las condiciones y mecánicas de trabajo actuales de tu empresa. De esta forma, podrás evaluar la compatibilidad y pertinencia de esta propuesta, permitiéndote determinar si Atomic Design es un buen match para tu equipo.