Tutorial en vídeo: exporta banners de Figma a GIF
Este vídeo muestra cómo exportar banners animados listos para producción desde Figma a GIF con el plugin Bannerify.
Cuando estés contento con tus banners y quieras exportarlos a GIF, WebM, MP4 o WebP animado, haz clic en el botón Export to GIF/Video de la cabecera de Bannerify. Se abrirán los ajustes de exportación de GIF y vídeo.
Incluir o excluir banners de la exportación. Por defecto, todos los frames de tu archivo de Figma que se cargan en Bannerify como banners se incluyen en la exportación. Si quieres excluir algún banner, desactiva el interruptor Include In Export en la cabecera de la línea de tiempo de ese banner. Así se oculta la línea de tiempo de ese banner y se excluye de cualquier exportación.
Incluir o excluir banners de la exportación. Por defecto, todas las capas de nivel superior de tu archivo de Figma que se cargan en Bannerify como banners se incluyen en la exportación. Si quieres excluir algún banner (sin volver a cargar los banners seleccionados), desactiva el interruptor Include In Export en la cabecera de la línea de tiempo de ese banner. Así se oculta la línea de tiempo de ese banner y se excluye de cualquier exportación.
Fotogramas por segundo
Puedes cambiar la frecuencia de fotogramas de tus exportaciones GIF con las opciones del selector Frames Per Second. Puedes elegir entre estas opciones de FPS:
- 60 FPS (Ludicrous Mode)
- 30 FPS (Ultra Smooth)
- 24 FPS (Smooth)
- 18 FPS (Less Smooth)
- 12 FPS (Least Smooth)
- 6 FPS (Jittery)
Cuantos más FPS, más tarda el renderizado. Ten en cuenta que más fotogramas tardan más en exportarse y generan archivos más grandes. Por ejemplo, exportar una línea de tiempo de 5 segundos a 24 FPS renderiza 120 fotogramas por banner.
Los retardos entre fotogramas de un GIF van en incrementos de 10 milisegundos. Cuando hace falta, Bannerify alterna los retardos de los fotogramas para mantener la velocidad de reproducción general, así que algunos fotogramas pueden durar un poco más o un poco menos que otros. Si eliges 60 FPS para un GIF, Bannerify lo muestrea y lo exporta a 50 FPS para que los navegadores puedan reproducirlo a la velocidad correcta. El panel de exportación y el nombre del archivo ZIP muestran la frecuencia real de 50 FPS. La frecuencia de fotogramas que hayas elegido se mantiene para MP4 y los demás formatos.
Compresión sin pérdida o con pérdida
Por defecto, los GIF se exportan con compresión sin pérdida, es decir, el tamaño del archivo se mantiene bajo sin una pérdida de calidad apreciable. Si necesitas GIF todavía más pequeños (a costa de perder algo de calidad), puedes desactivar el interruptor Lossless Compression y ajustar el control deslizante de calidad de compresión a lo que necesites.
Configurar opciones avanzadas de tramado. Si sabes lo que haces, puedes personalizar el tipo de tramado (dithering) que se usa en la exportación GIF cambiando la opción del desplegable de tramado de imagen en el panel de ajustes de exportación GIF.
Usar una paleta de colores global
Si exportas un GIF en el que la paleta de colores es la misma en todos los fotogramas (con solo pequeños movimientos, cambios de texto, etc. entre ellos) y ves algunos artefactos de color, puede que te convenga activar la opción All GIF frames have the same color palette. Así se reutiliza la paleta de colores del primer fotograma del GIF y se aplica también a todos los demás.
Las paletas de colores globales pueden dar problemas. Usa esta opción solo como último recurso si tu GIF muestra artefactos de color o bandas no deseados, porque puede causar otros problemas si algunos colores de otros fotogramas del GIF no aparecen en el primero.
Reproducción en bucle infinito
Si activas la opción Infinite Loop, los GIF exportados repetirán la línea de tiempo de su animación sin parar. Si desactivas este ajuste, tus GIF reproducirán la línea de tiempo de la animación una vez y se quedarán congelados en el último fotograma. Esta opción solo se aplica a las exportaciones GIF.
Marcar fondos transparentes en los GIF
Por defecto, las exportaciones GIF no incluyen fondos transparentes. Si tu GIF necesita transparencia, activa el interruptor Has Transparent Background en los ajustes de exportación GIF.
Descargar el archivo .zip final con los GIF
Cuando Bannerify termine de procesar tus banners, verás un mensaje de confirmación. Puedes descargar el archivo .zip con los banners exportados haciendo clic en el botón Download your .zip file.
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).
Abrir el archivo .zip con los GIF
Cuando hayas descargado el archivo .zip de Figma a tu ordenador, abre el explorador de archivos en la carpeta donde se guardó. Haz doble clic en el archivo .zip exportado para descomprimir su contenido y usar tus banners como quieras.