Guía práctica para componentizar tu sistema de diseño
Como diseñadores estamos permanentemente creando nuevos elementos, buscando consistencia y escalabilidad en lo que producimos.
¿Por qué esto es una guía práctica? Porque estoy buscando compartir con ustedes algunas de las cosas que aprendí en el último tiempo a la hora de organizar los recursos de diseño. Empecemos por el principio:
¿Para qué componentizar nuestro sistema?
- Para agilizar nuestro trabajo y el de los desarrolladores: Cuando todos los elementos están bien organizados, no existen réplicas y es fácil reutilizarlos.
- Para mantener consistencia: Visualizar todos los componentes a la misma vez te va a permitir cuestionarte si un nuevo elemento, que pensabas incorporar, merece la pena o es un mero capricho.
- Para evitar confusión: Si solo se incorporan elementos que son realmente necesarios en el sistema, evitás tener diversidades que llevarán tiempo de aprender para tus usuarios y generan confusión dentro del mismo equipo de diseño.
Todo esto suena muy lindo, pero se estarán preguntando:
¿Cómo funciona?
Vamos a utilizar librerías. Las librerías son archivos de sketch en las que vas a crear tus estilos y componentes, a los que luego podrás acceder vos, y todo el equipo, desde cualquier archivo.
En el caso de que diseñes para diferentes dispositivos te recomiendo que tengas una librería para cada dispositivo, dado que los tamaños y patrones que siguen son diferentes. De hecho, te recomiendo que todo aquello que tenga sus particularidades, como emails o los elementos para armar flowcharts, tenga su propia librería. Y todo aquello que es global, es decir que es transversal a todas las librerías, también. Por ejemplo los íconos, dado que no están vinculados a una plataforma en particular.
Inclusive, podés incluir símbolos de una librería dentro de otra. De esta forma, si los tamaños de ícono cambian por dispositivo, podés crear un símbolo ícono del tamaño correcto en la librería de la plataforma y poner dentro un ícono de la librería ícono.
Dentro de la librería que crees va a haber símbolos que a su vez pueden estar compuestos por varios símbolos, que a su vez tendrán estilos.
Los símbolos son cómo templates y su contenido puede ser tan flexible como quieras. Es decir, cuando uses un componente, podrías modificar los símbolos y estilos que usa.
Tanto los símbolos como los estilos se pueden categorizar cuando se los nombra. Y los categorizarás de la siguiente forma: categoría/subcategoría/{nombre}
Los botones, campos de texto, selectores, logos y hasta las grillas deberían ser símbolos.
Y, una vez que tengas estos archivos, los agregás el archivo a las librerías en las preferencias de Sketch:
Una vez hecho esto podrás acceder a los componentes de las librerías desde cualquier archivo. Y lo que podés hacer para que todos tengan estas librerías es que las mismas estén una carpeta compartida, por ejemplo, usando Google Drive o Dropbox.
¿Cómo se organiza la información?
Vamos a necesitar establecer ciertos criterios para organizar los estilos y símbolos. Estos criterios son bastante similares, no importa a qué lo apliques.
Evitar categorizar por pantalla
Categorizar por pantalla puede llevarnos a repetir elementos en nuestro sistema. Por ejemplo, supongamos que creo un elemento para ser usado en la pantalla de checkout, entonces lo nombro: checkout/componente.
Pasado el tiempo, y en otro contexto, ya sea nosotros mismos u otro diseñador va a necesitar algo que tenga la misma funcionalidad, y no sabrá, o no recordarás, que este ya existe.
En conclusión, cuando creamos componentes, debemos evitar que queden supeditados a una pantalla o flow particular.
Agrupar por similitud de forma y función.
La metodología “Atomic Design” es un sistema de trabajo que se basa en la creación de elementos modulares sencillos, a partir de los cuales se van creando estructuras más complejas.
Los conceptos de átomos y moléculas nos sirven para entender que primero creamos elementos básicos y con ellos vamos creando elementos más complejos.
Pero no es el nivel de complejidad de los componentes lo que los vincula. Cuando buscamos algo no estamos pensamos cuán básico o complejo el elemento es, y sería bastante tedioso tener que hacerlo.
Cuando elementos parecidos están agrupados por similitud de forma y utilidad es más fácil encontrarlos y mantener coherencia entre las variaciones.
Lo mismo pasa con los estilos. Si varios componentes tienen el mismo formato, deberías asegurarte, cuando crees los estilos en tu librería, de reutilizar el estilo en vez de duplicarlo por cada componente. Por ejemplo:
Cómo podemos ver en este ejemplo hay 3 variedades de contenedor según su nivel de elevación, 4 estilos de interacción que serán usados por inputs, checkboxes, radio buttons y textareas, 4 estilos para usar en listas o filas de tablas, y 3 estilos para mensajes.
También será más fácil entender cómo los estilos funcionan si tienen algún criterio solido detrás, como por ejemplo, el sentido de profundidad que se aplica en Material Design.
Los nombres deben ser intuitivos para el equipo.
Para encontrar un buen criterio para catalogar te puede servir ver algunos sistemas, acá por ejemplo hay mucha información al respecto: https://designsystemsrepo.com/
Sin embargo, la idea es que sea intuitivo para el equipo. En mi caso, por ejemplo, “Data table” me resulta poco natural, si pienso en buscar una tabla buscaría table.
También, si todo el equipo participa en organizar los componentes, se habrán puesto de acuerdo en una la lógica y no será una sorpresa para ninguno el criterio usado.
Aplica un orden alfabético y/o numérico
Otra de las buenas prácticas que leí es utilizar números en los nombres pero, en lo personal, no siempre me resulta útil. A veces el criterio de búsqueda que utilizo para buscar algo es alfabético. Por ejemplo, en el caso de los símbolos, el criterio que usaría para buscarlos es alfabético.
Uno de los casos en los que sí ultilizo parámetros numéricos es en los colores, dado que el orden alfabético no ayuda y, muchas veces, no es tan visible la diferencia de tono. De esta forma los números me permiten rápidamente saber cuál es más oscuro y/o más claro.
Recordemos que estos criterios que apliquemos para organizar son para que encontremos las cosas más rápido y evitemos duplicaciones; no fuerces usar un mismo criterio para todo, a menos que te sirva para todo.
Establecer un convenio de nomenclatura
Podés establecer criterios como, por ejemplo, que se use siempre minúscula y singular. También es recomendable, para los nombres compuestos, usar guiones (en vez de espacios) para poder utilizarlos también en el código una vez desarrollados.
Ordenar por subcategorías cuando lo necesites
Si solo usas categorías te perdés la oportunidad de acortar la lista facilitando la lectura y de agrupar a otro nivel. Subcategorizar te va a obligar a cuidar, aún más, la consistencia.
Por ejemplo, los íconos tienen en común que son todos íconos, pero además hay algunos que tienen sus versiones para distintas cosas. Por ejemplo la flecha que usamos para la navegación no es igual que la que usamos para los dropdowns o listas.
Documentar variables y funcionamiento
Dentro de la misma librería podés tener una sección donde podés documentar cada componente, color y estilo.
No es raro encontrarnos con diferentes versiones de un mismo componente, o que un mismo componente tenga diferentes estados. Es muy útil tener esto explicado y nos evitamos reinventar la rueda cada vez que los usamos.
En resumen
Las guías para categorizar estilos y símbolos serían estas:
- Evitar categorizar por pantalla.
- Agrupar por similitud de forma y función.
- Utilizar nombres intuitivos para el equipo.
- Aplicar un orden alfabético y/o numérico según el criterio de búsqueda.
- Establecer un convenio de nomenclatura.
- Subcategorizar para facilitar la lectura.
- Documentar variables y funcionamiento.
Por último me gustaría recomendarles 3 plugins infaltables que les facilitarán mucho esta tarea: Automate, Rename-It y Symbol Organizer.
Seguramente debe haber mucho más que decir y/o mucho que no se me ocurrió probar. Son bienvenidos a dejar sugerencias o contar sus experiencias componentizando su sistema de diseño.
Gracias por su tiempo 🙏
