Exportar banners como arquivos GIF animados

Depois de animar as camadas na linha do tempo, você pode exportar seus banners como arquivos GIF animados.

Vídeo tutorial: exporte banners do Figma como GIFs

Este vídeo mostra como exportar banners animados prontos para produção do Figma como GIFs usando o plugin Bannerify.

Quando você estiver satisfeito com seus banners e quiser exportá-los como arquivos GIF, WebM, MP4 ou WebP animado, clique no botão Export to GIF/Video no cabeçalho do Bannerify. Isso abre as configurações de exportação para GIF/vídeo.

Incluir ou excluir banners da exportação. Por padrão, todos os frames do seu arquivo do Figma carregados no Bannerify como banners são incluídos na exportação. Se você quiser excluir algum banner, desative a opção Include In Export no cabeçalho da linha do tempo do banner. Isso oculta a linha do tempo desse banner e também o exclui de todas as exportações.

Incluir ou excluir banners da exportação. Por padrão, todas as camadas de nível superior do seu arquivo do Figma carregadas no Bannerify como banners são incluídas na exportação. Se você quiser excluir algum banner (sem recarregar os banners selecionados), desative a opção Include In Export no cabeçalho da linha do tempo do banner. Isso oculta a linha do tempo desse banner e também o exclui de todas as exportações.

Quadros por segundo ​

Você pode mudar a taxa de quadros das exportações em GIF usando as opções da caixa de seleção Frames Per Second. Escolha entre estas opções de FPS:

  • 60 FPS (Ludicrous Mode)
  • 30 FPS (Ultra Smooth)
  • 24 FPS (Smooth)
  • 18 FPS (Less Smooth)
  • 12 FPS (Least Smooth)
  • 6 FPS (Jittery)

Um FPS mais alto leva mais tempo para renderizar. Mais quadros levam mais tempo para exportar e geram arquivos maiores. Por exemplo, exportar uma linha do tempo de 5 segundos a 24 FPS renderiza 120 quadros por banner.

Os atrasos entre os quadros do GIF usam incrementos de 10 milissegundos. Quando necessário, o Bannerify alterna os atrasos dos quadros para preservar a velocidade geral de reprodução. Por isso, quadros individuais podem ter durações um pouco diferentes. Quando você seleciona 60 FPS para um GIF, o Bannerify faz a amostragem e a exportação em 50 FPS, para que os navegadores reproduzam na velocidade correta. O painel de exportação e o nome do arquivo ZIP mostram a taxa efetiva de 50 FPS. A taxa de quadros que você selecionou é mantida para MP4 e os outros formatos.

Compressão sem perdas ou com perdas ​

Por padrão, os GIFs são exportados com compressão sem perdas (Lossless), ou seja, o tamanho do arquivo fica pequeno sem perda perceptível de qualidade. Se você precisar de GIFs ainda menores (à custa de alguma perda de qualidade), desative a opção Lossless Compression e ajuste o controle deslizante de qualidade da compressão como preferir.

Definir opções avançadas de pontilhamento. Se você sabe o que está fazendo, pode personalizar o tipo de pontilhamento (dithering) usado na exportação do GIF mudando a opção do seletor de pontilhamento de imagem no painel de configurações da exportação em GIF.

Usar uma paleta de cores global ​

Se você está exportando um GIF em que a paleta de cores é a mesma em todos os quadros (com só alguns movimentos pequenos, mudanças de texto etc. entre eles) e está vendo alguns artefatos de cor, talvez queira ativar a opção All GIF frames have the same color palette. Ela reutiliza a paleta de cores do primeiro quadro do GIF e a aplica a todos os outros quadros.

Paletas de cores globais podem dar problemas. Use esta opção só como último recurso, se o seu GIF estiver mostrando artefatos de cor ou faixas indesejadas, porque ela pode causar outros problemas se algumas cores de outros quadros do GIF não estiverem no primeiro quadro.

Repetir a reprodução infinitamente ​

Ao ativar a opção Infinite Loop, os GIFs exportados repetem a linha do tempo da animação continuamente, para sempre. Se você desativar essa configuração, os GIFs reproduzem a linha do tempo da animação uma vez e depois param no último quadro. Esta opção só se aplica às exportações em GIF.

Marcar fundos transparentes nos GIFs ​

Por padrão, as exportações em GIF não incluem fundo transparente. Se o seu GIF precisar de transparência, ative a opção Has Transparent Background nas configurações de exportação em GIF.

Baixar o arquivo .zip final com os GIFs ​

Quando o Bannerify terminar de processar seus banners, você verá uma mensagem de confirmação. Para baixar o arquivo .zip com os banners exportados, clique no botão Download your .zip file.

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).

Abrir o arquivo .zip com os GIFs ​

Depois de baixar o arquivo .zip do Figma para o seu computador, abra o gerenciador de arquivos na pasta onde ele foi salvo. Clique duas vezes no arquivo .zip exportado para descompactar o conteúdo e usar seus banners como quiser.