Tutorial en vídeo: crear GIF animados

Este vídeo explica cómo animar y exportar GIF a partir de tus propios diseños directamente desde Figma con el plugin TinyImage.

Tutorial en vídeo: añadir efectos de transición a las exportaciones de GIF animados en Figma

Este vídeo explica cómo añadir efectos de transición de fundido, deslizamiento y barrido a las exportaciones de GIF animados en Figma con el plugin TinyImage.

Abre la pestaña GIF y selecciona Create a GIF/MP4 para animar y exportar archivos GIF o MP4 a partir de capas de Figma seleccionadas.

Exportar una animación de Figma Motion

Abre la pestaña GIF y selecciona Figma Motion Export para exportar animaciones creadas con Figma Motion. TinyImage muestra los frames de Motion de la selección o la página actual, con una miniatura estática junto a cada casilla; elige uno o varios y define los ajustes comunes de formato de salida, fotogramas por segundo, tamaño, bucle, compresión GIF, paleta de colores o calidad de vídeo.

TinyImage usa el renderizador nativo de Motion de Figma para las salidas GIF, MP4 y WebM. También puede convertir el GIF renderizado de forma nativa a APNG o WebP animado sin añadir otra pasada de compresión con pérdida.

Selecciona Export para renderizar las animaciones marcadas. Si hay una sola animación marcada, se descarga directamente; si hay varias, se descargan juntas en un ZIP.

Aprende a revisar y exportar animaciones de Figma Motion

Editar un GIF o MP4 existente

Abre la pestaña GIF y selecciona GIF Editor. Selecciona una capa de Figma con un relleno GIF animado para activar Use selected Figma GIF layer, o elige Choose from computer para cargar un GIF o MP4 desde tu dispositivo. Puedes editar los fotogramas y descargar el resultado como GIF, APNG, WebP animado, MP4 o WebM.

Las exportaciones de imagen de GIF Editor priorizan la fidelidad: APNG y WebP animado usan codificación sin pérdida, y las descargas de GIF sin cambios o las inserciones en Figma reutilizan los datos del GIF original sin volver a comprimirlos.

Recortar un GIF existente

Después de cargar un GIF, selecciona Crop. Dibuja o cambia el tamaño de la zona de recorte en la vista previa, o introduce valores exactos de X, Y, anchura y altura. Puedes mover la zona seleccionada con las teclas de flecha para hacer ajustes más finos.

Selecciona Apply crop para recortar todos los fotogramas de la animación. Revisa la vista previa actualizada antes de exportar el GIF editado.

Empezar a crear GIF en Figma

Usa las páginas siguientes para configurar cada parte de tu flujo de trabajo de creación de GIF:

Seleccionar y actualizar los fotogramas del GIF

Selecciona las capas de Figma que usarás como fotogramas y actualiza el conjunto de fotogramas cuando quieras

Ordenar los fotogramas del GIF

Ordena los fotogramas en un orden personalizado, por orden de capas, por filas, por columnas o por nombre de capa

Configurar los tiempos y la reproducción del GIF

Controla los retardos entre fotogramas, el número de bucles y la reproducción de la vista previa

Añadir transiciones entre fotogramas

Aplica y ajusta transiciones de fundido, deslizamiento y barrido entre fotogramas

Definir las opciones de exportación del GIF

Configura las dimensiones, el encaje, la calidad, la paleta de colores y el tramado

Exportar y descargar archivos GIF

Renderiza el GIF final y descárgalo cuando termine el procesamiento

Editar un GIF o MP4 existente

Cambia el tamaño, transforma, recorta, acorta, ajusta los tiempos y exporta un GIF o MP4 existente

Exportar Figma Motion

Revisa y exporta una animación nativa de Figma Motion en cinco formatos