Tutorial de Framer: 7 microinteracciones simples para mejorar sus prototipos

Bienvenido a la segunda entrega de nuestra serie de tutoriales de Framer. En el último artículo, aprendimos sobre los conceptos básicos del uso de Framer en modo Diseño, así como también cómo escribir un código simple para hacer que nuestros diseños cobren vida. En este artículo, nos centraremos en usar Framer para crear microinteracciones y transiciones animadas. Veremos cómo crear siete interacciones útiles para sus prototipos.

¿Por qué debería crear prototipos de pequeñas interacciones?

El movimiento suave, los cambios de estado y las transiciones sutiles ayudan al usuario a comprender cómo usar su interfaz al brindarle comentarios sobre ciertas acciones. A menudo, estas transiciones harán eco de los análogos del mundo real (como el deslizamiento de un control de interruptor) o utilizarán patrones de interacción de dispositivos comunes (como tocar para expandir). En este tutorial, nos centraremos en las interacciones que agregan un toque final a la interfaz para guiar la comprensión y despertar el deleite del usuario.

Echa un vistazo a los ejemplos a continuación. Diseñadores de todo el mundo están creando estas microinteracciones en varios productos.

Los 7 prototipos

En este tutorial, le daré una descripción general de cada microinteracción y algunos fragmentos de código. Utilizaremos varias técnicas diferentes, por lo que podrá elegir la que mejor se adapte a su producto. No existe una forma "correcta" de crear nada dentro de Framer Studio; como mencioné en mi artículo anterior, Framer le brinda mucha libertad para crear de la manera que desee.

¿Habías visto interacciones como estas antes? ¡Claro que lo tienes! Los ves todos los días en tu smartphone. Es hora de crear el tuyo propio.

1. Botón de acción

El botón de acción a menudo representa la acción principal de la pantalla actual. A veces contiene varias acciones en su interior. Crearemos una interacción para el segundo caso. Descargue el prototipo de trabajo aquí: https://framer.cloud/ShBnH

Paso 1: crea tres botones en forma de círculo

Para comenzar, cree un botón principal en forma de círculo con un ícono dentro y dos botones más pequeños debajo del botón principal. No olvide marcar todas estas capas como interactivas en el modo de diseño (con el indicador de destino).

Paso 2: Diseñe dos estados para todas las capas

Crea dos estados diferentes para las capas. Usa el siguiente código para hacer que los botones más pequeños se muevan sobre el principal y para rotar el icono 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Paso 3: Agregar un evento

Para hacer este prototipo animado, tenemos que agregar un evento. Después de tocar el botón de acción, cambie los estados de todas las capas:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Paso 4: Animación de primavera

En este punto, la animación parece muy mecánica. Para agregar un toque humano, agregaremos una animación de primavera para todas las capas:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

¡El botón de acción está listo para funcionar!

2. Interruptores interactivos

Los pasos a continuación le permitirán crear su propia interacción de cambio. Descargue el prototipo de trabajo aquí: https://framer.cloud/ieypV

Paso 1: Diseñe un patio de juegos con interruptores

Solo necesitará dos cosas: el interruptor en sí, que contiene al menos dos capas (fondo y punto), y algunas capas para animar después de usar el interruptor.

Paso 2: Crear estados

¿Recuerdas del primer artículo cómo diseñar estados directamente en Framer Studio? Diseña tus estados como quieras, o usa mi configuración:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Paso 3: Agregar un evento

Para que el prototipo funcione, debemos agregar un evento al interruptor. Después de tocar el interruptor, cambiaremos el estado de todas las capas:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Paso 4: Ajustar el tiempo

Para que todo sea más natural, ajusta el tiempo y el retraso de todos los estados:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

¡Ahora nuestro prototipo está listo!

3. Acción de deslizar el elemento de la lista

Esta es una interacción típica para eliminar, archivar o guardar elementos de una lista. Deslice el dedo hacia la izquierda o hacia la derecha y se borrará un elemento. Descarga el prototipo aquí: https://framer.cloud/rzMWP

Paso 1: Crear un prototipo en modo Diseño

Puedes usar tu propio diseño, si lo deseas. Solo tienes que mantener la misma estructura de las capas. Como puede ver en la imagen de arriba, todos los elementos de la lista tienen un botón "deshacer" debajo de ellos.

Paso 2: haz que los elementos se puedan arrastrar

Para simplificar, crearemos una interacción solo para el primer elemento de la lista. Primero, haga que el elemento de la lista se pueda arrastrar: item.draggable = true .

Luego bloquee el eje vertical: item.draggable.vertical = false .

Configure las restricciones del área arrastrable: item.draggable.constraints

Y finalmente establezca el tamaño en el tamaño del artículo: size: item .

Así es como se ve todo el código:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Ahora puede deslizar hacia la izquierda y hacia la derecha, y el elemento siempre volverá a su posición original.

Paso 3: Crear estado

A continuación, cree el estado para el elemento de la lista cuando se elimine. Simplemente lo moví fuera de la pantalla usando el eje x.

 item.states.a = x: -360

Paso 4: cambia el estado después de deslizar

Finalmente, tenemos que crear un disparador para iniciar la interacción. Cuando arrastramos el elemento al lado izquierdo de la pantalla, debería eliminarse. El código se verá así:

 item.onMove -> if item.x < -70 item.stateCycle("a")

En este caso, estamos usando una declaración "si". El código anterior básicamente dice, cuando movemos la capa del elemento más de 70 px, luego cambiamos el estado del elemento al estado 'a'. Puede leer acerca de las declaraciones if en la documentación de Framer Studio: https://framer.com/getstarted/programming/#conditional

Paso 5: Deshacer acción después de tocar

Casi hemos terminado con esta interacción. Lo único que queda es deshacer esta acción:

 item_bg.onTap -> item.stateCycle("default")

Debe estar familiarizado con este código del tutorial anterior.

Paso 6 (opcional): ajustar el tiempo de animación

Si lo desea, puede ajustar el tiempo de la animación:

 item.animationOptions = time: 0.75 curve: Spring

4. Cargador de botones

Esta es una interacción muy útil para acciones que requieren tiempos de carga o espera para el usuario. Cuando creamos esta interacción, aprenderá cómo administrar muchas animaciones que suceden una por una. Descarga el prototipo aquí: https://framer.cloud/FxmHN

Paso 1: Crear un prototipo en modo Diseño

Cree un botón simple con cuatro subcapas: una barra de progreso y tres íconos para diferentes estados. Diseñé mi botón con un ícono de carga visible, una barra de progreso en la parte inferior con un ancho de 0 y dos íconos ocultos más.

Paso 2: Agrega un evento

Todo este prototipo se puede hacer sin escribir una sola línea de código, simplemente usando las funciones de codificación automática de Framer.

Primero, agregue un evento. Activaremos toda la interacción con un toque en la capa del botón:

Este es el código que Framer escribió para ti:

 button.onTap (event, layer) ->

Paso 3: Diseñar animaciones

Usaremos las funciones de codificación automática de Framer para diseñar todas las animaciones:

He diseñado cuatro animaciones con diferentes tiempos:

• La primera animación está cambiando el ancho de la barra de progreso.
• El segundo es ocultar el ícono de carga con opacidad.
• El tercero gira y muestra el icono del cargador.
• El último muestra y escala el ícono de verificación.

Aquí está el código que Framer escribió para cada una de estas animaciones:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Paso 4: restablecer la animación de carga

Como habrás notado, no ocultamos el ícono del cargador después de que finaliza la animación. Para finalizar este prototipo, activa otra animación usando este evento: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Tire para actualizar

Casi todos los productos con una lista dentro utilizan este tipo de interacción. El usuario baja toda la lista para actualizarla. Es muy fácil de crear. Descarga el prototipo aquí: https://framer.cloud/DgMDw

Paso 1: Diseñe una lista simple con un icono de actualización

Podemos saltar directamente al modo de diseño. Necesitamos dos cosas: una lista y un icono de actualización. Lo crucial aquí es ocultar el ícono de actualización con opacidad y ponerlo en nuestra lista:

Paso 2: crear un componente de desplazamiento

Queremos que nuestra lista sea desplazable. Para hacer esto, use un componente de desplazamiento y agregue una capa de lista:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Paso 3: haz visible el icono de actualización

Crea un estado simple para el icono:

 icon.states.a = opacity: 1

Paso 4: Agrega un evento después de bajar

Nuestra lista se puede desplazar en este momento. Eso significa que cuando nos desplazamos hacia arriba o hacia abajo, todo el contenido del desplazamiento se mueve en el eje 'y'. Con este conocimiento, podemos crear un evento:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Nuevamente estamos usando una declaración "si". Si la lista se baja (se mueve en el eje Y) más de 180 px, activaremos una acción. En este caso, animaremos dos capas: la lista y el icono de actualización.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Estamos usando "animar" para mover la lista hacia abajo 210px y rotar el icono de actualización 360°.

Paso 5: restablecer todos los estados

El prototipo casi funciona, pero tenemos que restablecer todas las capas después de la animación de actualización. Para hacer esto, usaremos un evento después de que termine la animación:

 icon.onAnimationEnd ->

Estamos animando la rotación del icono de actualización a su posición original y, al usar el ciclo de estado, estamos restableciendo el estado de fondo de la lista y el icono:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

¡Eso es todo!

6. Interacción de arrastre

¿Alguna vez ha notado que mientras arrastra un elemento dentro de una aplicación, siempre sucede algo con el elemento en sí? A veces, el elemento se reduce, tal vez otros elementos se difuminan o la opacidad cambia. Aprendamos cómo crear este tipo de interacción. Descargue el prototipo de trabajo aquí: https://framer.cloud/YstiW

Paso 1: Diseñe una cuadrícula simple con mosaicos

Cree una cuadrícula de mosaicos y asegúrese de que estén dentro del elemento principal.

Paso 2: use el bucle "for" para apuntar a todos los mosaicos

" for loop" puede sonar aterrador, pero es realmente simple. Si no está familiarizado con los bucles for , primero puede leer un poco de información: https://framer.com/getstarted/programming/#loops-and-arrays

Usaremos el bucle for para apuntar a todos los mosaicos dentro de nuestra cuadrícula:

 for item in grid.subLayers

Con esta simple línea de código, apuntó a todas las capas dentro de la capa de cuadrícula.

Paso 3: haz que los mosaicos se puedan arrastrar

Haga que cada elemento dentro de la cuadrícula se pueda arrastrar:

 for item in grid.subLayers item.draggable = true

Paso 4: Diseña un estado de arrastre

Todos los elementos deben tener un estado mientras se arrastran. Debe comenzar desde el código, pero luego podrá editar este estado en el Editor de capas:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Paso 5: eventos de arrastre

Tenemos que crear eventos para desencadenar diferentes estados mientras se arrastra el elemento. El primer evento desencadenará una acción mientras comenzamos a arrastrar:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

this.bringToFront() para asegurarme de que el elemento siempre esté por encima de las otras capas.

El segundo activador restablecerá el estado del elemento:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

En este punto, tenemos un prototipo de trabajo.

Paso 6 (opcional): Juega con el tiempo

La interacción siempre ocurre a lo largo de una línea de tiempo. Es bueno ajustar la línea de tiempo para lograr un efecto perfecto:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Múltiples botones de "me gusta" (avanzado)

En este prototipo, utilizaremos técnicas más avanzadas para mostrarle una forma diferente de seleccionar capas en Framer Studio, lo que generará interacciones más receptivas en menos tiempo. Si no está familiarizado con la codificación básica, lo animo a leer este artículo primero: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Para esta interacción, omitiremos la parte de diseño y usaremos un prototipo que he creado específicamente para este artículo: https://framer.cloud/SZMCH

Paso 1: crear matrices

Eche un vistazo a la estructura de las capas dentro de Framer Studio:

Tenemos un "botón" dentro de una "fila" en el grupo "lista". Vamos a crear una interacción en las capas de los botones, por lo que tenemos que enfocarnos en ellas. Pero primero, tenemos que encontrar todas las capas de las filas y ponerlas dentro de una matriz:

 rows = list.children buttons = []

También he creado una matriz vacía para todas las capas de "botones": buttons = [] .

Paso 2: agregue una subcapa a la matriz

Comencemos desde el "bucle for":

 for i in rows buttons.push(i.children[0])

Para agregar capas a la matriz, usaremos: buttons.push() . Esto significa que estamos colocando la primera capa de cada grupo de "filas" dentro de una matriz.

Paso 3: Crear estado y evento

Ahora crearemos un estado para nuestros botones "Me gusta" y les agregaremos un evento mientras tocamos:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Puede utilizar esta técnica para recrear todos los prototipos anteriores y hacerlos más complejos.

Nota final

Cuando creas microinteracciones, te enfocas en los detalles más pequeños. Puedes crear animaciones desencadenadas por cualquier tipo de acción y hacerlas absolutamente perfectas. Tenga en cuenta que hay cientos de formas de crear el mismo prototipo, y debe utilizar el método que se adapte a sus habilidades y a las necesidades de los diseños de sus productos.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas