¡Hola, hola, hola! Hoy os queremos hablar del prototipado con Figma, un software que está revolucionando el sector. Como no entraremos en grandes especificaciones técnicas, es ideal para cualquier lector, ¿ese eres tu?.
Figma es un sofware de edición y prototipado de interfaz de usuario (UI) que está basado en web, aunque dispone de aplicación de escritorio y app móvil. Junto con otras plataformas como InVision y Marvel se ejecuta en un entorno de trabajo colaborativo en línea, en donde los diseñadores (como nosotros) y desarrolladores (como nosotros) las utilizan para crear productos digitales. Estas herramientas de colaboración permiten a los usuarios editar, comentar así como revisar diseños y codificar juntos.
En los últimos años Figma ha supuesto una pequeña revolución. Su uso ha proliferado gracias a su fácil acceso, ligereza, plan básico gratuito y utilidad, así como la nueva necesidad de prototipos para acercarnos a una solución cómo método económico y rápido en una sociedad en donde casi todo vuela.
Clases de prototipos
Sí, Figma es la leche, pero ¿qué es un prototipo?. Se puede definir (aunque hay muchas definiciones válidas) como un primer modelo, una prueba preliminar que sirve para acercarse o tomar contacto con una idea. En definitiva: es un diseño que nos facilita testar nuestro artefacto con sus futuros usuarios y nos permite aprender de su interacción con él para mejorarlo, validarlo o desecharlo.
Si hacemos una primera división, los prototipos pueden dividirse en baja fidelidad (wireframes) y alta fidelidad.
En un wireframe (baja) a menudo se representa la estructura básica y el contenido más relevante, sin entrar en mucho detalle. Los prototipos de baja fidelidad son una herramienta de testeo económica y rápida, fácil de usar y entender. Es por tanto un instrumento práctico de bajo coste, que nos resultará muy útil para observar cómo el usuario final interactúa con este “objeto”.
Por el contrario, en los prototipos de alta fidelidad, se implementa ya toda la identidad visual, con la intención de aproximarnos al máximo a la experiencia que se tendría con el producto final. Como norma, los prototipos en alta acostumbran a ser interactivos y permiten interactuar con los contenidos, aunque sea de manera sencilla.
Las ventajas de trabajar con prototipado
Como todo en la vida, un prototipo web tiene pros y contras. Alguno de los contras puede ser el riesgo de caer en una iteración infinita, pero como somos positivos solo hablaremos de los beneficios. Algunos de estos son:
- Permite pasar de lo abstracto a lo concreto y acelera el proceso de diseño asociado a un proyecto.
- Facilita la comunicación y el trabajo en equipo: permite que los diferentes miembros del equipo (diseñadores, marketing, etc.) tengan idea del estado de la propuesta y puedan involucrarse en el proceso.
- Permite evaluar la propuesta: se pueden realizar pruebas con usuarios reales para evaluar diferentes aspectos del diseño (apariencia, interacción, usabilidad, textos, etc.) e introducir mejoras hasta llegar a una versión final.
- Refuerza coherencia: el prototipado se construye en base a las ideas e información generadas durante las fases previas del proyecto.
“En la fase de desarrollo el prototipado reduce el gasto. Además, permite detectar fallos e implementar mejoras antes de pasar a la construcción, lo que se traduce en un ahorro de tiempo y presupuesto.”
Usando Figma: frames y componentes
Si has llegado al programa, lo primero que tendrás que hacer es crear un nuevo proyecto. Un proyecto se dividirá en diseño y prototipo. Si empezamos a diseñar, esto nos llevará a un lienzo en blanco donde empezaremos a trabajar. La base del trabajo estará enfocada a la creación de frames y sus elementos. Un frame es básicamente una mesa de trabajo con unas proporciones concretas donde realizaremos el diseño de una de las pantallas de nuestro artefacto. Los elementos son formas, imágenes o texto. Sí, así de fácil. Lógicamente cada elemento nos dará multiples de opciones en función de su naturaleza, y los frames nos permitirán crear grids o retículas para trabajar convenientemente. Además, la creación de estilos predefinidos es otra de las opciones que nos facilitarán la tarea. ¡Investiga!
Prototipado dinámico en Figma
Si el pequeño apartado anterior lo hemos dedicado a la sección de diseño, la parte de prototipo (prototype) nos permitirá crear las interacciones de los componentes y elementos de navegación. La transformación de elementos en componentes (o assets) nos permitirá disponer de las herramientas necesarias para crear objetos que tienen comportamientos y que son replicados en cualquiera de nuestros frames (como una variable).
Es aquí cuando aparecen las variantes. Se trata pues de un componente al que se le definen distintos estados: esto ocurre cuando hago clic, esto cuando alejo el ratón, esto cuando pasa un tiempo… y es aquí donde reside la potencia de la interacción.
Casi he terminado, ¿y ahora?
Si tu proyecto está avanzado o termnado, el prototipado con Figma te permitirá:
- Realizar una visualización interactiva.
- Descargar uno, varios o todos los frames en pdf.
- Compartir tu proyecto para validarlo con el equipo.
- Otorgar permisos de colaboración.
Y ahora, ¡manos a la obra!
Open 10 - 19h.