No momento em que temos contato com a área de UI/UX nos deparamos com uma inúmera quantidade de softwares de prototipagem, cada um com um tipo de funcionalidade e focado em um tipo de interface. No início, o desenvolvimento de telas era feito no Photoshop e com o passar do tempo foram surgindo softwares próprios para a prototipagem de telas como SketchApp, Invision, Figma, Framer. Para entrar de vez no mercado a Adobe criou o Adobe XD.
Com o crescimento do mercado, a necessidade de criar protótipos que simulem a interação e o relacionamento dos usuários com a telas desenvolvidas se tornou cada vez mais importante. Por mais que muitos destes programas de prototipagens já simulem a animação entre as páginas ou elementos presentes nela, ainda há limitações nas animações que podem ser fornecidas o que fez essa necessidade chegar até nós, motion designers.
Importação nunca foi o forte.
Dentro desse nicho, uma dor recorrente que vejo na maioria dos trabalhos, era a importação desses arquivos para dentro do After Effects e assim poder começar a trabalhar a animação. Ferramentas como o AEUX ou Photopea — que permite a conversão de arquivos em SketchApp para Photoshop — foram desenvolvidas buscando facilitar essa transição para o software de animação.
É claro, existem formatos universais que ajudam na hora da exportação de um arquivo de um software para você abrir no outro, mas por vezes, informações se perdem. Exporte um arquivo .svg no Sketch e abra ele no Illustrator por exemplo para fazer a limpeza e ordenação das camadas para prepará-lo para a animação. Por vezes é possível encontrar uma quantidade de elementos em máscaras que tornavam a ação de preparar um arquivo, uma grande batalha.
Outros plug-ins como o Overlord já foram desenvolvidos buscando facilitar a importação de arquivos do Illustrator para dentro do After Effects.
Uma nova esperança
Isso mudou a partir da atualização do Adobe XD no final de 2018 onde permitiu-se exportar os projetos diretamente para o After Effects. Nessa transição não é necessário a utilização de um arquivo específico como svg, ai ,eps ou psd. Ela já gera automaticamente todos os elementos presentes no projeto dentro do AE em sua forma nativa, sejam eles shapes, textos, mascarás ou imagens.
Esse tipo de integração, acredito que a primeira envolvendo softwares da Adobe, facilita em grande parte o desenvolvimento de animações que simulem a prototipagem, além de dar maior controle sobre todos os elementos para o animador.
Como bônus, animações desenvolvidas com o objetivo de exportar como bodymovin se tornam muito mais fáceis a partir do momento que não há a necessidade de converter os arquivos importados para o shape nativo do After Effects. — Se não sabe o que é bodymovin, leia o nosso texto “Bodymovin, Lottie, e as Possibilidades do Motion Além do Formato de Vídeo”em que apresentamos essa ferramenta.
Por fim, espero que a Adobe possa utilizar esse novo conhecimento para trazer novas integrações entre seus softwares, facilitando a comunicação entre eles. Aguardamos o futuro e o que ele nos reserva.
