Usa Figma Motion Export en la pestaña GIF de TinyImage cuando tu animación ya esté creada con Figma Motion. Este flujo de trabajo usa el renderizador de animaciones nativo de Figma en lugar de reconstruir la animación a partir de fotogramas fijos separados.
Tutorial en vídeo: exportar en bloque capas de Figma Motion a GIF y vídeo MP4
Este vídeo muestra cómo exportar en bloque animaciones de Figma Motion como GIF o vídeos MP4 comprimidos con TinyImage.
Seleccionar la animación de Motion
En un archivo de Figma Design, selecciona una de estas opciones:
- El frame de primer nivel que contiene la animación de Motion.
- Cualquier capa animada dentro de ese frame de primer nivel.
Abre TinyImage, selecciona GIF y, después, Figma Motion Export. TinyImage asocia las selecciones anidadas a los frames de Motion de primer nivel que las contienen y marca cada animación detectada en la lista de exportación.
Buscar animaciones de Motion en la página
Si la selección actual no contiene ninguna animación de Motion, TinyImage revisa automáticamente la página actual y muestra las animaciones de Motion que encuentre en frames de primer nivel. Usa las casillas para elegir una o varias animaciones que exportar. Todas las animaciones están marcadas de forma predeterminada, y la casilla que hay encima de la lista selecciona o desmarca todos los frames.
TinyImage guarda esta lista en caché mientras el plugin sigue en la misma página. Selecciona Rescan this page después de añadir una animación de Motion o de cambiar qué frames contienen capas animadas. Para encontrar una animación en otra página, cambia antes a esa página de Figma; TinyImage no analiza todas las páginas del archivo.
Revisar los frames seleccionados
TinyImage muestra una miniatura estática junto a cada frame de Motion de la lista de exportación. El icono del frame te lleva a esa animación en el lienzo de Figma sin cambiar qué animaciones están marcadas para exportar.
Estas miniaturas te ayudan a confirmar la lista de exportación sin renderizar ninguna animación, abrir la pestaña Video Export de Figma ni descargar un archivo de vista previa.
Configurar la exportación
Elige un formato de salida en el menú que hay junto al botón de exportación:
- Animated GIF
- Animated PNG (APNG)
- Animated WebP
- MP4 Video
- WebM Video
Define los fotogramas por segundo y el tamaño de salida. Los mismos ajustes se aplican a todas las animaciones marcadas. El valor de Size es una escala, así que los frames pueden mantener dimensiones en píxeles distintas dentro de la misma exportación en bloque. GIF, APNG y WebP animado también permiten elegir entre reproducción en bucle continuo o una sola vez. MP4 y WebM incluyen, en su lugar, los ajustes predefinidos de calidad Low, Medium y High.
En las exportaciones GIF, elige la compresión que mejor se adapte a lo que necesitas:
- No compression deja el GIF de Figma sin cambios, salvo que reduzcas el número de colores.
- Lossless compression optimiza los fotogramas y la estructura del archivo GIF sin compresión de píxeles con pérdida.
- Balanced compression usa una compresión con pérdida ligera (nivel 40) para un ahorro moderado con poco riesgo de artefactos visibles.
- Strong compression usa una compresión con pérdida más agresiva (nivel 80), que puede reducir más el peso, pero puede generar artefactos visibles.
- Maximum compression usa la compresión con pérdida más agresiva (nivel 140) para obtener el archivo previsiblemente más ligero, con el mayor riesgo de bandas y artefactos.
Elige 256 colors para mantener el límite de color original de Figma, o redúcelo a 128 colors, 64 colors o 32 colors. Reducir la paleta es independiente del ajuste predefinido de compresión, así que una paleta más pequeña puede cambiar los colores o añadir bandas incluso con Lossless compression seleccionado.
Activa Size Target e introduce un peso máximo en KB cuando el GIF exportado deba respetar un límite de subida estricto. TinyImage prueba automáticamente distintos niveles de pérdida y paletas de 256, 128, 64 y 32 colores, y se queda con el resultado probado menos agresivo que cumpla el límite. Mientras hay un objetivo activo, el campo de peso objetivo sustituye a los controles manuales de compresión y número de colores.
Si ninguno de los ajustes probados alcanza el objetivo, TinyImage prepara el resultado válido más ligero que haya encontrado e indica su peso antes de descargarlo. Puedes reducirlo más si disminuyes el tamaño de exportación de Motion, los fotogramas por segundo o la duración de la animación.
Con los ajustes predeterminados se exporta el GIF nativo de Figma sin cambios. Cuando activas una compresión adicional, TinyImage solo usa el resultado optimizado si pesa menos que el archivo original de Figma. Si la optimización falla o aumenta el peso del archivo, TinyImage exporta de forma segura el GIF original.
Figma limita las exportaciones de Motion del plan Starter a 1920 × 1080 y 30 FPS. TinyImage prueba primero la exportación solicitada para no reducir el resultado de los planes de pago. Si Figma rechaza una solicitud por encima de ese límite, TinyImage reintenta automáticamente a partir de una copia temporal ajustada a 1920 × 1080 y limita el reintento a 30 FPS. La copia temporal se elimina después del renderizado y el frame original no cambia. Una notificación azul indica las dimensiones y los fotogramas por segundo exportados.
Figma renderiza directamente los archivos GIF, MP4 y WebM. Para APNG y WebP animado, TinyImage parte del GIF renderizado de forma nativa por Figma y lo convierte sin otra pasada de compresión con pérdida. Estos formatos convertidos conservan el aspecto, los tiempos, la transparencia y la paleta de colores del GIF nativo.
Exportar las animaciones
Selecciona Export GIF, Export APNG, Export WebP, Export MP4 o Export WebM. Es posible que Figma abra o actualice su pestaña Video Export mientras renderiza cada animación.
Si hay una sola animación marcada, TinyImage descarga ese archivo directamente. Si hay varias animaciones marcadas, TinyImage las renderiza en el orden de la lista y descarga un único archivo Figma Motion animations.zip. Cada archivo usa el nombre de su frame de Figma, y TinyImage añade un número cuando los frames marcados generarían nombres de archivo duplicados.
Figma Motion y su API de exportación para plugins están actualmente en beta. Si Figma rechaza un renderizado que ya está dentro de los límites del plan Starter, abre el frame en Figma Motion, confirma que sigue conteniendo capas animadas y vuelve a intentar la exportación.
Guardar archivos descargados desde Figma Si usas la aplicación de escritorio de Figma, verás un aviso para descargar el archivo. En cambio, si usas Figma en un navegador web, el archivo se descargará automáticamente en tu ordenador (normalmente en la carpeta Descargas).