Marikondeando Figma: cómo ordenar nuestros archivos

Hace un tiempo te contaba que Figma es mi mejor amigo-herramienta al momento de trabajar y te compartía mi colección de plug-ins favoritos sin los cuales no puedo trabajar. Hoy vuelvo para contarte cómo organizo mi placard para no sentir que caigo en el País de las Maravillas cada vez que abro Figma.

Menos es… peor

En diseño siempre decimos “menos es más”. Esto no aplica para los archivos de Figma, donde más siempre tiende a ser mejor. Básicamente, en Figma tenemos 2 maneras de trabajar: o metemos todo en un mismo archivo, que escalará en el tiempo y en el cual se va a volver imposible encontrar nada o podemos dividir y vencer.

Empecemos por el principio: los proyectos

Figma nos permite crear proyectos, que serían el equivalente a las carpetas de Google Drive. Es ideal tener una carpeta por cada proyecto real que estemos trabajando para mantener todo su lugar y no mezclar peras con bananas.

Los distintos proyectos y sus respectivos archivos

Ok, ¿y cómo hacemos para que no se van todos los archivos iguales?

Cada archivo debe verse diferente a simple vista

Para que encontrar archivos no sea como jugar a la batalla naval, tenemos que cuidar 2 cosas: nombres y portadas.

Nombres

Después de probar varias maneras, descubrimos que el formato “AAAA/MM/DD — Módulo” es el que mejor funciona. Usamos año-mes-día para que al ordenarlos alfabéticamente siempre aparezca el más reciente arriba y el módulo para entender qué vamos a encontrar en ese archivo. Cuando ponemos la fecha buscamos siempre dejar el último día de edición. Esto sirve mucho para saber cuándo se hicieron los últimos cambios.

Los distintos archivos de un proyecto

Portadas

De la mano del nombre, la portada es el otro elemento clave para entender el estado del archivo. De base, lo ideal sería tener siempre una portada diseñada y no la que ponga Figma por defecto.

En esta portada podemos poner: el logo/nombre del proyecto, el módulo que incluye con las distintas funcionalidades y la fecha de última edición. Además, detalle no menor, solemos utilizar color para denotar el estado del archivo. Por lo general se usa el naranja para algo que está en proceso y el color identitario para marcar que es un archivo “cerrado”. Digo cerrado entre comillas porque sabemos bien que seguro vamos a tener que volver sobre nuestros pasos para corregir algo o iterar, pero, de momento, ese archivo descansa en paz.

Los proyectos en naranja son los que están siendo trabajados y el violeta ya está cerrado.

Cada proyecto es un mundo

Sin embargo, intentamos que siempre sean mundos similares. Como si los humanos salieran a colonizar el espacio y buscaran que todos los planetas fueran similares: mismo clima y estaciones, fauna y flora exportada y adaptada, todo parecido para encontrarnos en terreno amigable. Bueno, lo mismo buscamos en cada proyecto: un archivo con el design system, un archivo para hacer bench y pruebas y el resto de los archivos separados por módulos con sus respectivas funcionalidades.

Al principio, si es un proyecto chico tal vez parezca innecesario tantos archivos cuando podría estar todo nucleado en distintas páginas de uno solo, pero la realidad es que nos prepara para cuando el proyecto escale y que todo sea más prolijo y ordenado. Creánme, ordenar y tener todo listo para lo que venga es un camino de ida. Significa que cuando la cosa escale no vamos a tener que ir haciendo ingeniería inversa a ver cómo podemos fragmentar y separar todo.

La unidad mínima: el archivo

Y llegamos a nuestra unidad mínima de organización: el archivo. Como ya mencionamos antes, acá es importante tener la portada bien prolija y al día. En nuestra experiencia, lo mejor es tenerla en la primera página del archivo y que esté sola, así evitamos confusiones.

De la misma manera que dividimos todo en archivos, acá también es ideal separar cada flujo o funcionalidad en una página. Esto nos permite nomenclar cada página con un nombre representativo y que la búsqueda sea más rápida y fácil.

Dentro de las páginas, los flujos es común ordenarlos horizontalmente y de izquierda a derecha para respetar nuestro orden de lectura y que nos resulte más natural su interpretación. No solo al trabajarlo desde diseño, sino al compartirlo con el equipo y pasarlo a desarrollo.

Es normal que en una página tengamos más de un flujo, por lo que algo que incluimos al principio es otra carátula con el nombre del flujo a resolver. Igual que con las portadas de proyectos, usamos color para visibilizar rápidamente el estado:

• Naranja para lo que sea que esté en proceso, ya sea que se está haciendo de 0 o que estamos haciendo pequeños cambios.
• Gris si es algo que se iteró, se hizo una nueva versión y esta quedó obsoleta.
• Verde o el color primario del proyecto para demostrar que el flujo está listo para pasar a desarrollo.

Y ese es mi súper método para que manejar Figma sea más fácil, práctico y cómodo. Y, ¿vos? ¿Cómo ordenas tu bóveda de Figma? ¿Cuál es tu truco para no perderte en un laberinto sin salida? Contame en los comentarios y dejame algunos aplausos si te sirvió el artículo. 👏

Conocé más sobre Unagi en nuestra web, mantenete al tanto de nuestras novedades en LinkedIn y conectá con nosotros a través de Twitter.