Vídeo tutorial: anime e exporte banners para HTML a partir do Figma

Este vídeo mostra como animar e exportar, em segundos, banners HTML prontos para veicular a partir do Figma.

Selecionar animações

O Bannerify vem com dezenas de animações predefinidas baseadas em keyframes, agrupadas em 5 categorias:

• Entrances
• Exits
• Basic Transforms
• Attention Seekers
• Background Pans

Para definir uma animação de entrada, passe o mouse sobre a camada que você quer animar na linha do tempo do Bannerify e clique na caixa de seleção de cima. Percorra a lista de animações e clique no nome de uma animação para aplicá-la à camada. A pré-visualização do banner é atualizada na hora com a nova animação.

Remover as animações de uma camada. Se você não quer que uma camada tenha animações, selecione No Entry Animation e/ou No Exit Animation. Outra opção é renomear qualquer camada do Figma com o prefixo locked- (por exemplo, locked-RectangleBackground). Isso também garante que nenhuma animação seja adicionada e desativa a caixa de seleção de animações na linha do tempo do plugin.

Visualizar as animações do banner na linha do tempo

Para visualizar as animações nos seus banners, clique no botão com o ícone Play. Você pode pausar a linha do tempo a qualquer momento clicando no botão com o ícone Pause. Também é possível reiniciar a reprodução desde o começo clicando no botão com o ícone Restart.

Clique na régua de tempo acima dos banners ou arraste-a para percorrer a animação. O cursor de reprodução compartilhado fica alinhado com as faixas de tempo de todos os banners. Você também pode percorrer a animação pelo cabeçalho de um banner, sempre que a régua dele estiver visível.

Use +, −, o controle deslizante de zoom ou o gesto de pinça com dois dedos no trackpad sobre a régua ou as faixas de tempo para aplicar zoom de 100% a 1000%. Com o zoom aplicado, arraste a alça azul arredondada da barra de rolagem abaixo da régua para mover a visualização para a esquerda ou para a direita. Clique em Fit para mostrar a linha do tempo inteira de novo. Esses controles mudam apenas a visualização, sem alterar os tempos das animações nem a duração da exportação. Veja aplicar zoom e rolar a linha do tempo para conhecer todos os controles de navegação.

Para uma edição mais precisa, use encaixe, filtros de camadas, marcadores e sequências de movimento reutilizáveis ou repita uma área de trabalho em loop enquanto ajusta uma transição.

Timeline Settings

Clique em Timeline Settings no cabeçalho. O painel abre na aba General e tem quatro abas:

Aba	Controles
General	Duração da linha do tempo, Magic Delays e Magic Speeds
Timeline Tools	Repetir um intervalo da pré-visualização em loop e adicionar marcadores com nome
Motion Sequences	Salvar e reutilizar animações coordenadas
Sync Timings	Copiar os tempos entre tamanhos de banner

Snap, o filtro de camadas, Zoom To Selection e os controles para recolher grupos ficam em Timeline Settings → Timeline Tools.

Revisar e restaurar edições

Clique em History, ao lado das setas de desfazer e refazer, para navegar pelas edições da linha do tempo. Escolha uma etapa para voltar ou avançar; Current identifica o estado ativo. Novas edições feitas depois de voltar substituem o histórico posterior.

Ajustar a duração da linha do tempo

Abra Timeline Settings → General, escolha uma duração em Total Timeline Length e clique em Update Timeline Length. As durações disponíveis vão de 1 segundo a 3 minutos. A alteração vale para todos os seus banners; intervalos de tempo que ultrapassam uma linha do tempo mais curta são ajustados para caber.

Você pode restaurar a duração e os tempos anteriores com Undo ou escolher uma etapa anterior em History. Veja ajustar a duração da linha do tempo.

Adicionar animações de saída

Adicionar animações de saída funciona do mesmo jeito que adicionar animações de entrada; em vez de clicar na caixa de seleção de cima, clique na caixa de seleção de baixo para escolher uma animação de saída para a camada.

Garanta que qualquer animação de saída definida em uma camada comece depois que a animação de “entrada” terminar. Caso contrário, as duas animações vão se sobrepor e ter transições conflitantes ao mesmo tempo.

Ajustar a velocidade e o tempo das animações

Para ajustar a velocidade e o atraso das animações, clique nas bordas esquerda ou direita da barra de tempo da camada e segure e arraste com o mouse para mudar a duração da animação e o ponto de início ou fim.

Para mudar a posição da animação na linha do tempo, clique no meio da barra de tempo da camada e segure e arraste com o mouse para a esquerda ou para a direita.

Use o teclado para inserir tempos precisos. Se preferir não usar a barra de tempo, você também pode definir os valores de velocidade e atraso clicando no segundo valor da camada na linha do tempo e digitando um novo número (por exemplo, 1.5) para definir a quantidade de segundos.

Repetir animações em loop

Se você quer que a animação de uma camada específica se repita infinitamente (mesmo depois que a linha do tempo do banner terminar), ative a opção Loop ao lado da animação selecionada. Isso é útil para animações muito curtas que funcionam bem em loop (por exemplo, “Heartbeat”, “Flicker” ou “Pulse”).

Copiar e colar animações

Para copiar rapidamente uma animação de uma camada da linha do tempo para outra, use os botões Copy e Paste. Clique em Copy para copiar a animação e depois clique em Paste em qualquer outra camada para colá-la.

Colar uma animação copiada em várias camadas Você também pode aplicar a animação copiada em massa a várias camadas usando o recurso de aplicação em massa.

Aplicar animações em massa

Para aplicar rapidamente uma animação a várias camadas ao mesmo tempo, selecione algumas camadas usando as caixas de seleção ao lado do nome de cada camada (ou use o recurso Quick Select Layers) e defina a animação na área que sobe na parte inferior da janela do plugin. Quando estiver satisfeito com a animação, clique no botão Apply Animations to Selected Layers para aplicá-la a todas as camadas selecionadas.

Selecionar rapidamente camadas semelhantes

Se você trabalha com um conjunto de banners que têm os mesmos elementos ou camadas, pode usar o menu Quick Select Layers no cabeçalho do Bannerify para selecionar automaticamente as camadas semelhantes em todos os banners. Essa é uma ótima alternativa a marcar cada camada manualmente.

Exemplo de uso do Quick Select Layers Por exemplo, se todos os seus banners têm uma camada chamada CTA Button, você pode clicar nessa opção para marcar automaticamente todas as camadas CTA Button. Assim, você pode aplicar em massa animações a essa camada em todos os banners ao mesmo tempo.

Usar Magic Delays e Magic Speeds

Abra Timeline Settings → General e escolha um valor em Magic Delays ou Magic Speeds. Clique em Apply To All Entry Animations ou Apply To All Exit Animations para aplicá-lo a todos os seus banners.

Magic Delays

Escolha um atraso escalonado de 0,1 a 0,5 segundo. As camadas recebem deslocamentos de atraso sucessivos e mantêm a duração das animações.

Magic Speeds

Escolha uma duração de 0,1 a 1 segundo. Os horários de início continuam os mesmos, a menos que precisem ser antecipados para caber na linha do tempo.

Cada aplicação é uma etapa do histórico. Use Undo, Redo ou o painel History para navegar entre as alterações. Veja Magic Delays e Magic Speeds.