El arte de organizar un archivo de Figma 🐛 & anuncio del Product Design Camp! 💚
Como hacer que el archivo de Figma te ayude a ser más eficiente, compartir mejor tu trabajo y documentar el proceso. ¡ah, y una pequeña sorpresa 👀!
Holaaaaa 🖤 ¿Cómo estás? Yo la verdad es que muy emocionada
Febrero ha sido un buen mes, y uno de los motivos principales es el lanzamiento de un nuevo proyecto junto a Marta Conde: ¡el primer retiro para Product Designers!👇
Si esto te interesa, reserva el 3, 4 y 5 de octubre en tu calendario, porque pasaremos un fin de semana (3 días y 2 noches) experimentando, conectando y trabajando en nuestro portfolio en un lugar súper inspirador rodeado de naturaleza 🌿
Si quieres ser de las primeras personas en enterarte cuando abramos inscripciones, te dejo por aquí la cuenta de Instagram y el link para apuntarte a la waitlist 🫶
Y ahora sí, después de este pequeño paréntesis, vamos con un tema que me apasiona y con el que siempre estoy probando cosas nuevas: Cómo organizar un archivo de Figma 🧩 Let’s do iiiiiiit!
Y si todavía no te has suscrito, dale al link de abajo para no perderte ningún artículo ↓
El arte de organizar un archivo de Figma
Empezaré diciendo que no existe una única manera correcta de organizar un archivo de Figma, ya que cada designer tiene un contexto diferente y su propio workflow. Así que no esperes encontrar aquí una guía definitiva, ya que lo que funciona para mí puede no ser lo ideal para ti.
No obstante, lo primero que si que te recomendaría es que revises como estás organizando tus archivos de Figma. Después, te sugiero que prepares un pequeño workshop para detectar las siguientes cosas:
Lo que realmente está funcionando y, por lo tanto, no hay que cambiar.
Lo qué hacemos por costumbre pero realmente no aporta mucho.
Y aquello que que debería cambiar sí o sí, ya que está relentizando los procesos.
También te animo a que una vez hecha esta sesión con otrxs designers, os juntéis con desarrollo y hagáis lo mismo. Al final, desde mi punto de vista, un archivo de Figma tiene que ser eficiente para diseñadores y entendible para developers.
Dicho esto, si estás buscando inspiración y ver otras maneras de organizar, te cuento lo que estoy utilizando ahora mismo:
Las páginas dentro del archivo
He estado usando la misma estructura para organizar las páginas dentro de un archivo de Figma durante más de dos años y, hasta ahora, me sigue funcionando perfectamente.
Te cuento como lo hago:
#1 Cover
La primera página de todos mis archivos siempre es la portada, donde preparo una imagen que sirve de miniatura para visualizar rápidamente el proyecto dentro de la interfaz de Figma.
Y esto es lo que suelo incluir:
Nombre del proyecto
Fecha
Estado
Link a documentación (opcional, pero muy útil)
Existen bastantes templates en la Figma Community para que no tengas que hacerlo desde cero, aquí te dejo uno de mis favoritos:
Figma File Thumbnails creado por Carey Spies 👇
#2 Design System o Style Guide
Cuando se trata de un proyecto pequeño, es decir, cuando no hablamos de una gran organización con diferentes equipos o productos, me gusta mantener el Design System o la Style Guide dentro del mismo archivo. Se me hace más cómodo de utilizar y mantener actualizado.
Para organizar y documentar esta sección utilizo los siguientes plugins:
Color Variable Style Guide → Como dice el nombre, te crea una guía con todas las variables de color que hayas definido.
Typography Style Guide → Prácticamente lo mismo que el anterior, pero para los estilos de texto.
y aquí un ejemplo de como crean la documentación los dos plugins que acabo de mencionar:
Y si buscas una herramienta para documentar componentes, te recomiendo EightShapes Specs. Tiene una versión gratuita que es perfecta para comenzar y una versión pro que también vale la pena.
y aquí un ejemplo de como crea la documentación:
#3 High Fidelity Designs
Los diseños finales los suelo organizar en diferentes páginas según funcionalidades o mini proyectos. A estas páginas suelo añadirles un emoji para indicar el estado:
💡 → Ideación
✏️ → WIP (Work In Progress)
👀 → En Revisión
✅ → Ready
A veces, si es necesario, también añado la versión (V.1) o la fecha (Marzo 25’).
#4 Exploraciones / Playground
Siempre dejo una página dentro del archivo dedicada a las exploraciones. En esta página rompo componentes, desvinculo estilos y pruebo cosas nuevas. Suele ser un caos completo, pero ese es el objetivo, no pretendo que nadie entienda el caos que hay ahí.
Te recomiendo mucho que la tengas para dejar fluir tu imaginación y creatividad sin restricciones.
#5 Archivo
Esta parte, más que una página, la utilizo como sección. Creo una página vacía como título y voy moviendo las páginas con las features o mini proyectos que ya se han realizado, junto a su fecha.
Esto me ayuda a mantener un historial claro y fácilmente accesible.
La organización de los flows para el handoff
Aquí he probado mil cosas distintas, pero desde hace casi un año estoy utilizando el mismo método y me está funcionando genial.
Este método es suficientemente estructurado a la vez que flexible para no dejar la organización a medias, algo que me pasaba con métodos más rígidos.
Además, este método facilita mucho la comprensión de los flows y diseños a no-diseñadores (por ejemplo: developers o stakeholders), es un formato simple pero muy visual y fácil de entender.
Aquí os dejo un ejemplo de como quedaría organizado:
Una vez más, estos componentes los he encontrado en un archivo de la Figma Community llamado File Management Goodies creado por Deliveroo.
Es un set muy completo, con componentes creados con sus variantes que puedes utilizar de manera personalizada.
Desde que utilizo este set, he dejado de utilizar los comentarios nativos de Figma que, para mi gusto, eran demasiado desordenados y muy fáciles de perder. Las notas y todos los componentes indicativos de este archivo son mucho más visuales y claros.
Y esto es todo, espero que te sea útil y te inspire de alguna manera :)
Recomendaciones de la semana
🎨 CallToInspiration → Una librería bastante extensa con ejemplos reales de diferentes patrones UI. Muy práctico cuando buscamos diseñar algo en concreto como una página con precios, un pop up… y queremos inspirarnos en otros ejemplos reales.
💻 Seasoned Studio Website → Me encontré con esta página web recientemente y me pareció super original (si pasamos por alto algunos detalles de usabilidad y accesibilidad 👀). Me encantó los vibres retro que desprende!
🍿 Twin Peaks → Dos ediciones in a row recomendando a David Lynch, pero es que si todavía no has visto Twin Peaks, no se a que esperas 🤭 voy por la segunda temporada pero me está gustando muchísimo! Te recomiendo que le eches un vistazo si estás buscando algo que ver.
Y esto es todo por hoy 🖤 ¡Nos leemos pronto!
Mientras tanto, puedes seguirme en Instagram 🫶 o enviarme un email para darme feedback sobre la newsletter o pedir que hable sobre algún tema en concreto!
〰️ Judit