Exportar do Figma para o Adobe After Effects

Exporte designs do Figma para o Adobe XD em fluxos de trabalho do After Effects e configure as opções de exportação.

Vídeo tutorial: converter do Figma para o Adobe After Effects

Este vídeo mostra como converter automaticamente seus designs do Figma para o After Effects (com um clique) direto do Figma, usando o plugin Convertify.

Para exportar seus designs do Figma para o Adobe After Effects, siga os passos para converter, baixar e abrir seu arquivo .xd, que depois pode ser exportado do Adobe XD para o Adobe After Effects.

Selecionar uma única página do Figma para converter e usar no Adobe After Effects ​

Com o plugin Convertify em execução, clique na aba Export from Figma, escolha Export Figma to Adobe After Effects no seletor de fluxo de trabalho e selecione a página do Figma que você quer converter para usar no Adobe After Effects.

O plugin exporta automaticamente a página do Figma que você está vendo. Para exportar outra página, clique em qualquer página do seu arquivo listada na coluna da esquerda do Figma, abaixo do título Pages.

Depois de selecionar a página do Figma, você pode converter o design em um arquivo do Adobe XD (para depois exportá-lo para o After Effects) clicando no botão Export This Page no plugin Convertify. Isso inicia o processo de conversão automática.

Estimativas de tempo A estimativa de tempo (por exemplo, ~14 seconds to convert 555 layers) se baseia no número de camadas da sua página do Figma e dá uma ideia de quanto tempo a conversão vai levar. Páginas do Figma com imagens grandes provavelmente vão aumentar o tempo necessário para concluir a conversão da página em um arquivo do Adobe XD.

O Adobe XD não aceita várias páginas em um documento. A seleção de várias páginas só vale para exportações para o Sketch, porque o app Adobe XD só aceita arquivos de página única por enquanto.

Exportar para o XD os frames selecionados da página do Figma ​

Se não quiser converter a página inteira do Figma em um arquivo do Adobe XD (para depois exportá-lo para o After Effects), você pode converter só algumas camadas de frame do seu design para o Adobe XD: selecione os frames do Figma que quer converter e clique no botão Export Selected Frames no plugin Convertify. Isso inicia o processo de conversão automática.

O Adobe XD não aceita várias páginas em um documento. A seleção de várias páginas só vale para exportações para o Sketch, porque o app Adobe XD só aceita arquivos de página única por enquanto.

Baixar o arquivo .xd para exportar para o After Effects ​

Quando o Convertify terminar de processar sua página do Figma, você verá uma mensagem de confirmação. Para baixar o arquivo .xd, clique no botão Download .xd (for exporting to AE).

Depois de baixar o arquivo .xd do Figma para o seu computador, abra o gerenciador de arquivos na pasta em que ele foi salvo. Clique duas vezes no arquivo .xd exportado para abri-lo na versão do Adobe XD instalada no seu computador.

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

Exportar a prancheta do Adobe XD para o After Effects ​

Instalar o Adobe XD Se você usa Mac ou Windows e tem uma conta paga da Adobe CC, pode instalar o Adobe XD pela Creative Cloud (ou baixar o instalador .dmg diretamente aqui) para executá-lo no seu computador. Também dá para encontrar o instalador independente para Windows on-line.

Depois de abrir o arquivo .xd no Adobe XD, você pode exportar pranchetas nativamente para o After Effects: clique em qualquer prancheta da página (a que você quer usar no After Effects) e depois em File → Export → After Effects.

Se o XD não estiver exportando sua prancheta para o After Effects, tente primeiro marcar a caixa de seleção Mark for Export no painel lateral direito.

Ver as camadas exportadas no After Effects ​

Depois que você clicar em File → Export → After Effects com a prancheta selecionada no Adobe XD, o app Adobe After Effects (confira se ele está instalado) abre automaticamente no seu computador e exporta nativamente a prancheta selecionada, com todas as camadas dela, do Adobe XD para a linha do tempo do After Effects.

Quando a exportação terminar, você pode salvar o novo arquivo do After Effects e fechar o Adobe XD para continuar seu trabalho de motion design usando as camadas que vieram do seu arquivo do Figma, que agora podem ser animadas no After Effects.

Configurar as opções de exportação para o Adobe After Effects ​

Antes de exportar seus designs do Figma para o Adobe After Effects (por meio da importação do arquivo .xd), você pode configurar algumas opções que podem ser úteis.

Renderizar como imagens as camadas com o prefixo * ​

Ao ativar a opção Render layers with * prefix (eg. "* Frame") as images, todas as camadas do Figma cujo nome começa com “*” (por exemplo, “*Frame 1”) são exportadas automaticamente como camadas de imagem, e não no tipo de camada normal.

Incluir sobreposições de imagem de referência nas pranchetas ​

Ao ativar a opção Include reference image overlays for artboards, o arquivo exportado inclui automaticamente uma imagem de referência de cada prancheta sobre ela, com opacidade de camada de 50%. Isso ajuda a fazer edições manuais ou ajustes no posicionamento das camadas.

Desagrupar todas as camadas filhas das pranchetas do Figma ​

Ao ativar a opção Ungroup all Figma artboard child layers, todas as camadas “Group” do seu arquivo do Figma são desagrupadas automaticamente.

Dimensionar as composições do After Effects ​

Ao selecionar uma opção em Scale Comps, suas pranchetas do Figma são dimensionadas automaticamente para uma escala de @0.25x - @4x (o padrão é @1x, que não altera a escala dos seus designs). Isso garante que suas composições sejam ampliadas ou reduzidas quando você exportar o arquivo .xd convertido para o After Effects.

Posicionamento mais preciso para fontes instaladas ​

O Adobe XD não aceita propriedades de texto como o alinhamento vertical e calcula a altura das linhas de forma diferente do Figma.

Ao ativar a opção More accurate positioning for installed fonts (slower), os valores de texto do Figma são exportados com mais precisão para o XD (para todas as fontes do design que estão instaladas no seu computador).

Conversões mais lentas. Ativar a opção More accurate positioning for installed fonts (slower) pode deixar a conversão bem mais lenta que o normal (dependendo do número de camadas de texto).

Entender as diferenças entre o Figma e o After Effects ​

O Convertify faz o possível para converter todas as suas camadas e atributos do Figma para o Adobe XD e depois exportá-los para o After Effects, mas existem algumas limitações naturais, porque o Adobe XD tem menos recursos nativos que o Figma.

Recursos do Figma que não existem no Adobe XD (e não são exportados do XD para o After Effects) ​

Estes recursos existem no Figma, mas não são nativos do Adobe XD, então não são levados para o After Effects quando você exporta o arquivo para lá.

  • Ocultar pranchetas pai
  • Pranchetas pai rotacionadas
  • Elipses com propriedades de “arco”
  • Vários preenchimentos/contornos em uma camada
  • Camadas vetoriais com raio de canto
  • Contornos/preenchimentos aplicados a grupos
  • Alinhamento vertical em camadas de texto
  • Máscaras de camada aninhadas