Cómo organizar tu proyecto en Figma

Cuando trabajamos en un proyecto no somos conscientes de lo rápido que puede llegar a escalar con el paso del tiempo. Si no contamos con una estructura detallada y simple que nos ordene en cada paso podemos terminar perdiendo mucho tiempo.

Compartir parte de nuestra documentación con el resto del equipo es imprescindible en la diaria de nuestro trabajo. Quiero brindarles la nomenclatura que utilizo en Figma actualmente en cada etapa de un proyecto.

Este sistema me permitió ordenar el caos de mis actividades diarias en mis inicios como Diseñadora UX. Si bien, cada proyecto es único y puede que se necesite quitar o agregar otras secciones o espacios, creo que este esquema es una buena base para tener en cuenta.

La forma que utilizó es la siguiente:
→ Cover
→ Descripción
→ Información del cliente
→ UX Research
→ UI Research
→ Mockups
→ Design System
→ UI

📌Cover (thumbnail)

Al ser la miniatura que vemos todo el tiempo, es importante que sea fácil de reconocer a simple vista. Cuando tengamos muchos proyectos nos ahorrará tiempo localizarla rápidamente. Aquí debe ir:

• Título descriptivo del proyecto
• Nombre del cliente
• Logo del cliente.

Podemos agregar en qué etapa nos encontramos.

🥕Descripción

Es un pequeño párrafo que resume los objetivos del proyecto. Además, contiene una lista con los diferentes links, por lo general a las historias de usuario en Jira. También podemos enlazar carpetas de drive o links hacia los FigJam que hemos utilizado en el proyecto.

• Breve descripción
• Links

👁️‍🗨️Información del cliente

En esta sección colocamos todos los datos brindados por el cliente: imágenes de referencia, textuales acerca de qué espera sobre nuestro trabajo, links de referencia a proyectos nombrados, etc.

En definitiva, se trata de una sección que refleja la visión del cliente.

🧠UX Research

Aquí debe ir toda nuestra investigación realizada en torno a los usuarios. Los hallazgos de entrevistas que hayamos tenido, los user personas, los resultados de pruebas de usabilidad y los links en caso de ser necesario a investigaciones realizadas con otra herramienta. También podemos agregar un resumen al principio o un pequeño listado de la información que podemos encontrar.

• User persona
• Benchmark
• Entrevistas con usuarios
• Test de usabilidad
• Etc

💻UI Research

Esta es una de mis etapas favoritas y creo una de las que más valor me aporta al hacerla. Se trata de una especie de moodboard de interfaces que ya se están utilizando en la industria o que poseen alguna función o disposición que considero necesaria integrar en mis diseños. Por lo general los separo por secciones, ejemplo: formulario, modal, onboarding, etc.

✏️Mockups

En esta sección además de incluir los bocetos de las pantallas suelo incluir los users flows y los links de Jira de cada flujo. Además, utilizo arriba de cada mockup una linea de color verde en caso de que el diseño este listo, amarilla si estoy en proceso de desarrollo y roja si no tiene que ser tomada en cuenta.

💎Design System

Esta sección la dejo lo más limpia posible ya que será una de las páginas más compartidas con el resto de los involucrados en el proyecto.

🎯UI

Contiene la construcción final del producto separada de la misma manera que los mockups, no debería variar mucho a esta última. También utilizó los colores verde, amarillo y rojo para indicar el estado en que se encuentran dejando los rojos bien separados del resto de los diseños.

Esta fue mi pequeña guía para mantener el orden, espero puedas aplicar este esquema en tus proyectos. ¿Qué te pareció este artículo?