Sistemas de diseño con Atomic Design y Sketch — Parte II
La historia sin fin del trabajo colaborativo visual 🛠
Antes de empezar, les comparto una actualización de este post:
El mes pasado, les compartí mi primer acercamiento para utilizar la metodología de Atomic design y crear, con ayuda de sketch un sistema de diseño sólido que se pudiera compartir con muchos diseñadores visuales y de producto cuyos esfuerzos, se enfocaran en reducir los tiempos de ejecución visual y crear un lenguaje común en el equipo y el producto.
Como reto personal, me propuse experimentar algo nuevo en cada producto que pasara por mis manos, para mejorar mis prácticas de ejecución dentro de 23 Design y luego de darle muchas vueltas, este es el resultado:
“HMW: ¿Encontrar un lenguaje escalable y claro de estos componentes visuales?”
Solución — Convenciones de nombre
Esta idea se inspiró totalmente en las buenas prácticas que muchos programadores utilizan a la hora de codear. Creando componentes desde una base atómica, los puedes organizar y controlar desde 3 categorías distintas.
La sintaxis entonces, la haríamos de la siguiente manera: Categoría/Componente/Variable
- Categoría: Definir si es un átomo, una molécula o un organismo.
- Componente: Identificar a nivel del lenguaje visual digital que tipo de elemento es.
- Variable: Asignarle una característica que nos ayude a clasificar a nuestro elemento visual (tamaño, alineación, estado…)
Les comparto un pequeño archivo de sketch 📁, de un experimento que hice anidando botones. Su feedback es bienvenido
“HMW: ¿Integrar este sistema/lenguaje en sketch App?”
Solución — Símbolos en sketch
Los símbolos, por lejos son el feature más útil de Sketch, su fuerza radica en que pueden anidar componentes y lograr cambios en pantallas en cuestión de segundos así que, el problema extra que estamos atacando acá está relacionado con el tiempo mal invertido haciendo cambios al mismo componente en X números de pantallas.
En la página oficial de sketch podrán encontrar varios tutoriales si quieren despejar sus dudas técnicas.
Nota especial: En el último Beta, sketch lanzó la funcionalidad de “librerias”. Símbolos que puedes llamar en distintos archivos 💎
“HMW: ¿Mantener el sistema/lenguaje en un equipo de diseño?”
Solución — Abstract y control de versiones.
Desde el mes de agosto en el estudio, agregamos a nuestro stack de trabajo Abstract, una app que ayuda mantener valga la redundancia, el control y las versiones sobre los archivos de sketch. También te permite tener múltiples diseñadores trabajando “en el mismo archivo” en simultáneo.
Al agregar este grado de complejidad extra en nuestro entorno de trabajo, hace mucho sentido compartir un lenguaje común para poder ejecutar 10X más rápido, comparado con un método tradicional de storage en dropbox, drive o local.
Abstract es nuevo — entre comillas 🙊 — pero como su lógica corre a partir de las buenas prácticas y métodos que se han creado en la programación, cuenta con bases muy sólidas (que sketch también ha empujado con sus nuevos features) para que Abstract, forme parte de manera natural de todo este flujo de ejecución para un producto digital.
Conclusiones:
- Gracias a “Atomic Design” y sus bases en la programación logramos crear una sintaxis funcional y clara.
- Sketch y los símbolos anidados, nos permiten manejar de forma global nuestros componentes.
- Definir reglas básicas en la construcción de UI, nos ayuda a mantener consistencia en el producto y abogar por el trabajo colaborativo.
- Es vital construir una comunidad alrededor del diseño de interfaz para poder compartir más conocimientos como este y complementar experimentos y metodologías aisladas.
⚗️
Pd: Les dejo un link secreto interesante 👀
