Tutorial en vídeo: añade animaciones personalizadas a tus diseños de banners en Figma
En este vídeo verás cómo añadir animaciones personalizadas con fotogramas clave a tus banners con el plugin Bannerify.
Abrir el panel de animaciones personalizadas
Para abrir el panel de animaciones personalizadas, haz clic en el botón Custom Animations de la cabecera principal de Bannerify. Se abrirá el panel de animaciones personalizadas, donde podrás empezar a añadir tu propia animación con fotogramas clave.
Crear fotogramas clave de animaciones personalizadas
Al abrir el panel de animaciones, verás 2 fotogramas clave: el primero (0 %) y el último (100 %). Se añaden de forma predeterminada y no se pueden eliminar, porque una animación con fotogramas clave necesita al menos un fotograma desde el que empezar y un fotograma clave que indique dónde termina.
Seleccionar un fotograma clave para editarlo
Puedes cambiar al instante entre fotogramas clave haciendo clic en uno de ellos en la pista Keyframes, cerca de la parte superior del panel de animaciones personalizadas. Al hacer clic en un fotograma clave, puedes editar sus propiedades.
Insertar nuevos fotogramas clave
Para añadir un fotograma clave entre los puntos de inicio y fin predeterminados, escribe su porcentaje (por ejemplo, 50) en el campo Add at y selecciona Add.
Cada fotograma clave nuevo que añadas se crea automáticamente con las mismas propiedades que el fotograma clave seleccionado en ese momento; así puedes ajustar las propiedades a partir de otros fotogramas clave que ya hayas añadido. El fotograma clave recién añadido también se selecciona automáticamente al hacer clic en el botón Add.
Editar las propiedades de los fotogramas clave
Puedes editar 5 propiedades distintas en cualquiera de los fotogramas clave de tu animación. Cualquier diferencia de propiedades entre tus fotogramas clave se anima automáticamente. Por ejemplo, si defines la escala en 2x en el fotograma clave 0 % y en 1x en el fotograma clave 100 %, se crea automáticamente una animación que "encoge" el elemento.
- La propiedad X anima la posición horizontal del elemento (en píxeles).
- La propiedad Y anima la posición vertical del elemento (en píxeles).
- La propiedad Opacity anima el porcentaje de transparencia del elemento.
- La propiedad Rotate anima los grados de rotación del elemento.
- La propiedad Scale anima el tamaño del elemento.
Usar transformaciones X/Y relativas basadas en porcentajes
Si prefieres definir la posición X/Y en función de un porcentaje del elemento animado, puedes cambiar las unidades de Position de px a % en las propiedades del fotograma clave. Así podrás definir los valores X/Y en porcentaje (en lugar de en píxeles).
Al aplicar un valor de transformación X/Y en porcentaje, el elemento al que se aplica la animación se anima automáticamente a partir de su posición, aplicando la transformación porcentual a su tamaño. Por ejemplo, un valor de transformación X de 10% en un fotograma clave desplaza 10px una capa de 100px de ancho. Si aplicas esa misma animación con un valor de transformación X de 10% a una capa de 200px de ancho, la capa se desplaza 20px.
Dividir la escala en opciones de escala X/Y
Si prefieres definir la escala de cada eje X/Y por separado, puedes cambiar el modo de Scale de Uniform a X / Y en las propiedades del fotograma clave. Así podrás definir los valores de "escala" horizontal y vertical de tus fotogramas clave de forma independiente, en lugar de escalar ambos por igual para una animación de ampliación o reducción uniforme.
Este ajuste te resultará útil si necesitas animar el ancho o el alto de una capa sin que afecte también al otro eje.
Usar la vista previa en directo para ver tu animación
Para ver cómo queda tu animación según los fotogramas clave y las propiedades que has cambiado, mira el área Live preview, que está junto a las propiedades del fotograma clave. Cualquier cambio que hagas en los fotogramas clave, las propiedades o el easing se muestra automáticamente en la vista previa en directo.
Puedes ajustar la velocidad de reproducción de la vista previa en directo. Si quieres ver cómo queda tu animación personalizada a distintas velocidades, puedes cambiar la velocidad de reproducción de la vista previa en directo arrastrando el control deslizante Duration que hay debajo para cambiar cuántos segundos dura cada bucle de la vista previa.
Copiar y pegar propiedades de fotogramas clave
Para copiar y pegar propiedades de un fotograma clave a otro, selecciona primero el fotograma clave del que quieres copiar las propiedades y haz clic en el botón Copy. Después, selecciona el fotograma clave en el que quieres pegarlas y haz clic en el botón Paste para pegar las propiedades copiadas en ese fotograma clave. También puedes hacer clic con el botón derecho en un fotograma clave y elegir Copy Properties o Paste Properties.
Las propiedades copiadas solo están disponibles hasta que cierras el panel. Puedes copiar y pegar propiedades entre cualquier fotograma clave de tus animaciones mientras el panel de animaciones personalizadas está abierto, pero cuando lo cierres ya no podrás pegar las propiedades copiadas.
Eliminar fotogramas clave
Para eliminar un fotograma clave, haz clic en cualquier fotograma clave de la pista Keyframes para seleccionarlo y luego haz clic en el botón Delete (o haz clic con el botón derecho en el fotograma clave y elige Delete Keyframe) para eliminarlo de la línea de tiempo. Ten en cuenta que no puedes eliminar los fotogramas clave 0% y 100%, porque son fotogramas clave predeterminados que necesita la línea de tiempo de tu animación.
Después de eliminar cualquier fotograma clave, el fotograma clave 0% se vuelve a seleccionar automáticamente como fotograma clave activo para editar.
Al eliminar un fotograma clave, se elimina para siempre. Cuando eliminas cualquiera de tus fotogramas clave, se quita para siempre de la línea de tiempo y no podrás deshacer la eliminación. Aun así, puedes usar Copy para copiar las propiedades de un fotograma clave, eliminarlo y pegar esas propiedades en otro fotograma clave mientras sigues editando la línea de tiempo de tu animación.
Definir el easing de la animación
Puedes elegir el tipo de easing que necesita tu animación con una opción del menú Easing. El easing se aplica automáticamente a toda la línea de tiempo y actualiza el área Live preview, para que veas cómo el easing seleccionado cambia el movimiento de tu animación con fotogramas clave.
Puedes elegir entre estas opciones de easing:
- Ease (predeterminada)
- Ease out
- Ease in
- In and out
- Linear
- Gentle
- Overshoot
- Anticipate
Definir un valor de easing Cubic Bezier personalizado
Tutorial en vídeo: añade easing cubic-bezier a animaciones de banners en Figma
En este vídeo verás cómo añadir easing cubic-bezier personalizado a animaciones de banners en Figma con el plugin Bannerify.
Para usar tu propia curva, arrastra los tiradores de la curva en el menú Easing, o pega un valor cubic-bezier de CSS válido (por ejemplo, cubic-bezier(0.65,0.05,0.36,1);) en el campo que hay debajo de los ajustes predefinidos. Puedes generar una curva cubic-bezier personalizada con un sitio como https://easings.co/ o con cualquier otro servicio web que prefieras para generar curvas cubic-bezier de CSS personalizadas.
Definir el punto de origen de la animación
De forma predeterminada, el origen de todas tus animaciones personalizadas es Center y Center en los ejes X/Y, pero puedes cambiarlo haciendo clic en uno de los nueve puntos de la cuadrícula Origin point, que combina Top, Center o Bottom en el eje vertical con Left, Center o Right en el eje horizontal.
Cambiar el origen de la animación afecta al punto en el que la animación queda "fijada" en la capa. Por ejemplo, si defines el origen en Top y Left, ese será el punto de la capa sobre el que gira una animación de rotación, o el punto desde el que la capa se amplía o se reduce.
Guardar tu nueva animación personalizada
Para guardar tu nueva animación, ponle un nombre en el campo de texto Animation name y haz clic en el botón Add New Animation.
Las animaciones personalizadas solo se guardan y están disponibles en el archivo de Figma actual. Al guardar una animación, queda disponible en cualquier página de tu archivo de Figma actual. Sin embargo, tus animaciones guardadas no aparecerán si ejecutas Bannerify en un archivo de Figma distinto o nuevo, porque las animaciones se guardan directamente en el archivo de Figma y no se pueden pasar a otro archivo. Tendrás que volver a crear las animaciones en cada archivo de Figma nuevo. Otra opción es crear una página nueva en el archivo de Figma actual, donde seguirás teniendo disponibles las animaciones personalizadas guardadas en este archivo.
Usar tus animaciones personalizadas guardadas
Cuando hayas guardado al menos una animación personalizada, podrás usarla en tus banners haciendo clic en los selectores de animaciones de entrada y animaciones de salida de la línea de tiempo de tus capas; verás un grupo nuevo en las opciones del selector llamado Custom Animations, con todas las animaciones personalizadas que has guardado.
Aplicar animaciones personalizadas de forma masiva Igual que con las demás animaciones predefinidas, también puedes aplicar tu animación personalizada a varias capas a la vez con la función de aplicación masiva.
Actualizar tus animaciones guardadas
Para actualizar una animación personalizada que guardaste antes, elige la animación que quieres actualizar en el menú Saved animations; se cargarán la animación guardada y sus fotogramas clave en el panel de animaciones personalizadas.
Cuando hayas elegido la animación guardada, puedes editar sus fotogramas clave y propiedades como necesites. Cuando estés conforme con los cambios, haz clic en el botón Update Saved Animation para guardarlos y sobrescribir los fotogramas clave anteriores de la animación.
Ten en cuenta que, al actualizar una animación guardada, los fotogramas clave actualizados se aplican automáticamente a todas las capas de tus banners que ya usaban la animación personalizada que acabas de actualizar.
Crear una animación nueva a partir de una animación guardada. Si quieres cargar una animación guardada y modificarla sin "sobrescribir" la versión guardada, puedes crear una animación nueva a partir de ella escribiendo un nuevo Animation name y haciendo clic en el botón Add New Animation.
Eliminar tus animaciones guardadas
Para eliminar una animación, selecciona cualquier opción de Saved animations para cargarla y luego haz clic en el botón Delete Saved Animation para eliminar la animación guardada.
Al eliminar una animación guardada, se elimina para siempre y se quita de tus capas. Cuando eliminas cualquiera de tus animaciones guardadas, se quita para siempre de la lista Saved animations. Las capas de tus banners que usaban la animación personalizada eliminada vuelven a quedar sin animación.