Desarrollo

Tutorial: Cómo hacer prototipos interactivos en Flinto8 min read

10 noviembre, 2017 7 min read
Luis Pinto

author:

Tutorial: Cómo hacer prototipos interactivos en Flinto8 min read



En este tutorial aprenderemos cómo crear un prototipo para nuestros sitios web y aplicaciones, utilizando el programa Flinto. Dentro del mundo de UX & UI, aparte de realizar un diseño funcional y que se encuentre en tendencia, es importante realizar un prototipo.

Reading Time: 7 minutes

Un prototipo es la etapa final en la que cerramos con broche de oro nuestro proceso de trabajo. La importancia de ello es darle a nuestros clientes una presentación más tangible de cómo será la propuesta desarrollada. De igual manera, ellos podrán dar con más facilidad el feedback de nuestro trabajo.

Existen diversas aplicaciones, tanto para escritorio como plataformas web, que nos permiten hacer prototipos a partir de imágenes en PNG o desde archivos de Sketch o Photoshop. Estas son algunas de ellas: Marvel o InVision. De igual manera, existen varias aplicaciones para ordenadores. Entre ellas: Principle, Flinto, Framer y Origami. ¡Los resultados son asombrosos!

En esta ocasión utilizaremos el programa Flinto, el cual posee dos maneras de trabajar:

  1. Descargando el programa oficial: realizar un prototipo con mejor manejo de transiciones personalizadas.
  2. Desde una plataforma web: realizar transiciones predeterminadas y más estáticas.

Requerimientos

Una vez cuentes con estas herramientas, ¡estamos listos para comenzar!

Creamos nuestro diseño

Trabajaremos con esta aplicación diseñada en Sketch.

Hemos trabajado con 4 pantallas, cada una con una sección diferente: log in, timeline, menu y account. Es necesario determinar la acción que se realizará al tocar o arrastrar cierto elemento; lo que haremos será diseñar la acción y ponerla en su estado inicial. Esto quiere decir que si un objeto aparecerá cuando se seleccione otro, su estado inicial será con opacidad en 0 para poder lograr el efecto que queremos.

crear-accion

Como puedes observar, tenemos el teclado en una posición distinta a la final y su opacidad está en 0. Esto hará un efecto de aparición y movimiento cuando lo seleccionemos. Más adelante verás cómo esto nos será de gran ayuda.

Ya terminado nuestro diseño con todas las pantallas y las acciones, te daremos un pro tip muy importante para antes de exportarlo: nombrar.

Nunca olvides que en la parte de las capas de cada pantalla tiene que ir correctamente nombrado cada elemento. Esto te ayudará a ubicar fácilmente qué capas se conectarán entre sí para posteriormente realizar una transición excelente.

capasExportamos nuestro diseño

Llegó la hora de exportar nuestro diseño. Para ello no necesitamos tener abierto Flinto (se nos abrirá automáticamente).

  1. Nos vamos a la parte de plugins en la barra de herramientas.
  2. Damos click en plugins.
  3. Seleccionamos la opción send to Flinto.
plugin

Conozcamos el programa

Luego de esto, se nos abrirá la aplicación de Flinto. La interfaz es simple. Tenemos al lado izquierdo las pantallas, donde se encuentran la cantidad de pantallas que poseemos en nuestro documento y las capas que contienen cada una de ellas. En la parte central tenemos el área de trabajo, adonde ubicamos el diseño de todo lo que hemos hecho. Al lado derecho tenemos el panel de propiedades, que se divide en propiedades del documento y propiedades del objeto (estas propiedades aparecen cuando tenemos seleccionado un objeto en especifico ya sea texto o formas).

Una de las ventajas de esta aplicación es que al tener conexión directa con Sketch, reconoce de manera instantánea textos editables, formas, líneas, imágenes y colores. Eso hace que la transiciones de formas sea de manera más fluida.

interfaz

Organizamos las capas

Ahora nos enfocaremos en la pantalla de noticias, en ella realizaremos el tutorial. Los pasos que veremos para hacerlo serán los mismos para todas las demás pantallas que quieras realizar.

De acuerdo al diseño, la pantalla de timeline es una tira. Eso significa que tiene que haber un scroll dentro de ella, para poder ver las distintas actividades que la aplicación nos quiere mostrar. Para realizar el scroll haremos lo siguiente:

Seleccionaremos todos los elementos que irán dentro de la pantalla principal (dejando sin seleccionar la parte del encabezado y el menú, estos se mantendrán estáticos durante toda la navegación).

scroll-area

Seleccionamos las propiedades

1. Nos iremos a las opciones que nos aparecen al lado derecho de la pantalla. En ella aparece la opción de desplazar o scroll. Ahí mismo verás que te demuestra dos opciones, una horizontal y otra vertical. En este caso el diseño nos indica que es un desplazamiento en vertical, por lo que seleccionaremos en vertical.

scroll-propiedades

2. En esta parte también puedes determinar si el desplazamiento será por pantalla o normal. Esto se ejemplifica a continuación:

Scroll normal

Esta primera animación te demuestra un desplazamiento normal.      scroll por pantalla

Pero en esta te demuestra un desplazamiento por pantallas.

Esta opción la seleccionarás según hayas elaborado tu diseño y su funcionalidad, en nuestro caso lo dejaremos en normal.

Previsualizamos la funcionalidad

Luego de haber realizado esto, lo vamos a probar. Dentro de la interfaz encontraremos el siguiente botón para reproducir nuestro prototipo: Captura de pantalla 2017-08-10 a la(s) 20.36.25

Esta opción la ocuparemos para poder ir visualizando cómo quedan nuestras transiciones finales y el prototipo final. A través de este reproductor nosotros demostraremos la funcionalidad del sitio o aplicación a nuestro cliente.

scroll select

¡Listo! Hemos creado un desplazamiento para nuestra aplicación.

Animamos el menú

Ahora animaremos la parte del menú y cómo ingresar a las otras opciones.

1. Seleccionaremos el ícono de menú.

2. En esta ocasión nos dirigiremos al botón que dice Comportamiento o Behavior.

3. Nos mostrará una nueva ventana con el tamaño de pantalla ya establecido, el panel con todas las capas que hemos realizado y el icono del menú encerrado en un cuadrado y un símbolo de + a la par de él.

4. En este caso daremos clic en el símbolo + en la pestaña de comportamiento y nombraremos esa nueva pestaña como menú completo.

menu-completo

5. Seleccionada la pestaña de menú completo, seleccionaremos la primera línea del menú y la escalaremos hasta que desaparezca y la moveremos al centro de las otras dos líneas.

6. Luego seleccionaremos la segunda línea y en el panel de propiedades nos vamos a donde dice rotación y en el lado z le pondremos 45.

7. Seleccionamos la tercera línea y hacemos lo mismo que en la línea 2, solo que ahora pondremos -45.

Nuestra animación consistirá en cambiar el ícono de menú a un icono de escape o salir.

8. Ahora nos dirigimos a la pestaña que dice inicial, seleccionamos en el panel de as capas la carpeta de menú icon y presionamos la tecla F, luego nos aparecerá una línea de color rosado y la ubicaremos en la segunda pestaña que nombramos menú completo y se nos abrirá un menú, en el seleccionaremos la pestaña que dice tocar (a veces te lo selecciona predeterminadamente).

9. Ahora seleccionamos la pestaña de menú completo y hacemos lo mismo, presionamos la tecla F y en esta ocasión ubicamos la línea en inicial, y nos dirigimos a la pestaña de los gestos en la parte de propiedades y seleccionamos el icono de reversa, para generar la acción pero de manera inversa.

menu-tap

Y ¡listo! hemos creado nuestra animación para el botón de menu.

Verificamos el resultado

Presionamos el botón de pre visualizar para ver cómo cambia de inicio a fin.

menu tap

Lo único que resta es animar las demás capas para que puedan hacer una transición más interactiva.

Insertamos el contenido

1. Ahora en el panel de capas seleccionamos el grupo que dice menú y lo arrastramos al nuevo grupo que se resalta en color rosado, este grupo está de ese color porque es el grupo que contiene el comportamiento que acabamos de realizar.

2. Seleccionaremos el circulo del menú y en la pestaña de menú completo lo haremos grande (para que se convierta en el fondo de nuestro menú). Luego, a los textos del menú les cambiaremos en las propiedades a opacidad 100%.

Pro tip: es importante que los elementos ocultos o que vayan a aparecer luego de realizar una acción estén en un estado inicial ya sea a un lado, hacia arriba a o girados. Esto para que la animación final tenga mayor movimiento.

El resultado final debe ser similar a esto:

menu-compelte

3. Luego, para poder acceder a esta transición en un futuro, le agregaremos un nombre en la parte que lo indica. En nuestro caso le hemos puesto menu selection.

Ya realizaste un menú interactivo para tu prototipo, ahora solo queda animar las otras pantallas para poder presentárselo a nuestro cliente.

menu completo prev

Así es como puedes realizar distintas transiciones en tu prototipo final. De esta forma el cliente puede obtener una mejor visualización del producto final y tener un campo más abierto para recomendaciones o aprobación total. Puedes practicar con las demás pantallas que te dejo en el archivo para realizar la aplicación completa, ¡solo debes repetir los procedimientos que hemos realizado con nuevos movimientos para generar prototipos increíbles!

Te comparto el resultado final que yo logré y los materiales que utilicé para realizar este tutorial.

 

Link de Archivo Flinto y Sketch

Espero este tutorial sea de ayuda para tus futuros proyectos. Si tienes alguna pregunta con gusto puedo ayudarte, solo déjamela en los comentarios.