Sistemas de diseño con Atomic design y sketch
Controla y escala tus productos de manera inteligente
Antes de empezar, les comparto una actualización de este post 🔥👇
El tiempo ⏰ es una de las variables más sensibles en el proceso de ideación, creación y lanzamiento de un producto digital. Por lo mismo, encontrar una manera de reducir o usar mejor estas horas o semanas de trabajo, es vital para lograr una mayor recepción e impacto.
“From the start we wanted to be sure to create a platform that other people could use, build upon, and extend internally. It takes a village to build something, and not one populated solely by designers”
Parte del éxito para ser efectivos con los tiempos, está relacionada con la colaboración y a abandonar totalmente la idea de trabajar de manera individual un producto.
Qué es Atomic design? ⚗️
Brad Frost, es la mente tras este concepto. Su curiosidad por encontrar la forma de crear un sistema de diseño más funcional y formal posible, lo llevo a darle vida al “atomic design”. Brad miró hacia la química, la forma en la que la materia está construida a través de átomos y lo relacionó con los elementos visuales que podemos tener en las interfaces.
En palabras del mismo Brad:
“Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.
Aplicando la metodología a sketch 💎
Para comenzar entonces nuestro sistema, debemos tener clara la diferencia entre un átomo, una molécula y un organismo…
Átomos: Es la mínima expresión de un componente a este nivel podemos encontrar elementos como colores, tipografías, iconos, imágenes, avatars…
Moléculas: Es la forma en la que los átomos se agrupan para empezar a tener un contexto visual en la interfaz. A este nivel podemos encontrar elementos como formularios, navegación, campos de texto, cards…
Organismos: Ahora las moléculas estarán agrupadas en forma de organismos, acá podremos empezar a notar que estos elementos reunidos en un solo lugar empiezan a crear módulos de componentes. A este nivel podemos encontrar una barra completa de navegación, un footer,
Templates y páginas: Brad los expresa como la forma en que los organismos de organizan en el canvas y funcionan en contexto, lo que ayuda a darnos a nosotros y al cliente un mejor entendimiento de la forma en que funciona y se ven visualmente en conjunto los elementos. Estos dos últimos en lo personal los obvio completamente ya que aunque fueron planteados hacia el proceso de wireframes ( en donde los organismo no están visualmente 100% definidos) y más que integrarse en la última etapa visual se usan básicamente cuando las pantallas hasta ahora están por definirse.
En Sketch 💎 podemos crear símbolos que contengan otros símbolos, agruparlos, anidarlos. Eso quiere decir que podemos hacer un organismo que contenga una molécula que contenga un átomo
También podemos agrupar elementos usando [/] así mantendremos en ‘carpetas’ esos componentes y al estar ordenados los podremos encontrar muy rápido y empezar a crear una estructura mental de los mismos. Es decir el botón ‘Next’ está en la carpeta de ‘button’ que está dentro de la carpeta de ‘Atoms’
En las imágenes de arriba, la molécula de paginación está construida con dos símbolos de átomos de botones. De esta forma si editamos cualquiera de los símbolos de los átomos, la molécula inmediatamente cambiará por si sola, por lo mismo la idea de mantener el sistema es aún más estable y los cambios en UI no serán críticos en cuanto a tiempos. (quien no odia tener 80 pantallas y cambiar cada una de ellas 😛)
He visto una gran ventaja de ir de la más mínima expresión (átomos) a la reunión de varios componentes (organismos) a través de el feature de símbolos en sketch y personalmente me ha ayudado a resolver interfaz de productos grandes más rápido de lo esperado.
Seguiré experimentando con este método ya que quiero encontrar una nomenclatura que me funcione mejor y que sea entendible por ejemplo cuando alguien nuevo debe tomar mi archivo y continuar desde el punto en que yo lo dejé… así que esperen una segundo, tercero o hasta cuarto artículo con respecto a sistemas de diseño bajo la idea de atomic design
⚗️
Tienen preguntas, les gustó este pequeño desglose de ideas (o no), quieren compartirlo, pasar a saludar, picarle al corazón verde 💚 etc…
Jay López L
heyjay.me
