Abra a área de trabalho GIF e selecione Create a GIF/MP4. As configurações de exportação aparecem ao lado dos frames selecionados e da pré-visualização. O GIF Editor mantém os controles do arquivo carregado na própria área de trabalho do editor.
Vídeo tutorial: criar GIFs animados
Este vídeo mostra como animar e exportar GIFs dos seus próprios designs direto do Figma com o plugin TinyImage.
Vídeo tutorial: adicionar efeitos de transição às exportações de GIF animado no Figma
Este vídeo mostra como adicionar efeitos de transição de esmaecer, deslizar e revelar às exportações de GIF animado no Figma com o plugin TinyImage.
Definir as dimensões
Por padrão, as dimensões do GIF são iguais às do primeiro quadro. Você pode substituir width e height manualmente.
Definir a escala
Use o menu scale para exportar em tamanhos com escala (por exemplo, @2x ou @0.5x).
Escolher o encaixe da imagem
Escolha entre:
- Cover Images
- Contain Images (padrão)
Definir a cor de fundo
Defina um fundo sólido com um valor de cor HEX.
Se os seus frames de entrada tiverem transparência, ative Transparent Background quando precisar de um GIF transparente.
Configurar a compressão e a qualidade
Use o controle deslizante de qualidade (1-100) para controlar a compressão com perdas.
Ative Lossless se quiser comprimir o GIF sem perda de qualidade.
Otimizar para um tamanho de arquivo alvo
Ative Size Target e informe o tamanho máximo em KB quando a sua plataforma de anúncios, sistema de e-mail ou fluxo de publicação tiver um limite rígido de tamanho para arquivos GIF. O TinyImage testa níveis de perda cada vez mais fortes e paletas de 256, 128, 64 e 32 cores e, depois, usa o resultado testado menos agressivo que couber no alvo.
Quando o Size Target está ativado, o TinyImage substitui os controles manuais de Quality pelo alvo em KB e oculta Lossless, porque ajusta essas configurações automaticamente. O mesmo alvo está disponível em Create a GIF/MP4, GIF Editor e Figma Motion Export. Ele se aplica só a saídas em GIF animado, não a APNG, WebP animado, MP4 ou WebM.
Algumas animações não conseguem atingir um alvo muito pequeno sem mudar as dimensões, o número de quadros ou o timing. Se nenhuma das configurações testadas cumprir o limite, o TinyImage exporta o menor resultado válido que encontrou. Confira o tamanho do arquivo final antes de enviá-lo.
Configurar a paleta de cores global
Ative All frames have the same color palette para reutilizar a paleta do primeiro quadro em todos os quadros.
Use isso só quando precisar corrigir artefatos ou faixas de cor. Pode causar problemas de cor quando os quadros seguintes usam cores que não estão no primeiro quadro.
Escolher o pontilhamento da imagem
Escolha um algoritmo de pontilhamento no menu Image Dithering.