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.

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.