Clase 6 – Atomic Design

Es una metodología que permite organizar en pequeños componentes una interfaz. Estos se van integrando uno a uno para lograr armar elementos mas grandes y complejos, ya sean «moléculas», «organismos», templates, hasta páginas completas. El elemento mas pequeño se denomina «Átomo», estos pueden ser:

  • Íconos
  • Etiquetas
  • Botones
  • Inputs
  • Textos

Atomic Design es un método que está en la intersección entre diseño y desarrollo: Los diseñadores utilizan guías de estilos y los desarrolladores, frameworks como Bootstrap o Tailwind. Atomic Design unifica ambas.

Al diseñar los componentes en forma aislada, estos se codifican de la misma forma, por lo que los desarrolladores también ahorran tiempo en la creación de código y traspasan la consistencia del diseño al producto final.

Se trabaja inicialmente con un workshop y a partir de él se genera la librería de componentes que debe tener el diseño y las consideraciones técnicas implicadas.

Conclusión

Gracias a esta metodología se facilita la creación de la guía de estilo y permite hacer más rápido los prototipos, ya que los elementos ya existirán, hace más rápido el proceso de actualizar el diseño del producto y/o añadir nuevas funcionalidades, ya que los cambios no harán que se deba programar todo desde cero.

Enlaces relacionados

https://www.uifrommars.com/atomic-design-ventajas/