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.

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.