Use o GIF Editor, na aba GIF do TinyImage, para editar um GIF animado ou MP4 existente sem recriá-lo a partir de camadas separadas do Figma.
Vídeo tutorial: editar GIFs animados direto no Figma
Este vídeo mostra como editar, combinar, encurtar, transformar e exportar GIFs animados com o TinyImage.
Carregar um GIF ou MP4
No Figma Design, selecione uma destas opções:
- Uma camada com um preenchimento de GIF animado.
- Um frame que tenha uma ou mais camadas GIF em qualquer nível de aninhamento.
Se você abrir o GIF Editor com uma dessas camadas selecionada, o TinyImage a carrega automaticamente. Caso contrário, escolha Use selected Figma GIF layer. Você também pode escolher Choose file from your computer para carregar um GIF ou MP4 local.
Quando você carrega um frame, o TinyImage incorpora a pilha de camadas visíveis do frame em cada quadro da animação. Isso inclui conteúdo, máscaras, efeitos e outras camadas acima ou abaixo das camadas GIF aninhadas. O frame original do Figma e as camadas dele não são alterados.
Se o frame tiver vários GIFs, o TinyImage sincroniza as mudanças de quadro deles em uma única linha do tempo editável. Por estabilidade, uma animação de frame combinada pode ter até dois minutos de duração e até 500 quadros combinados.
Selecione Reset a qualquer momento para voltar ao GIF carregado originalmente.
O TinyImage avisa antes de substituir um GIF com alterações que você ainda não exportou. GIFs grandes também mostram um aviso de processamento. Os GIFs podem ter até 2.000 quadros, dimensões de até 8.192 px e um arquivo de origem de até 100 MB.
Os arquivos MP4 podem ter até 60 segundos e 100 MB. O TinyImage amostra o vídeo a 10 quadros por segundo e reduz automaticamente dimensões de vídeo muito grandes quando necessário, para que a edição seja confiável.
Redimensionar e transformar a animação
Informe uma largura ou altura de saída e mantenha Lock ratio ativado para preservar as proporções originais. Selecione Apply size para redimensionar todos os quadros.
Os controles de transformação permitem:
- Girar todos os quadros 90 graus para a esquerda ou para a direita.
- Espelhar todos os quadros na horizontal ou na vertical.
- Recortar todos os quadros com uma seleção visual ou com valores exatos de X, Y, largura e altura.
Encurtar e ajustar o timing do GIF
Use as alças da linha do tempo para escolher o primeiro e o último quadro que você quer manter. Use o menu Speed para deixar a animação inteira 50% ou 25% mais lenta, manter o timing normal de 100% ou deixá-la 25%, 50% ou 100% mais rápida. O TinyImage recalcula cada quadro a partir do timing original, então as diferenças de timing intencionais entre os quadros são preservadas.
Ative Reverse para inverter a pré-visualização, a linha do tempo e a ordem dos quadros exportados. Se você já tiver encurtado a animação, o TinyImage mantém os mesmos quadros escolhidos e inverte a ordem deles. Para saídas em GIF e APNG, deixe Infinite ativado para repetir em loop contínuo. Desative Infinite e informe o total de repetições no campo numérico para que a animação seja reproduzida um número fixo de vezes.
Configurar e exportar a saída
Use o menu de formato ao lado do botão de exportação para baixar a animação editada como:
- GIF animado
- PNG animado (APNG)
- WebP animado
- Vídeo MP4
- Vídeo WebM
As exportações GIF e APNG incluem um controle de loop, as exportações MP4 e WebM incluem um controle de loop de vídeo, e o WebP animado repete em loop contínuo.
O GIF Editor usa o mesmo controle deslizante Quality e a mesma opção Lossless de Create a GIF/MP4. Esses controles se aplicam às exportações GIF, APNG e WebP animado. Ative Lossless para desativar o controle de qualidade e preservar a qualidade da imagem, ou reduza o valor de qualidade para diminuir o tamanho do arquivo com compressão com perdas. MP4 e WebM usam, em vez disso, a maior qualidade de vídeo compatível do editor.
Para saídas em GIF animado, ative Size Target e informe um tamanho máximo em KB para que o TinyImage ajuste automaticamente o nível de perda e a paleta de cores. Enquanto um alvo estiver ativo, o campo em KB substitui os controles manuais de Quality e oculta Lossless. Se não for possível atingir o alvo, o TinyImage exporta o menor resultado válido que encontrou, então confira o arquivo salvo antes de enviá-lo para um serviço com limite rígido.
Quando um GIF original não foi editado, o TinyImage usa os dados do arquivo original como entrada e aplica a compressão selecionada sem recodificar todos os quadros antes. Os GIFs editados são reconstruídos com a paleta máxima de 256 cores do formato antes de a compressão selecionada ser aplicada. A mesma configuração de compressão de GIF é usada nos downloads e em Insert GIF to Figma.
Revise a pré-visualização da reprodução depois de cada mudança e, depois, escolha Export GIF, Export APNG, Export WebP, Export MP4 ou Export WebM. Selecione Insert GIF to Figma para adicionar a animação editada à página atual do Figma como um GIF. O TinyImage mostra o progresso da exportação quadro a quadro, e você pode cancelar antes de o próximo quadro ser processado.