¿Cómo desarrollar prototipos con Figma?
Los diseños interactivos y sus complicaciones
En artículos anteriores ya hemos hablado de Figma, una herramienta de diseño gráfico altamente intuitiva que incluye desde la creación de Wireframes hasta la creación de prototipos pasando por los Mockups.
Esta herramienta de diseño nos permitirá crear productos a medida, para cubrir las necesidades de nuestros clientes y como diseñadores, uno de nuestros retos es lograr transmitir correctamente nuestro trabajo, pero cuando nuestro trabajo consiste en un diseño interactivo, esta tarea se complica.
Si en alguna ocasión has desarrollado un diseño interactivo, es muy posible que algunos de estos problemas te sean familiares y hayas tenido que lidiar con ellos:
- Haces un diseño genial para el producto o servicio, al cliente le encanta y aprueba la propuesta, se da luz verde y se desarrolla. Pero a la hora de lanzar el producto, los usuarios no lo usan o se quejan de su funcionamiento. ¿Por qué ha pasado esto? Puede ser por muchos motivos, pero uno de ellos es posible que sea una mala usabilidad, o también por no haber sabido cumplir con las expectativas de los usuarios o consumidores. Recuerda, no todo es estética.
- El cliente ha aprobado el diseño y se ha comenzado a desarrollar el producto o servicio, pero una vez el cliente lo ve en desarrollo, pide cambiar y modificar cosas que no sabía que serían así, o que se imaginaba de otra manera. También puede pasar que se vayan agregando funciones que no se habían pedido en un inicio, que van surgiendo a medida que el proyecto avanza.
- A la hora de comenzar con un desarrollo, las explicaciones de todas las funciones, estilos, animaciones, etc, ocupan una buena parte del tiempo de desarrollo. Las conversaciones entre desarrollo y diseño son constantes, para saber qué hace cada elemento, lo que aumenta los tiempos del proyecto. Y aunque exista una muy buena comunicación, puede darse el caso de que un elemento no se desarrolle como el diseñador se lo había imaginado.
¿Cómo podemos solucionar estos problemas?
Desde Itequia creemos que para cada producto, persona, empresa y cliente habrá soluciones que den mejor o peor resultado, pero nosotros hemos comprobado que una buena solución es crear prototipos interactivos con Figma.
¿Por qué hacer un prototipo en Figma?
Antes de comenzar, explicaremos qué se puede hacer con Figma y por qué es una herramienta clave para probar tu producto o servicio durante la fase de desarrollo.
¿Qué podemos hacer con Figma?
Prototipados
Con Figma podremos crear prototipos interactivos sin tener que escribir una sola línea de código, y compartirlos con nuestros clientes, con el equipo de desarrollo, con usuarios que vayan a probar y poner a prueba el producto, etc.
Animaciones
En los prototipos y desarrollos se pueden utilizar animaciones, como por ejemplo que al pasar de una pantalla a otra se realice una transición concreta. Son pequeños detalles que darán más vida y realismo al prototipo y al diseño final.
Componentes
Otro de los puntos fuertes de esta herramienta de diseño, es que nos permitirá guardar componentes. Estos componentes son, diseños modulares que podremos reutilizar en diferentes partes de nuestro prototipo. Gracias a esta funcionalidad, podremos crear nuestro sistema de diseño, que contendrá todos los elementos de marca y componentes reutilizables.
¿Qué soluciones nos ofrece Figma?
- El prototipo será tal y como es la web una vez esté desarrollada y esto nos permitirá mostrar al cliente cómo será cada cosa, cada interacción, cada animación, etc. Con esto podremos evitarnos cambios derivados de malentendidos o falta de información.
- Una vez tengamos el prototipo creado, este nos permitirá testearlo y detectar posibles errores de usabilidad, al poder interactuar con él como si fuese la web/producto real.
- Figma nos permite documentar cada función y/o elemento a través de un Design System. También podremos dejar notas e indicaciones a los diferentes usuarios, incluyendo el cliente, el equipo de desarrollo, etc. Esto aporta una mayor visibilidad del proyecto para todas las personas involucradas y por lo tanto un trabajo más fluido y eficaz.
- Esta herramienta de diseño cuenta también con otros beneficios cuando el producto/servicio está escalando, puesto que los componentes, una vez creados se pueden reutilizar, manteniendo un diseño uniforme. Y si nos hacen falta componentes nuevos, los podremos agregar al Design System ya existente, e incluso tener un historial de cambios, para ir documentando las distintas versiones del proyecto.
¿Debería hacer un prototipo interactivo en todos mis proyectos?
En este caso, la respuesta no es definitiva, pero lo que sí os podemos adelantar, es que cuanto más complejo es el producto, más necesario es prototipar y contar con una versión de prueba que podamos ir revisando con nuestro cliente.
Aunque pienses que si no haces un prototipo o un testeo te estás ahorrando tiempo y recursos, a la larga podrías estar perdiendo más tiempo por arreglar cosas que se podrían haber detectado y corregido en la fase de diseño.
En el caso de que contemos con poco tiempo o recursos para el proyecto, sería interesante prototipar solo las partes más relevantes y decisivas del producto, pero siempre es recomendable prototipar y testear.
¿Solucionará un prototipo interactivo todos mis problemas?
Aquí la respuesta sí que es muy clara, no, un prototipo no va a solucionar todos mis problemas de desarrollo.
Un prototipo interactivo es una herramienta para mejorar el flujo de trabajo, pero siguen siendo necesarias la documentación, las reuniones tanto con el cliente como con el equipo de desarrollo, etc. El prototipo nos ayudará a hacer que estas otras tareas sean más fáciles y lleven menos tiempo, evitando así los malentendidos y permitiéndonos optimizar nuestro tiempo de trabajo al máximo.
En resumen, utilizar un prototipo interactivo en nuestro desarrollo puede llevar más tiempo que hacer simplemente el diseño estático, sí, pero también aporta unos enormes beneficios, especialmente cuando tu producto es complejo.
Con un prototipo tan real como la Web, App o producto final, tanto el cliente, como el equipo de desarrollo, como los posibles usuarios que vayan a probarlo sabrán qué es cada cosa y cómo tiene que funcionar, identificando de manera temprana posibles errores o deficiencias de usabilidad, que podremos corregir antes de la entrega.