Figma: UX/UI, colaboración, feedback e integración

El proceso de diseño de un producto digital involucra no sólo al cliente sino también a todo el equipo que forma parte del mismo. Desarrolladores, analistas funcionales, expertos en el negocio, y el equipo de diseño en sí.

Todas estas partes necesitan el input constante para poder iterar y definir sobre el diseño de cada pantalla y/o flujo de un producto.

El desafío es hacerlo de forma integrada, ágil, e involucrando a las partes de forma tal que el feedback pueda impactar más rápido.

En este artículo te contamos sobre Figma, una herramienta de diseño de interfaces enfocada en la colaboración e integración del equipo para construir productos digitales.

Aclaración: cuando hablamos de equipo, hablamos tanto del equipo interno como del cliente, como un sólo grupo de personas.

Accesibilidad: basada en la web

Primero lo primero ¿cómo accede el equipo al diseño del producto? Interfaces con diseño UI, bocetos o wireframes, flujos de navegación, etc.

Lo bueno de una herramienta como Figma, es que todos estos elementos pueden alojarse en un mismo proyecto.

Y como si eso fuera poco, no es necesario para el equipo de diseño estar exportando imágenes o assets como archivos para que el equipo vea los avances o entregas.

Figma es una web app, apoyada 100% en tecnologías web, y tiene features de colaboración, vista y edición.

¿Qué significa esto? Que cualquier persona, sin importar el dispositivo o sistema operativo que tenga, puede acceder a un proyecto desde un link y verlo fácilmente desde cualquier browser.

Además, hay versiones desktop descargables para trabajar con mayor comodidad.

Es algo parecido a un documento de Drive, como un Google Doc o Sheets. Podemos generar un link con permisos de visualización, para que cualquier persona pueda verlo.

O podemos también, con una dirección de mail, invitar a una persona a ver o editar el documento.

Sistema de comentarios

Siguiendo con la línea de los documentos de Drive, Figma también tiene un sistema de comentarios.

Cualquier persona que acceda a un link de Figma puede activar el modo de comentarios (tip: con la tecla C) y dejar un comentario en cualquier parte del proyecto.

Los editores del proyecto reciben notificaciones vía mail con estos comentarios, y luego pueden verlo como novedades una vez dentro de Figma.

De esta forma, dar feedback sobre algo tan específico, como por ejemplo un botón, es tan simple como visualizar ese botón en el diseño, y dejar un comentario sobre el mismo.

Esto funciona igual que comentar un Google Doc seleccionando un bloque de texto o párrafo, comentando con referencia a la selección.

El equipo de diseño recibe ese feedback, puede continuar la conversación con comentarios, o simplemente marcar el mismo como resuelto luego de modificar el diseño aplicando los cambios sugeridos.

Para el equipo de desarrollo: componentes

Si bien a simple vista Figma puede verse como una herramienta para quienes diseñan, desde el vamos sus creadores le pusieron también foco al equipo de desarrollo.

¿Cómo puede una herramienta como Figma ayudar a agilizar la construcción del front del producto?

Figma tiene un sistema de componentes, instancias, y estilos.

Cada elemento de un producto, como por ejemplo un botón, se puede transformar en componente madre, y a partir del mismo, generar instancias que dependan de ese componente.

De esta forma, si el estilo de nuestros botones cambia, podemos modificarlo una sola vez, y ver cómo impacta automáticamente en todo el producto.

Este concepto aplica también para los estilos globales, que podemos definir para los colores y tipografías.

Tomando una paleta de colores, podemos guardar color por color con un nombre y una división de familias (por ejemplo, todos los grises en una misma carpeta).

Lo mismo sucede con las tipografías. Podemos generar estilos globales con tipografías de cierto tamaño y características definidas, agrupadas por peso (regular, semibold, bold, etc).

Con los elementos componentizados, y las tipografías y colores estilizadas, todos los elementos de nuestro producto serán instancias de estos elementos definidos de forma global.

Si en el medio del proyecto, un color se modifica por algún motivo, podemos cambiarlo una sola vez desde los estilos globales, y este cambio impactará en todo el producto.

Con estas herramientas podemos construir productos en escala que independientemente de la cantidad de pantallas, el sistema de diseño que se genere siga siendo controlable por el equipo.

Además, el equipo de desarrollo fácilmente puede tomar los componentes y estilos definidos de todo el sistema, y utilizar el mismo como base para construir todo el producto.

Tip para desarrolladores: hay un directorio de plugins, como por ejemplo este, con muchas herramientas para agilizar el trabajo de traspaso a código.

Prototipos interactivos

Visualizar los diseños, pantalla por pantalla, como archivos (por ejemplo) png, no es lo más productivo, ni tampoco una visualización real de cómo puede verse el producto una vez construido.

Para esto es que utilizamos los prototipos.

Figma nos permite tomar las pantallas diseñadas, y conectar los distintos componentes para que una persona pueda abrir un link de la presentación y navegar por el producto, interactuando como si el mismo fuese un producto real ya construido.

Trabajando con ciertos tamaños y viendo el prototipo en un monitor o notebook adecuada a esos tamaños definidos junto al equipo de diseño, se puede tratar al prototipo como un simulacro o demo del producto real, simulando el tamaño real de una forma muy eficiente.

Por supuesto, los prototipos incluyen el sistema de comentarios para rápido feedback, y se pueden abrir desde cualquier navegador.

Una herramienta flexible

Más allá de todas las ventajas mencionadas, Figma tiene una particularidad: y es que tiene una curva de aprendizaje muy baja, y es muy simple de adaptar a las necesidades del equipo.

Si bien lo recomendamos para los proyectos que incluyen un proceso de diseño UX/UI, Figma puede servir para visualizar cualquier tipo de información, e incluso se puede adoptar en un equipo como pizarrón digital.