Um novo sistema para projetar o movimento com o Sketch e o Figma

Apresentamos o AEUX, uma ferramenta para integrar o design de movimento em um fluxo de trabalho de UX – com menos disparos de velocidade do que nunca.

Adam Plouff em Google Design Seg. 11 de jul · 5 min ler

O design de movimento ajuda a orientar os usuários, dando contexto e fornecendo pistas sobre a melhor forma de navegar. Mas nem sempre foi fácil integrar esse novo campo em fluxos de trabalho de design UX estabelecidos.

Em 2016, ainda parecia a idade das trevas do design de movimento UX. Havia muitos novos padrões, mas isso ainda era antes de Lottie nos renderizar animação no dispositivo. Preparar um design visual para o After Effects significava reconstruir a arte dentro do Illustrator, assumindo processos complexos de importação e conversão, e preenchendo prazos para repetir todo o processo burro por causa das inevitáveis revisões de design.

Para ajudar a eliminar essas etapas inúteis, em meados de 2016 comecei a criar uma ferramenta interna no Google chamada Sketch2AE . Foi a primeira ferramenta desse tipo a transferir dados de camada entre aplicativos host. Mas era mais que um importador de arquivos. Foi uma maneira de devolver o tempo às pessoas. Em 2017, foi lançado publicamente e ajudou tanto os designers de movimento que trabalham em UX, quanto os designers visuais que começaram no After Effects.

Processo de transferência da camada vintage no Sketch2AE

Desde então, o campo do design de movimento UX amadureceu. Muitas equipes de projeto agora acreditam que o UX inclui pensar em como as informações são vivenciadas ao longo do tempo. Os designers de movimento que trabalham com designers visuais por meio de várias iterações podem fazer uma grande diferença para encontrar soluções de sucesso. Desde o primeiro lançamento do Sketch2AE, as ferramentas cresceram e as demandas de integração por projetistas de movimento aumentaram. Estou muito animado para compartilhar o AEUX, um sistema mais robusto para trabalhar com o design de movimento UX no After Effects.

Guia para Movimentação de Material no After Effects

Bem-vindo ao AEUX

Um dos objetivos do novo sistema é oferecer suporte a mais aplicativos host e aumentar a flexibilidade ao trabalhar entre equipes. A troca de dados no ecossistema da Adobe agora é bem suportada no XD e no Illustrator, mas com o AEUX você pode importar camadas do Sketch e do Figma e suportar novos recursos do Sketch. Mais…

  • A velocidade foi aumentada em 93% no tempo de construção de pranchetas complexas.
  • As substituições de símbolos para texto e símbolos aninhados agora são suportadas. Os mestres de símbolos estão localizados de forma mais eficiente, pondo um fim ao jogo de bola de praia.
  • A exportação de imagens foi reduzida desenhando gradientes Ae nativos e eliminando imagens redundantes.
  • A precisão da camada de texto melhorou significativamente com a posição, rastreamento, avanço, substituições de letras maiúsculas / minúsculas, rotação e inversão horizontal / vertical.
  • Os grupos têm a opção de serem criados automaticamente como pré-comprimentos Ae. Além disso, grupos de camadas podem ser pré-configurados e não pré-configurados com um clique, mesmo se você não usar o importador AEUX.
  • Novos recursos adicionais, como booleanos aninhados, mascaramento de camadas e grupos, desfocagem de formas, opções para trabalhar com caminhos ou formas paramétricas.

Saiba mais e faça o download do AEUX

AEUX + Figma

Enquanto o Sketch é amplamente utilizado, muitos designers visuais também começaram a usar o Figma. O AEUX foi projetado para suportar o trabalho integrado ao alternar entre equipes.

A principal característica do Figma é a colaboração on-line, portanto, a exportação de dados de camada é feita por meio de um aplicativo da Web que acessa a API do Figma. A partir de agora, os plug-ins do Figma não podem ser executados dentro do ambiente de design, o que significa que a exportação de camadas é feita como uma exportação / importação mais tradicional. Com um aplicativo de design que é executado on-line, a segurança é a consideração mais importante.

Depois de autenticar o aplicativo de exportação do AEUX, você é solicitado a inserir um URL do arquivo do Figma. O aplicativo irá reunir todos os dados para cada um dos quadros (pranchetas) dentro do arquivo. Cada quadro pode ser baixado individualmente e todas as imagens necessárias serão processadas e fechadas também. Elimine o novo arquivo AEUX.json no painel AEUX no After Effects e as camadas serão criadas.

Nota: o aplicativo AEUX não rastreia dados do usuário e não exibe ou armazena seus projetos de forma alguma. É um robô cego que faz a conversão de seus projetos no formato JSON AEUX diretamente no navegador da sua máquina. O acesso aos dados do arquivo é gerenciado pelo proprietário do arquivo no menu Compartilhar.

Lições aprendidas

Construir ferramentas com base em como você imagina outro designer trabalhando pode ser difícil. Às vezes, suas melhores intenções não são realmente valiosas ou as pessoas encontram novos caminhos para os quais você não planejou. Aprendi muito a construir o Sketch2AE e aprendi ainda mais a construir o Overlord (plug sem vergonha para uma ferramenta comercial).

As maiores lições que tirei desses projetos são limitar a quantidade de troca de modo mental. Se alguém estiver tentando projetar, deixe-os projetar, em vez de forçá-los a ler um manual.

Remover copiar / colar

Os dados da camada agora são transferidos nos bastidores para limitar a confusão. Não é totalmente instantâneo, mas quando você mudar de Sketch para Ae, o painel deve atualizar para mostrar novas camadas prontas para compilar. Isso simplifica o processo de transferência e permite que você se concentre mais no design.

Torná-lo interativo

Para mim, uma das partes mais atraentes do processo de design é tentar coisas e descobrir o que funciona e o que não funciona. Isso é muito contrário à importação de arquivos, na qual você deve reiniciar tudo novamente se não preparar uma camada corretamente. A ideia principal do Overlord é permitir que você transfira o que precisa quando precisa. Eu queria que esse conceito fosse central no AEUX, o que exigia que eu ficasse longe do menu de mergulho e em um painel de plugins flutuante para que o Sketch correspondesse mais de perto com a experiência de ferramenta esperada em Ae.

Me mostre o que está acontecendo

Na versão anterior, as notificações eram exibidas somente após uma exportação bem-sucedida e eram facilmente perdidas na parte inferior da janela do Sketch. Então você teve que esperar e adivinhar se funcionou. (Esta foi uma experiência muito mal projetada. Sinto muito por isso.)

Um novo painel flutuante do Sketch também fornece um local dedicado para notificações (sucesso e falhas). A ideia de mostrar o processo também se estende ao Ae. Desde as atualizações do painel até as barras de progresso em composições pesadas até a notificação de falha para elementos que Ae não pode desenhar no momento.

Avançando

O design de movimento UX está crescendo e ainda estamos aprendendo o que funciona e o que não funciona e como executar e testar melhor esses projetos. Ao fazer isso, estamos tentando compartilhar o que aprendemos. Espero que o AEUX ajude você a trabalhar mais rápido e aproveitar mais o processo.

Comece com o AEUX

Interessado em trabalhar conosco? Saiba mais sobre o Google UX e envie-nos seu portfólio ou demo reel.