Links de dispositivos
Você está procurando uma maneira de levar seu jogo de desenvolvedor e design para o próximo nível? Figma é uma ferramenta incrível que permite aos usuários criar protótipos ricos preenchidos com efeitos de áudio, vídeo e animação. No entanto, para testar adequadamente a sensação e as funções do protótipo, você deve ser capaz de exportá-lo como um GIF e vê-lo em ação.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-760-0605163809061.jpg)
Este guia explicará como você pode exportar seus protótipos Figma como GIFs usando seu PC ou dispositivo móvel.
Como exportar para GIF no Figma em um PC
A maneira mais simples de exportar GIFs animados do Figma é com o plugin TinyImage. Antes de iniciar e usar o plug-in, você precisará fazer login na sua conta Figma e ir para a seção “Comunidade”.
Para baixar o plug-in:
- Digite “TinyImage” na caixa de pesquisa.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-6039-0605163810151.jpg)
- Na seção “Plugins”, encontre o ícone “TinyImage Compressor”.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3697-0605163811010.jpg)
- Clique no botão de instalação ao lado do ícone.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3114-0605163812640.jpg)
Depois de instalar o plug-in, abra o projeto de design que deseja salvar como GIF. Clique em qualquer lugar na tela para abrir o menu suspenso. Escolha “Plugins” e toque em “TinyImage Compressor” para iniciá-lo.
Veja como criar um GIF com o plug-in:
- Na parte superior da janela do plug-in, pressione o botão “Criar um GIF”.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-5425-0605163813298.jpg)
- Selecione as camadas na tela do Figma. Eles atuarão como os quadros do seu GIF.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-6634-0605163814171.jpg)
- Na parte inferior da janela do TinyImage, toque na opção “Usar camadas selecionadas”. Você verá uma apresentação de slides de suas camadas no centro da janela na ordem em que as selecionou.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3222-0605163814939.jpg)
- Abaixo da visualização, clique nos ícones da camada e arraste-os para a esquerda ou para a direita para mudar a ordem.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-5846-0605163815638.jpg)
- Toque no pequeno botão “Play” abaixo da apresentação de slides para ajustar a velocidade de reprodução.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3709-0605163816662.jpg)
- Ao lado dos controles de atraso, selecione quantas vezes o GIF será repetido. A configuração padrão é “Infinito”. Clique na opção “Infinito” para desativá-la e digite o número desejado de loops na caixa ao lado.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-5781-0605163817468.jpg)
- Ajuste o tamanho do GIF nos campos abaixo das opções de atraso e loop.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3677-0605163818165.jpg)
- Se suas camadas tiverem bordas transparentes, pressione o botão “Fundo transparente” na parte inferior da janela para torná-las visíveis no GIF.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-9301-0605163819001.jpg)
- Selecione a qualidade da imagem do GIF no canto inferior esquerdo. É melhor definir a taxa em torno de 80 ou 90 para preservar todos os recursos de suas camadas.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-2543-0605163819905.jpg)
- Deixe os controles “Dithering” definidos como “No Dithering”.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-8167-0605163820733.jpg)
- Toque no botão “Exportar GIF” na parte superior da janela do TinyImage.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-514-0605163822013.jpg)
- Os quadros se fundirão e formarão um GIF e ele será automaticamente baixado e salvo em seus arquivos de download.
Uma observação sobre camadas
O menu suspenso acima das miniaturas das camadas também permite reproduzir as camadas da esquerda para a direita ou da direita para a esquerda. No entanto, para ter mais controle sobre a aparência final do GIF, é melhor ordenar os quadros manualmente.
Uma observação sobre a reprodução
Defina a velocidade de reprodução padrão movendo o botão na linha de medição de tempo. No entanto, se você deseja que quadros específicos tenham velocidades de reprodução diferentes, clique em uma miniatura e defina a velocidade na caixa abaixo dela.
Como exportar para GIF no Figma em um dispositivo móvel
Os protótipos do Figma geralmente vêm com animações avançadas, como guias deslizantes, opções de deslizar e menus suspensos. Salvá-los como um GIF facilitará a exibição do design em ação. No entanto, o aplicativo móvel permite apenas que os usuários visualizem seus protótipos. Embora não haja suporte de exportação integrado, você pode contornar o problema gravando a tela do aplicativo e transformando o vídeo em um GIF.
Como exportar para GIF no Figma em um iPhone
Para salvar seu projeto como um GIF em um iPhone, primeiro você deve gravar a tela do aplicativo Figma e criar um GIF com o aplicativo Atalhos.
Para gravar a tela do Figma em um iPhone:
- Inicie o aplicativo móvel Figma e abra o projeto que deseja transformar em GIF.
- Entre em “Configurações” e selecione “Centro de Controle”.
- Escolha “Personalizar controles” e toque no botão verde ao lado de “Gravação de tela” para ativar o recurso.
- Retorne ao “Centro de Controle”.
- Pressione o botão "Gravação de tela".
- Clique no botão vermelho para terminar a gravação.
A gravação é normalmente armazenada em seu aplicativo Fotos.
Verifique se o seu iPhone tem a ferramenta Atalhos pré-instalada para transformar seu vídeo em um GIF. Você também pode baixar a ferramenta na App Store .
Veja como transformar o vídeo em um arquivo GIF em um iPhone:
- Abra o aplicativo, vá até a parte inferior da interface e selecione o cartão “Galeria”.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-4897-0605163823486.jpg)
- Toque na guia "Atalhos iniciais" abaixo do menu de pesquisa.
- Role até a parte inferior da tela e clique na seção "Criar GIF".
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3418-0605163825483.jpg)
- Clique no botão "Adicionar atalho" para ativar o atalho GIF.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-8665-0605163826893.jpg)
- Quando o atalho for instalado, volte para “Meus Atalhos”.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-6668-0605163828680.jpg)
- Toque em “Criar GIF” e escolha “OK” para conectar o aplicativo e sua galeria de fotos.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-2048-0605163829776.jpg)
- Navegue pelos seus vídeos e selecione o vídeo que você transformará em um GIF.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-224-0605163832043.jpg)
- Use os controles deslizantes para selecionar quais quadros serão incluídos no GIF.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-1822-0605163836779.jpg)
- Toque em “Salvar” para gravar as alterações. Seu novo arquivo GIF será salvo no aplicativo de fotos do tablet.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-592-0605163841859.jpg)
- Clique em "Concluído" para sair do aplicativo Atalhos.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-4047-0605163844015.jpg)
Como exportar para GIF no Figma em um dispositivo Android
Como o aplicativo Figma permite aos usuários visualizar protótipos, mas não exportá-los, você gravará a visualização em seu dispositivo Android, transformando o vídeo em um GIF posteriormente.
Veja como gravar a tela do Figma em um Android:
- Inicie o aplicativo e abra uma prévia do seu projeto.
- Deslize duas vezes na parte superior da tela e selecione “Gravação de tela”. Se não estiver lá, tente deslizar para a direita. Às vezes, você terá que tocar no ícone “Editar” na parte superior da tela para revelar um menu oculto. O recurso “Gravação de tela” também pode estar lá.
- Toque na visualização do protótipo para indicar que deseja gravá-lo.
- Clique no botão “Iniciar”. Assim que a contagem regressiva terminar, a tela será gravada.
- Deslize para baixo e toque no cartão “Gravador de tela” para interromper a gravação.
O vídeo da prévia do Figma será salvo em seu aplicativo de fotos do Android. Você pode transformá-lo em um GIF com o aplicativo GIPHY .
Para converter um vídeo em um GIF em um dispositivo Android:
- Instale e inicie o aplicativo GIPHY em seu dispositivo.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3119-0605163845909.jpg)
- Inscreva-se e crie uma conta GIPHY.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-226-0605163848070.jpg)
- Pressione o botão "Criar" no canto superior direito da interface.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-130-0605163851413.jpg)
- Ative o aplicativo para acessar sua câmera.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-5689-0605163854069.jpg)
- Selecione um vídeo da sua Galeria do Android.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-5593-0605163857427.jpg)
- Ajuste a duração do vídeo. O aplicativo GIPHY permite que os usuários insiram elementos como texto e adesivos em seus arquivos.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-3704-0605163900310.jpg)
- Clique no ícone "Seta" na parte inferior do aplicativo.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-7882-0605163902821.jpg)
- Escolha “Compartilhar GIF” e selecione “Salvar GIF”.
![Como exportar um GIF do Figma Como exportar um GIF do Figma](https://img.webtech360.com/resources6/s2/image-7808-0605170435044.jpg)
Exporte GIFs sem restrições
Seja você um desenvolvedor experiente ou um designer amador, você merece ter uma maneira conveniente de mostrar seu trabalho para outras pessoas em formato GIF. Você pode visualizar suas criações no aplicativo Figma, mas acessar seus designs pode se tornar uma tarefa desafiadora quando a conexão com a Internet cair. Até que o Figma apresente uma solução de exportação amigável, você pode confiar nos métodos que apresentamos no artigo.
Esperamos que este guia tenha ajudado você a entender melhor como obter um GIF de alta qualidade de suas criações Figma, não importa qual dispositivo você esteja usando.
Você usa a versão web ou móvel do Figma? Qual é a sua forma preferida de exportar GIFs? Deixe-nos saber na seção de comentários abaixo.