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.

Abra a aba GIF e selecione Create a GIF/MP4 para animar e exportar arquivos GIF ou MP4 a partir de camadas do Figma selecionadas.

Exportar uma animação do Figma Motion

Abra a aba GIF e selecione Figma Motion Export para exportar animações criadas com o Figma Motion. O TinyImage lista os frames do Motion da seleção ou da página atual com uma miniatura estática ao lado de cada caixa de seleção; escolha um ou mais e, depois, defina o formato de saída comum, a taxa de quadros, o tamanho, o loop, a compressão do GIF, a paleta de cores ou a qualidade do vídeo.

O TinyImage usa o renderizador nativo do Motion do Figma para saídas em GIF, MP4 e WebM. Ele também pode converter a renderização GIF nativa para APNG ou WebP animado sem uma nova passada de compressão com perdas.

Selecione Export para renderizar as animações marcadas. Uma única animação marcada é baixada diretamente, e várias animações são baixadas juntas em um único ZIP.

Saiba como revisar e exportar animações do Figma Motion

Editar um GIF ou MP4 existente

Abra a aba GIF e selecione GIF Editor. Selecione uma camada do Figma com um preenchimento de GIF animado para ativar Use selected Figma GIF layer, ou escolha Choose from computer para carregar um GIF ou MP4 do seu dispositivo. Você pode editar os quadros e baixar o resultado em GIF, APNG, WebP animado, MP4 ou WebM.

As exportações de imagem do GIF Editor priorizam a fidelidade: APNG e WebP animado usam codificação sem perdas, e downloads de GIFs sem alterações ou inserções no Figma reaproveitam os dados do GIF original sem recomprimir.

Recortar um GIF existente

Depois de carregar um GIF, selecione Crop. Desenhe ou redimensione a área de recorte na pré-visualização, ou informe valores exatos de X, Y, largura e altura. Você pode mover a área selecionada com as setas do teclado para ajustes menores.

Selecione Apply crop para recortar todos os quadros da animação. Revise a pré-visualização atualizada antes de exportar o GIF editado.

Primeiros passos para criar GIFs no Figma

Use as páginas abaixo para configurar cada parte do seu fluxo de criação de GIFs:

Selecionar e atualizar os quadros do GIF

Selecione as camadas do Figma que serão os quadros e atualize o conjunto de quadros quando quiser

Ordenar os quadros do GIF

Ordene os quadros por ordem personalizada, ordem das camadas, linhas, colunas ou nomes das camadas

Configurar o timing e a reprodução do GIF

Controle os atrasos entre quadros, o número de loops e as interações da pré-visualização

Adicionar transições entre os quadros do GIF

Aplique e ajuste transições de esmaecer, deslizar e revelar entre os quadros

Definir as opções de exportação do GIF

Configure dimensões, encaixe, qualidade, tratamento da paleta de cores e pontilhamento

Exportar e baixar arquivos GIF

Renderize o GIF final e baixe-o quando o processamento terminar

Editar um GIF ou MP4 existente

Redimensione, transforme, recorte, encurte, ajuste o timing e exporte um GIF ou MP4 existente

Exportar do Figma Motion

Revise e exporte uma animação nativa do Figma Motion em cinco formatos