En esta entrada, te mostraremos cómo exportar animaciones Lottie desde Figma, para luego integrarlas en tu sitio web sin sacrificar el rendimiento. Como mencionamos en nuestro artículo anterior, Animaciones Lottie desde Blender, una de las principales ventajas de usar animaciones Lottie es que se exportan en archivos JSON, los cuales tienen un tamaño realmente pequeño.
Como desarrolladores de videojuegos, tener un sitio web atractivo es fundamental para dar a conocer nuestros productos. Incluir animaciones puede hacer que nuestro sitio sea más dinámico y cautivador, invitando a los usuarios a permanecer más tiempo. Esto no sólo mejora la experiencia de usuario, sino que también contribuye a un mejor posicionamiento en los motores de búsqueda.
Exportando Animaciones Lottie desde Figma
Figma es un editor de gráficos vectoriales y una herramienta de generación de prototipos muy útil para diseñar interfaces de sitios web y aplicaciones. Es una herramienta versátil que se puede usar directamente en la nube, y con solo registrarte, ya puedes comenzar a aprovechar todas sus funcionalidades.
Además, Figma cuenta con una comunidad activa que desarrolla una variedad de plugins útiles para cualquier proceso de creación. De hecho, utilizaremos uno de estos en la exportación de nuestra animación.
Sin embargo, antes de dar inicio, hay ciertos aspectos que deben ser tomados en consideración.
Consideraciones
Cada movimiento en un Frame distinto
Un frame en Figma es un marco de trabajo donde colocamos todos los elementos que conforman nuestra interfaz, y además funciona como un contenedor para nuestras animaciones de prototipos.
Figma ofrece frames predefinidos con tamaños para distintos dispositivos, desde móviles hasta desktops y relojes inteligentes, así como para publicaciones y headers de redes sociales.
En nuestro caso, utilizamos un tamaño de Frame personalizado y partimos de una animación muy sencilla, en la que colocamos cada posición de nuestro «Kirby» en un frame diferente.
Elementos Consistentes
Es crucial que todos los elementos dentro de cada Frame sean consistentes. Aunque puedan sufrir transformaciones o cambios de posición, deben ser los mismos en número y nombre.
Pasos para la Exportación
1. Nombrar el flujo de la animación
Una vez creados todos los Frames necesarios para la animación, estos deberán ser conectados mediante interacciones. Estas interacciones representan lo que los usuarios harían para pasar al siguiente frame, como un clic, hover o tap, entre otras acciones.
En tal sentido y a fin de definir dichas acciones, será necesario seleccionar la pestaña Prototype en la columna derecha de Figma.
Luego, con el primer frame previamente seleccionado, se deberá hacer clic en el botón «+» junto al título Flow Starting Point. De esta forma, aparecerá un campo para nombrar el flujo; se puede dejar el nombre predeterminado «Flow 1» o cambiarlo. En nuestro caso, le hemos llamado «Start».
2. Definir el flujo de la animación
Ahora al regresar al Frame 1 dentro del canvas de Figma, notaremos que este posee un pequeño botón redondo de color blanco con un signo + en el centro. Hacemos clic en él y arrastramos la flecha al siguiente frame de la animación, configurando la interacción a continuación:
- Disparador: Como lo que nos interesa es exportar la animación en formato JSON, dejaremos el valor que trae por defecto: On click.
- Acción: Se deja seleccionada la opción Navigate to (la misma se colocó de forma automática al arrastrar la flecha). Ya que; en definitiva, iremos al siguiente Frame.
- Transición: Esta opción hace referencia a cómo se hará la transición entre nuestro primer frame y el siguiente. Elegiremos Smart Animate con una duración de 200ms y la opción Ease in and out, para que se vea de forma fluida. Esto dependerá del tipo de animación que se esté haciendo.
3. Repetir el proceso
Simplemente se repite el paso anterior con cada Frame, incluyendo la conexión del último frame con el primero (si es que se desea un bucle).
Un punto a tener en consideración es que si no se desea hacer ningún cambio en las conexiones posteriores, los valores de la conexión anterior quedarán establecidos por defecto, con lo cual sólo bastará con conectar un frame a otro.
4. Exportar Animación Lottie
Una vez definidas las interacciones entre todos los Frames, hacemos click derecho en el canvas de Figma, seleccionando la opción Plugins y posteriormente la opción Manage Plugins.
En la ventana desplegada, escribiremos en el buscador “LottieFiles” y seleccionaremos la opción desplegada con el ícono de Lottie
Ya en la ventana del plugin, seleccionamos la pestaña Export to Lottie, y seleccionamos nuestro flow.
Verificamos la preview de nuestra animación, y ajustamos el fondo y velocidad de la animación, en caso de considerarlo necesario. Finalmente, hacemos clic en el botón Save to Workspace.
Se desplegará la opción para crear una cuenta en LottieFiles o iniciar sesión.
Iniciamos sesión o creamos una cuenta en LottieFiles. Una vez registrados, otorgamos acceso a Figma.
Regresamos a Figma, y guardamos la animación en nuestro espacio de trabajo en LottieFiles.
5. Exportación de Archivo JSON
Nos dirigimos a nuestro perfil de LottieFiles, abrimos la carpeta correspondiente y allí deberá estar la animación recién agregada.
Al hacer click en la animación, navegaremos a una nueva ventana donde tendremos la opción de descargarla como JSON (lista para ser incluida en nuestro sitio web).
Y eso es todo, siguiendo estos sencillos pasos, se pueden crear animaciones más complejas y creativas utilizando Figma, teniendo como principal ventaja que se puede exportar fácilmente como Animación Lottie a través del complemento proporcionado por el equipo de LottieFiles.
Esperamos que este artículo te sea de gran utilidad.
¡Gracias por leernos, hasta la próxima entrega!
