Use Figma Motion Export, na aba GIF do TinyImage, quando sua animação já tiver sido criada com o Figma Motion. Este fluxo de trabalho usa o renderizador de animações nativo do Figma, em vez de recriar a animação a partir de frames estáticos separados.

Vídeo tutorial: exportar em massa camadas do Figma Motion para GIF e vídeo MP4

Este vídeo mostra como exportar em massa animações do Figma Motion como GIFs ou vídeos MP4 comprimidos com o TinyImage.

Selecionar a animação do Motion

Em um arquivo do Figma Design, selecione:

• O frame de nível superior que contém a animação do Motion.
• Ou qualquer camada animada dentro desse frame de nível superior.

Abra o TinyImage, selecione GIF e, depois, selecione Figma Motion Export. O TinyImage converte seleções aninhadas nos frames do Motion de nível superior que as contêm e marca cada animação detectada na lista de exportação.

Encontrar animações do Motion na página

Se a seleção atual não tiver uma animação do Motion, o TinyImage verifica automaticamente a página atual e lista as animações do Motion que encontrar em frames de nível superior. Use as caixas de seleção para escolher uma ou mais animações para exportar. Todas as animações vêm marcadas por padrão, e a caixa de seleção acima da lista marca ou desmarca todos os frames.

O TinyImage guarda essa lista em cache enquanto o plugin continua na mesma página. Selecione Rescan this page depois de adicionar uma animação do Motion ou de mudar quais frames têm camadas animadas. Para encontrar uma animação em outra página, mude primeiro para aquela página do Figma; o TinyImage não verifica todas as páginas do arquivo.

Revisar os frames selecionados

O TinyImage mostra uma miniatura estática ao lado de cada frame do Motion na lista de exportação. O ícone de frame leva até aquela animação no canvas do Figma sem mudar quais animações estão marcadas para exportação.

Essas miniaturas ajudam a conferir a lista de exportação sem renderizar uma animação, abrir a aba Video Export do Figma ou baixar um arquivo de pré-visualização.

Configurar a exportação

Escolha um formato de saída no menu ao lado do botão de exportação:

• Animated GIF
• Animated PNG (APNG)
• Animated WebP
• MP4 Video
• WebM Video

Defina a taxa de quadros e o tamanho da saída. As mesmas configurações se aplicam a todas as animações marcadas. O valor de Size é uma escala, então os frames podem manter dimensões em pixels diferentes na mesma exportação em massa. GIF, APNG e WebP animado também permitem escolher entre loop contínuo e reprodução única. MP4 e WebM oferecem, em vez disso, as predefinições de qualidade Low, Medium e High.

Nas exportações GIF, escolha a compressão adequada às suas necessidades:

• No compression não altera o GIF do Figma, a menos que você reduza o número de cores.
• Lossless compression otimiza os quadros e a estrutura do arquivo GIF sem compressão de pixels com perdas.
• Balanced compression usa uma compressão com perdas leve (nível 40) para uma economia moderada, com baixo risco de artefatos visíveis.
• Strong compression usa uma compressão com perdas mais agressiva (nível 80), que pode reduzir ainda mais o tamanho, mas pode gerar artefatos visíveis.
• Maximum compression usa a compressão com perdas mais agressiva (nível 140) para o menor arquivo provável, com o maior risco de faixas de cor e artefatos.

Escolha 256 colors para manter o limite de cores original do Figma, ou reduza para 128 colors, 64 colors ou 32 colors. A redução da paleta é separada da predefinição de compressão, então uma paleta menor ainda pode mudar as cores ou gerar faixas de cor mesmo com Lossless compression selecionada.

Ative Size Target e informe um tamanho máximo em KB quando o GIF exportado precisar caber em um limite rígido de upload. O TinyImage testa automaticamente níveis de perda e paletas de 256, 128, 64 e 32 cores e, depois, fica com o resultado testado menos agressivo que couber no limite. Enquanto um alvo estiver ativo, os controles manuais de compressão e de número de cores são substituídos pelo campo de tamanho alvo.

Se nenhuma das configurações testadas atingir o alvo, o TinyImage prepara o menor resultado válido que encontrou e informa o tamanho dele antes do download. Reduzir o tamanho da exportação do Motion, a taxa de quadros ou a duração da animação pode diminuí-lo ainda mais.

As configurações padrão exportam o GIF nativo do Figma sem alterações. Quando a compressão extra está ativada, o TinyImage só usa o resultado otimizado se ele for menor que o arquivo original do Figma. Se a otimização falhar ou aumentar o tamanho do arquivo, o TinyImage exporta com segurança o GIF original.

O Figma limita as exportações do Motion no plano Starter a 1920 × 1080 e 30 FPS. O TinyImage tenta primeiro a exportação solicitada, para que a saída dos planos pagos não seja reduzida. Se o Figma recusar um pedido acima desse limite, o TinyImage tenta de novo automaticamente a partir de uma cópia temporária ajustada a 1920 × 1080 e limita a nova tentativa a 30 FPS. A cópia temporária é removida depois da renderização, e o frame original não é alterado. Uma notificação azul informa as dimensões e a taxa de quadros exportadas.

O Figma renderiza arquivos GIF, MP4 e WebM diretamente. Para APNG e WebP animado, o TinyImage parte da renderização GIF nativa do Figma e a converte sem uma nova passada de compressão com perdas. Esses formatos convertidos mantêm a aparência, o timing, a transparência e a paleta de cores da renderização GIF nativa.

Exportar as animações

Selecione Export GIF, Export APNG, Export WebP, Export MP4 ou Export WebM. O Figma pode abrir ou atualizar a aba Video Export enquanto renderiza cada animação.

Quando uma única animação está marcada, o TinyImage baixa esse arquivo diretamente. Quando há mais de uma animação marcada, o TinyImage as renderiza na ordem da lista e baixa um único arquivo Figma Motion animations.zip. Cada arquivo usa o nome do frame no Figma, e o TinyImage adiciona um número quando frames marcados gerariam nomes de arquivo duplicados.

O Figma Motion e a API de exportação de plugins dele estão em beta. Se o Figma recusar uma renderização que já está dentro dos limites do plano Starter, abra o frame no Figma Motion, confirme que ele ainda tem camadas animadas e tente exportar de novo.

Salvar arquivos baixados do Figma. Se você usa o app desktop do Figma, vai aparecer uma janela para baixar o arquivo. Já se você usa o Figma em um navegador, por padrão o arquivo é baixado automaticamente para o seu computador (normalmente para a pasta Downloads).