Animá tus prototipos con Smart Animate en Figma

Giovanni Pino
Oct 27, 2020 · 6 min read
Image for post
Image for post

Click here to view this post in English

Cuando quiero resolver una animación o interacción rápidamente, muchas veces la solución más directa es abrir After Effects y ponerme a trabajar.

Pero a veces quiero simplemente tener una interacción simple y fácilmente iterable directamente en mi prototipo, y gracias a Smart Animate en Figma, esto es bastante sencillo!

Hoy te voy a mostrar cómo podés resolver tus animaciones de interacción con sólo cuatro frames, haciendo uso de todas características integradas en Figma.

Conceptos básicos de Smart Animate

Smart Animate es uno de los tipos de animación que podemos elegir cuando estamos configurando nuestras interacciones en el modo Prototype.

Image for post
Image for post

Smart Animate realiza un seguimiento de los valores de Escala, Posición, Opacidad, Rotación y Color de Relleno de todas las capas que tengan el mismo nombre y jerarquía en tus distintos frames.

Todo lo que tenemos que hacer es realizar los cambios que deseemos entre un frame y otro, activar Smart Animate, y Figma hará su magia!

Image for post
Image for post
Escala
Image for post
Image for post
Posición
Image for post
Image for post
Opacidad
Image for post
Image for post
Rotación
Image for post
Image for post
Color de Relleno

Podés revisar cuáles capas están siendo consideradas para Smart Animate pasando tu cursor encima de ellas, tendrían que iluminarse en los otros frames en los que se encuentren.

Image for post
Image for post

La forma más fácil de asegurarse que los nombres de las capas sean iguales es duplicar el frame una vez que hayamos completado nuestra idea general.

Hacé click aquí si querés aprender Smart Animate más a fondo (Inglés).

Ahora que sabemos qué es Smart Animate y cómo funciona, empecemos a hacer nuestra primeras animaciones en Figma!

Empecemos!

Image for post
Image for post

Esta es una aplicación basada en mapas simple en la que podemos configurar una ruta y algunos puntos de control para mantenerte al día con tus rutinas de ciclismo.

Hacé click aquí para encontrar el archivo Figma base para este tutorial

Nuestro objetivo es agregar una animación simple de la bicicleta completando la ruta y pasando los distintos puntos de control a medida que llega a su destino.

Vamos a empezar duplicando nuestro frame inicial: mantenemos apretado ALT y lo arrastramos hacia el costado (también podemos duplicar usando CTRL+D).

Image for post
Image for post

Una vez hayamos duplicado nuestro frame, haremos click en las capas que queramos animar y realizaremos los cambios correspondientes.

Image for post
Image for post

Aquí moveremos nuestro ícono de bicicleta hacia la primera esquina, cambiaremos el texto de nuestro contador de distancia, el color de nuestro ícono de punto de control y el color de fondo de nuestro botón de navegación.

Una vez que terminemos nuestros cambios deseados, vamos a presionar el botón de Prototype (Prototipo) en la esquina superior derecha de Figma, así podemos empezar a crear la sección inicial de nuestra animación.

Image for post
Image for post

En este caso, queremos que nuestro botón de “Start Navigation” sea el inicio de la animación, así que haremos click en la capa del botón y la arrastraremos hacia nuestro segundo frame.

Image for post
Image for post

Aparecerá el menú Interaction Details (Detalles de interacción) y podremos cambiar qué hará el botón y cómo lo va a hacer.

Image for post
Image for post
Image for post
Image for post

Para el primer frame, usaremos la interacción “On Tap” ya que queremos que el botón nos navegue al segundo frame cuando lo toquemos.

Luego, en Animación, elegiremos “Smart Animate”, esto nos asegurará que Smart Animate sea la transición utilizada para esta interacción.

Finalmente estableceremos la duración en 2000 milisegundos (2 segundos) porque queremos que la animación sea lo suficientemente larga para no distraer a nuestros usuarios.

También vamos a cambiar el easing (suavizado) a “Ease In and Out”, pero sentite libre de usar distintas curvas de suavizado (como también crear tu propia curva!) así lográs que tu animación sea justo como vos la querés.

Ahora que tenemos nuestros dos primeros frames listos podemos probar nuestra animación!

Para esto presionaremos el botón de Play en la esquina superior derecha, para presentar nuestro prototipo.

Image for post
Image for post

Podremos ver que al hacer click en nuestro botón de navegación, nuestra animación comienza a reproducirse, y nuestras capas cambian a los valores que elegimos!

Image for post
Image for post

Felicitaciones, lograste hacer una animación simple en dos frames! Ahora vas a poder usar Smart Animate para tus proyectos con facilidad.

Si lo que necesitabas era una animación simple en dos frames, felicitaciones! Tendrías que poder usar Smart Animate para tus proyectos con facilidad.

Lo genial es que gracias a “After Delay”, podemos hacer nuestras animaciones aún más interesantes y complejas!

Lo que haremos ahora será completar el camino de nuestra bicicleta usando 2 frames más y con la ayuda de After Delay.

Usando After Delay para concatenar varios frames seguidos.

Image for post
Image for post

Luego, en la sección de Prototipo, haremos click en nuestro segundo frame y arrastraremos su interacción hacia el tercer frame, y después agregaremos la interacción “After Delay”.

Image for post
Image for post

Esta interacción esperará una cantidad determinada de milisegundos, y nos navegará hacia el frame elegido.

Image for post
Image for post

Para este frame utilizaremos 200 milisegundos (0.2 segundos).

Elegiremos también Smart Animate, con una duración de animación de 1750ms (1.75 segundso).

Ahora podemos probar nuestro prototipo nuevamente!
Empezará en nuestro primer frame, así que tendremos que tocar el botón para que empiece la animación.

Image for post
Image for post

Como podemos ver, la interacción con el botón nos llevará al segundo frame, y una vez que se completa esa animación, espera 0.2 segundos y nos lleva al tercer frame!

Ahora lo único que nos queda hacer es realizar los mismos cambios en un cuarto frame, y tendremos una animación completa lista para prototipar y testear con nuestros usuarios!

Image for post
Image for post

Como un extra, vamos también a cambiar nuestro botón en el último frame a un “Reset Route” para que podamos reiniciar nuestra animación cuantas veces queramos.

Image for post
Image for post
Image for post
Image for post

Ahora podemos hacer una última prueba del prototipo para ver lo que logramos hoy.

Image for post
Image for post

Podemos ver que apenas apretamos nuestro botón, la animación inicia, y pasa por cada frame consecutivamente gracias al poder de After Delay!

Hacé click aquí para encontrar el archivo final para probarlo y divertirte cambiando los valores!

Gracias por ver mi primer post, y espero te haya sido útil!

UXuarios

Diseño en español

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store