Criar uma nova animação personalizada

Para abrir o painel de animações personalizadas, clique no botão Custom Animations no cabeçalho principal do Pitchdeck (no tamanho de janela Small, ele aparece como Animations). Isso abre o painel de animações personalizadas, onde você pode começar a adicionar a sua própria animação com keyframes.

Ao abrir o painel de animações, você vê 2 keyframes: o primeiro keyframe (0%) e o keyframe final (100%). Eles são adicionados por padrão e não podem ser removidos, porque uma animação com keyframes precisa de pelo menos um quadro de onde começar e de um keyframe que mostre onde ela termina.

Selecionar um keyframe para editar

Você pode alternar na hora entre os keyframes clicando em um deles na fileira de porcentagens de 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 padrão de início e fim, digite a porcentagem dele (por exemplo, 50) e selecione Insert New Keyframe.

Todo keyframe novo é criado automaticamente com as mesmas propriedades do keyframe selecionado no momento; assim, você pode ajustar as propriedades com base em outros keyframes que já adicionou. O keyframe recém-adicionado também fica selecionado automaticamente depois que você clica no botão Insert New Keyframe.

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 “encolher”.

• A propriedade X anima a posição horizontal (esquerda/direita) do elemento, em pixels.
• A propriedade Y anima a posição vertical (cima/baixo) 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.

Copiar e colar propriedades de keyframes

Você pode copiar e colar propriedades de um keyframe para outro: primeiro, selecione o keyframe de onde quer copiar as propriedades e clique no botão Copy Properties. Depois, selecione o keyframe em que quer colar as propriedades copiadas e clique no botão Paste Properties para colá-las no keyframe selecionado.

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ê fecha o painel, as propriedades copiadas não ficam mais disponíveis para colar.

Excluir keyframes

Para excluir um keyframe, clique nele na fileira de porcentagens de keyframes para selecioná-lo e depois clique no botão Delete Keyframe para removê-lo da linha do tempo. Você não pode excluir os keyframes de 0% e 100%, porque eles são os keyframes padrão necessários para a 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 exclui permanentemente. Quando você exclui um keyframe, ele é removido permanentemente da linha do tempo e não é possível desfazer a exclusão. Mas você pode usar Copy Properties em um keyframe, excluí-lo e depois colar as propriedades excluídas em outro keyframe enquanto ainda estiver editando a linha do tempo da animação.

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

Para ver como a animação está ficando com base nos keyframes e nas propriedades que você atualizou, olhe a área Live Preview, que fica ao lado das propriedades dos keyframes e logo abaixo da linha do tempo da animação. Todas as mudanças que você fizer nos keyframes, nas propriedades ou na suavização aparecem automaticamente na pré-visualização ao vivo.

Você pode ajustar a velocidade de reprodução da pré-visualização ao vivo. Para ver como a animação personalizada fica em velocidades diferentes, mude a velocidade de reprodução da pré-visualização arrastando o controle deslizante de velocidade abaixo de Live Preview para a esquerda ou para a direita, para diminuir ou aumentar a velocidade.

Definir a suavização da animação

Você pode escolher o tipo de suavização da animação com uma opção da caixa de seleção Easing. A suavização é aplicada automaticamente a toda a linha do tempo e atualiza a área Live Preview, para você ver como a suavização escolhida muda o movimento da animação com keyframes.

Você pode escolher entre estas opções de suavização:

• Ease (padrão)
• Linear
• Ease In
• Ease Out
• Ease In Out

Salvar a nova animação personalizada

Para salvar a nova animação, dê um nome a ela preenchendo o campo de texto New Custom Animation Name e clique em Add New Animation

As animações personalizadas só ficam salvas e disponíveis no arquivo atual do Figma Salvar uma animação a deixa disponível em qualquer página do seu arquivo atual do Figma. Mas as animações salvas não aparecem se você executar o Pitchdeck em outro arquivo do Figma, completamente diferente ou novo, porque elas ficam 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 atual do Figma, 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 seus slides selecionando uma camada na aba Animations e abrindo o seletor de animações dela (All effects… ou o menu Animation). No seletor, você vai ver a aba Custom, com todas as animações personalizadas que você salvou.

Assim como as outras animações predefinidas, você também pode aplicar a animação personalizada a várias camadas de uma vez selecionando-as juntas na aba Animations.

Atualizar as animações salvas

Para atualizar uma animação personalizada que você já salvou, escolha a animação na caixa de seleção Your Saved Animations. Isso carrega a animação salva e os keyframes dela 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 mudanças, clique no botão Update Saved Animation para salvá-las e substituir os keyframes anteriores da animação.

Atualizar uma animação salva aplica automaticamente os keyframes atualizados a todas as camadas dos seus slides que já usavam a animação personalizada que você acabou de atualizar.

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

Excluir as animações salvas

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

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