Tutorial en vídeo: exporta banners animados con Figma Motion a HTML, vídeo MP4 o GIF

Bannerify puede detectar las animaciones compatibles creadas con Figma Motion y ofrecerlas como animación de entrada Figma Motion. Tú decides qué capas la usan, igual que con cualquier otra animación de Bannerify.

La detección nunca sustituye automáticamente una animación de entrada de Bannerify que ya exista. Aplica Figma Motion a capas sueltas o usa las acciones por lotes de capas de Bannerify para aplicarla a varias capas a la vez.

Figma Motion es, por ahora, una API en beta. Figma puede cambiar su modelo de datos de Motion mientras la API esté en beta. Consulta la documentación de la API de Figma Motion para conocer el estado actual de la API de Figma.

Antes de empezar

• Añade una animación de Motion a una capa dentro del frame de tu banner en Figma.
• Asegúrate de que la capa aparece en la línea de tiempo de Bannerify. Si está dentro de un grupo, un componente u otra capa, incluye antes la capa anidada.
• Carga o actualiza el banner en Bannerify después de cambiar los fotogramas clave de Motion en Figma.

Aplicar el Motion detectado con un clic

Cuando Bannerify encuentra Motion compatible en capas que todavía no lo usan, aparece un mensaje Figma Motion detected encima de las líneas de tiempo de los banners.

Haz clic en Apply to All Banners (n Layers) para aplicar las pistas de Motion compatibles de cada capa apta en todos los frames de banner cargados en ese momento en Bannerify. El recuento incluye todas las capas de Motion aptas de las líneas de tiempo cargadas. Bannerify también activa Mirror Figma Motion Timings para que se usen de inmediato los desfases nativos. Las animaciones de salida y hover existentes no cambian, y después puedes desactivar el reflejo para recuperar los rangos de tiempo editables de Bannerify.

Aplicar Motion a grupos anidados y capas con pulso

Despliega cada grupo que contenga elementos animados en el panel de capas anidadas. Si el grupo exterior también tiene su propio Motion, activa Keep Parent Animatable para ese grupo, de modo que su animación siga disponible junto a las animaciones de sus elementos.

Después de cerrar el panel, haz clic en Apply to All Banners en el aviso Figma Motion detected. Los elementos que acabas de mostrar necesitan este paso aunque Mirror Figma Motion Timings ya esté activado. Por ejemplo, las capas con pulso pueden aparecer en la línea de tiempo pero quedarse estáticas hasta que se apliquen sus pistas de escala y opacidad detectadas.

Aplicar Figma Motion a varias capas

1. Abre el frame del banner en Bannerify y actualízalo si hace falta.
2. Marca las casillas de las capas que quieres actualizar, o usa Quick Select Layers.
3. En Batch Layer Actions, abre el menú de animación Entry.
4. Elige Apply Each Layer's Figma Motion en el grupo Figma Motion.
5. Define los tiempos de entrada de Bannerify que quieras y haz clic en Apply Animations to Selected Layers.

Bannerify aplica los fotogramas clave de Motion detectados de cada capa. Si tu selección también contiene capas sin valores de Motion compatibles, esas capas conservan su animación de entrada actual, y Bannerify te indica cuántas capas seleccionadas son aptas antes de aplicarla.

Aplicar Figma Motion a una capa

1. Busca la capa animada en la línea de tiempo de Bannerify.
2. Abre su menú Entry Animation.
3. Selecciona la animación detectada en el grupo Figma Motion.

Bannerify combina todas las pistas de Motion compatibles de la capa en una única animación de entrada. Por ejemplo, la posición, la opacidad, la escala y la rotación pueden animarse a la vez y conservar cada una sus propios fotogramas clave y su easing.

Reflejar la línea de tiempo de Figma Motion

Cuando al menos una capa usa su animación de entrada de Figma Motion, Bannerify muestra Mirror Figma Motion Timings encima de la línea de tiempo. La etiqueta incluye el número de capas de Motion que actualizará, por ejemplo Mirror Figma Motion Timings (5 Layers).

• La acción de un clic Apply to All Banners lo activa automáticamente.
• Déjalo desactivado para colocar o cambiar el tamaño de las barras de animación de Motion con los controles de tiempo normales de Bannerify.
• Actívalo para usar los desfases nativos de inicio y fin de Figma de cada animación de Motion seleccionada. Bannerify también ajusta la línea de tiempo general para que quepa la línea de tiempo de Motion seleccionada más larga.
• Vuelve a desactivarlo para recuperar los rangos de tiempo editables de Bannerify que usabas antes de reflejar.

El interruptor de reflejo solo sincroniza los tiempos de la línea de tiempo. No aplica Figma Motion a más capas ni sustituye otras animaciones de entrada. La acción de un clic aplica las capas aptas antes de activarlo; si quieres elegir con más detalle, usa el flujo por capa o por lotes y controla el reflejo por separado.

En los banners que ya están animados en Figma, usa Apply to All Banners para obtener en un solo paso el resultado más parecido a la línea de tiempo nativa de Figma. Bannerify aplica todas las capas cargadas aptas y activa automáticamente Mirror Figma Motion Timings. Su ajuste de línea de tiempo general usa segundos enteros, así que, cuando hace falta, la línea de tiempo nativa más larga se redondea al alza hasta el siguiente segundo entero.

Puedes seguir añadiendo una animación de salida de Bannerify aparte. Para que la transición quede limpia, coloca la animación de salida después de que termine la animación de entrada de Figma Motion.

Propiedades de Motion compatibles

Por ahora, Bannerify reproduce estas propiedades nativas de Motion:

• Posición en los ejes X e Y
• Opacidad
• Escala en los ejes X e Y
• Rotación
• Radios de esquina uniformes o individuales en capas de rectángulo con relleno sólido alineadas con los ejes horizontal y vertical, incluidas rotaciones de 90 grados sin trazos, efectos, máscaras ni suavizado de esquinas visibles

Los radios de esquina animados se reproducen en la vista previa y en las exportaciones HTML, GIF y de vídeo. Los rectángulos con relleno de imagen, los frames, los grupos y los rectángulos con trazos, efectos o suavizado de esquinas siguen mostrando un aviso de compatibilidad del radio de esquina.

Cada propiedad conserva sus propios fotogramas clave, tiempos y easing dentro de la animación combinada de Bannerify. Bannerify convierte el easing cubic-bezier y spring compatible al formato que usan su vista previa y sus exportaciones. Puede haber diferencias visuales muy pequeñas, sobre todo con el movimiento spring.

Si una animación mezcla propiedades compatibles e incompatibles, Bannerify reproduce las compatibles e indica las que por ahora no puede exportar. Una capa sin propiedades de Motion compatibles no mostrará la opción Figma Motion.

El aviso de la línea de tiempo indica las propiedades incompatibles, como el tamaño, el radio de esquina en tipos o aspectos de capa no compatibles, el espaciado y el relleno de Auto Layout, el grosor del trazo o del borde, el recorte de trazados, los rellenos, los trazos o los efectos. Las propiedades indicadas no se animarán en el archivo exportado.

Reutilizar Motion en un banner girado

Puedes girar 90 grados un frame de banner vertical para usarlo en horizontal. Bannerify sigue la dirección girada de sus pistas de posición de Motion y el orden de las esquinas de los rectángulos compatibles. Actualiza el banner después de girarlo para que la ilustración y las pistas de Motion se vuelvan a cargar a la vez.

Al girar el frame, también gira su ilustración. Ajusta en Figma los textos y las imágenes si deben quedar derechos y, después, comprueba la animación en la vista previa de Bannerify y en el archivo exportado. La animación del radio de esquina sigue necesitando un rectángulo compatible alineado con los ejes horizontal y vertical; los rectángulos girados en diagonal muestran un aviso de compatibilidad.

Actualizar después de editar en Figma

Después de cambiar una animación de Motion en Figma, haz clic en Refresh All Banners en Bannerify, o usa Refresh Banner Layers en el banner afectado. Bannerify detecta los fotogramas clave más recientes. Las capas que ya usan Figma Motion siguen activadas, mientras que las capas animadas nuevas no cambian hasta que les apliques Figma Motion.

Vista previa y exportación

Las animaciones de Figma Motion funcionan con los controles Play y Replay de Bannerify y se pueden recorrer en cualquier punto de la línea de tiempo. Bannerify captura la ilustración de Motion compatible con independencia de la posición actual del cabezal de reproducción de Figma, incluidas las capas que empiezan con escala u opacidad cero. La escala y la rotación conservan el centro de la capa original de Figma cuando la ilustración exportada tiene otros límites, como un texto o una ilustración con sombras.

También se incluyen al exportar a:

• HTML con CSS o GSAP
• GIF
• MP4

Antes de exportar, revisa el aviso Figma Motion detected que hay encima de la línea de tiempo. Te indica cuándo:

• Se ha detectado Motion compatible, pero no se ha aplicado como animación de entrada de Bannerify de la capa.
• Una capa de Motion contiene propiedades que Bannerify no exporta por ahora.
• Una capa de Motion solo contiene propiedades incompatibles y todavía no se puede aplicar.

Puedes aplicar todo el Motion compatible sin aplicar directamente desde el aviso de la línea de tiempo.

Solución de problemas

Faltan algunas animaciones de Figma Motion en la exportación

1. Busca capas sin aplicar en el aviso Figma Motion detected que hay encima de la línea de tiempo.
2. Haz clic en Apply to All Banners, o selecciona Figma Motion en el menú Entry Animation de cada capa afectada.
3. Revisa los nombres de las propiedades incompatibles que aparecen en el aviso.
4. Despliega las capas animadas anidadas en la línea de tiempo de Bannerify y actualiza el banner.
5. Comprueba que Mirror Figma Motion Timings sigue activado si los desfases exportados deben coincidir con la línea de tiempo de Motion de Figma.

Figma Motion no aparece en el menú de animaciones

• Comprueba que la capa tiene al menos una propiedad de Motion compatible.
• Si la capa está anidada, asegúrate de que está incluida en la línea de tiempo de Bannerify.
• Actualiza el banner después de añadir o editar la animación de Motion en Figma.
• En las acciones por lotes, asegúrate de que la selección actual contiene al menos una capa con valores de Motion detectados.

Los tiempos no coinciden con Figma Motion

Primero, aplica Figma Motion a las capas que quieres usar. Después, activa Mirror Figma Motion Timings encima de la línea de tiempo para usar sus desfases nativos de inicio y fin en lugar de las posiciones personalizadas de las barras de animación de Bannerify.

La animación se ve ligeramente distinta

Comprueba que todas las propiedades animadas son compatibles. El easing cubic-bezier se reproduce directamente siempre que es posible, mientras que el spring y las pistas con easing independiente se convierten para los formatos de vista previa y exportación de Bannerify y pueden tener diferencias muy pequeñas.