Vídeo tutorial: adicione animações personalizadas aos seus banners no Figma

Este vídeo mostra como adicionar animações de keyframes personalizadas aos seus banners com o plugin Bannerify.

Abrir o painel de animações personalizadas

Para abrir o painel de animações personalizadas, clique no botão Custom Animations no cabeçalho principal do Bannerify. O painel de animações personalizadas é aberto, e você pode começar a adicionar sua própria animação de keyframes.

Criar keyframes de animações personalizadas

Ao abrir o painel de animações, você verá 2 keyframes: o primeiro (0%) e o último (100%). Eles são adicionados por padrão e não podem ser removidos, porque uma animação de keyframes precisa de pelo menos um quadro para iniciar a animação e de um keyframe que mostre onde ela termina.

Selecionar um keyframe para editar

Para alternar na hora entre os keyframes, clique em um keyframe na faixa Keyframes, perto do topo do painel de animações personalizadas. Ao clicar em um keyframe, você pode editar as propriedades desse keyframe específico.

Inserir novos keyframes

Para adicionar um keyframe entre os pontos de início e fim padrão, digite a porcentagem dele (por exemplo, 50) no campo Add at e selecione Add.

Todo novo keyframe que você adiciona é criado automaticamente com as mesmas propriedades do keyframe selecionado no momento; assim, você pode ajustar as propriedades com base em outros keyframes já adicionados. O novo keyframe também é selecionado automaticamente depois que você clica no botão Add.

Editar as propriedades dos keyframes

Você pode editar 5 propriedades diferentes em qualquer keyframe da animação. Qualquer diferença de propriedades entre os keyframes é animada automaticamente. Por exemplo, definir a escala como 2x no keyframe de 0% e como 1x no keyframe de 100% cria automaticamente uma animação de “encolhimento”.

• A propriedade X anima a posição horizontal do elemento (em pixels).
• A propriedade Y anima a posição vertical do elemento (em pixels).
• A propriedade Opacity anima a porcentagem de transparência do elemento.
• A propriedade Rotate anima a rotação do elemento em graus.
• A propriedade Scale anima o tamanho do elemento.

Usar transformações X/Y relativas em porcentagem

Se preferir definir a posição X/Y com base em uma porcentagem do elemento animado, mude a unidade de Position de px para % nas propriedades do keyframe. Assim, você pode definir valores percentuais para X/Y (em vez de pixels).

Ao aplicar um valor de transformação X/Y em porcentagem, o elemento que recebe a animação é animado automaticamente com base no próprio tamanho, aplicando a porcentagem a esse tamanho. Por exemplo, definir uma transformação X de 10% em um keyframe move uma camada de 100px de largura em 10px. Aplicar a mesma animação, com a transformação X de 10%, a uma camada de 200px de largura move a camada em 20px.

Dividir a escala em opções de escala X/Y

Se preferir definir os valores de escala de cada eixo X/Y separadamente, mude o modo de Scale de Uniform para X / Y nas propriedades do keyframe. Assim, você define os valores de escala horizontal e vertical dos keyframes de forma independente, em vez de escalar os dois igualmente para uma animação uniforme de aumento ou redução.

Essa configuração é útil quando você precisa animar a largura ou a altura de uma camada sem afetar o outro eixo ao mesmo tempo.

Usar a pré-visualização ao vivo para ver a animação

Para ver como a animação está ficando com os keyframes e as propriedades que você atualizou, observe a área Live preview, ao lado das propriedades dos keyframes. Qualquer alteração que você fizer nos keyframes, nas propriedades ou no easing aparece automaticamente na pré-visualização ao vivo.

Você pode ajustar a velocidade de reprodução da pré-visualização ao vivo. Se quiser ver como sua animação personalizada fica em velocidades diferentes, arraste o controle deslizante Duration abaixo da pré-visualização para mudar quantos segundos cada repetição da pré-visualização leva.

Copiar e colar propriedades de keyframes

Para copiar e colar propriedades de um keyframe para outro, selecione primeiro o keyframe do qual você quer copiar as propriedades e clique no botão Copy. Depois, selecione o keyframe em que você quer colar as propriedades copiadas e clique no botão Paste para aplicá-las ao keyframe selecionado. Você também pode clicar com o botão direito em um keyframe e escolher Copy Properties ou Paste Properties.

As propriedades copiadas só ficam disponíveis até o painel ser fechado. Você pode copiar e colar propriedades entre quaisquer keyframes das suas animações enquanto o painel de animações personalizadas estiver aberto; depois que você fechar o painel, as propriedades copiadas não poderão mais ser coladas.

Excluir keyframes

Para excluir um keyframe, clique em qualquer keyframe na faixa Keyframes para selecioná-lo e depois clique no botão Delete (ou clique com o botão direito no keyframe e escolha Delete Keyframe) para removê-lo da linha do tempo. Observe que você não pode excluir os keyframes de 0% ou 100%, porque eles são keyframes padrão obrigatórios na linha do tempo da animação.

Depois que você exclui um keyframe, o keyframe de 0% é selecionado de novo automaticamente como o keyframe ativo para edição.

Excluir um keyframe da animação o remove permanentemente. Quando você exclui um keyframe, ele é removido permanentemente da linha do tempo, e não é possível desfazer a exclusão. No entanto, enquanto ainda estiver editando a linha do tempo da animação, você pode usar Copy para copiar as propriedades de um keyframe, excluí-lo e depois colar as propriedades excluídas em outro keyframe.

Definir o easing da animação

Para escolher o tipo de easing que a sua animação deve ter, selecione uma opção no menu Easing. O easing é aplicado automaticamente a toda a linha do tempo e atualiza a área Live preview, para que você veja como o easing selecionado muda o movimento da animação de keyframes.

Você pode escolher entre estas opções de easing:

• Ease (Default)
• Ease out
• Ease in
• In and out
• Linear
• Gentle
• Overshoot
• Anticipate

Definir um valor de easing Cubic Bezier personalizado

Vídeo tutorial: adicione easing cubic-bezier às animações de banners no Figma

Este vídeo mostra como adicionar easing cubic-bezier personalizado às animações de banners no Figma com o plugin Bannerify.

Para usar sua própria curva, arraste as alças da curva no menu Easing ou cole um valor CSS cubic-bezier válido (por exemplo, cubic-bezier(0.65,0.05,0.36,1);) no campo abaixo das predefinições. Para gerar uma curva cubic-bezier personalizada, use um site como https://easings.co/ ou qualquer outro serviço on-line de sua preferência que gere curvas CSS cubic-bezier.

Definir o ponto de origem da animação

Por padrão, a origem de todas as suas animações personalizadas é definida como Center e Center nos eixos X/Y, mas você pode personalizá-la clicando em um dos nove pontos da grade Origin point, que combina Top, Center ou Bottom no eixo vertical com Left, Center ou Right no eixo horizontal.

Mudar a origem da animação altera o ponto em que a animação fica “fixada” na camada. Por exemplo, definir a origem como Top e Left faz desse ponto da camada o eixo em torno do qual uma animação de rotação gira, ou o ponto a partir do qual a camada aumenta ou diminui de escala.

Salvar sua nova animação personalizada

Para salvar a nova animação, dê um nome a ela preenchendo o campo de texto Animation name e clique no botão Add New Animation.

As animações personalizadas só ficam salvas e disponíveis no arquivo do Figma atual. Salvar uma animação a deixa disponível em qualquer página do seu arquivo do Figma atual. No entanto, as animações salvas não aparecem se você executar o Bannerify em um arquivo do Figma diferente ou novo, porque elas são salvas diretamente no arquivo do Figma e não podem ser transferidas para outro arquivo. Você vai precisar recriar as animações em cada novo arquivo do Figma. Como alternativa, você pode criar uma nova página no arquivo do Figma atual, onde as animações personalizadas salvas neste arquivo continuarão disponíveis.

Usar as animações personalizadas salvas

Depois de salvar pelo menos uma animação personalizada, você pode usá-la nos banners clicando nas caixas de seleção de animações de entrada e animações de saída na linha do tempo das camadas. Você verá um novo grupo nas opções da caixa de seleção chamado Custom Animations, com todas as animações personalizadas que você salvou.

Aplicar animações personalizadas em massa Assim como as outras animações predefinidas, você também pode aplicar sua animação personalizada em massa usando o recurso de aplicação em massa.

Atualizar as animações salvas

Para atualizar uma animação personalizada salva anteriormente, escolha a animação no menu Saved animations; a animação salva e os keyframes dela são carregados no painel de animações personalizadas.

Depois de escolher a animação salva, edite os keyframes e as propriedades como precisar. Quando estiver satisfeito com as alterações, clique no botão Update Saved Animation para salvá-las e substituir os keyframes anteriores da animação.

Observe que, ao atualizar uma animação salva, os keyframes atualizados são aplicados automaticamente a todas as camadas dos seus banners que já usavam essa animação personalizada.

Criar uma nova animação a partir de uma animação salva. Se quiser carregar uma animação salva e modificá-la sem “substituir” a versão salva, crie uma nova animação a partir dela digitando um novo Animation name e clicando no botão Add New Animation.

Excluir as animações salvas

Para excluir uma animação, selecione qualquer opção em Saved animations para carregá-la e clique no botão Delete Saved Animation para excluir a animação salva.

Excluir uma animação salva a remove permanentemente, inclusive das suas camadas. Quando você exclui uma animação salva, ela é removida permanentemente da lista Saved animations. Todas as camadas dos seus banners que usavam a animação personalizada excluída voltam a ficar sem animação.