Hacé click aquí para ver este post en Español

Most times for me, the best way to get an animation or interaction done fast is to boot up After Effects and get right into business.

But sometimes you just want to have a simple and easily iterable interaction right in your prototype, and thanks to Smart Animate on Figma, this is actually pretty straightforward!

Today I’ll show you how you can solve an interaction animation with just four frames, by making use of all built-in features of Figma.

Smart Animate Basics

Before getting our hands dirty, we’ll need to go over some of…

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

Antes de poner las manos a la obra, veamos algunos conceptos básicos respecto a Smart Animate en Figma.


Giovanni Pino

UX/UI Designer | Motion Graphics https://www.behance.net/giopino

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