Uma marca pode ter um logotipo reconhecível e, ainda assim, parecer outra quando começa a se mover. Entradas elásticas, cortes secos e transições suaves dizem coisas diferentes. Um kit de identidade em movimento define como esses comportamentos se relacionam, para que cada vídeo, apresentação ou interface não precise inventar uma personalidade nova. O trabalho começa com princípios observáveis e termina com arquivos que outras pessoas conseguem aplicar.
Traduza personalidade em comportamento
Escolha três características da marca e descreva o que elas significam em ação. Se a palavra for direta, o movimento pode ter percurso curto e terminar sem rodeios. Se for curiosa, uma janela pode revelar detalhes antes de mostrar a composição completa. Evite instruções vagas como moderno ou dinâmico. Elas permitem interpretações muito diferentes e não ajudam alguém a decidir entre duas animações que parecem igualmente bem executadas.
Vamos usar uma marca fictícia de programação cultural chamada Pulso. Sua personalidade será atenta, próxima e experimental. Atenta significa que a informação recebe tempo de leitura; próxima significa que os elementos não saltam agressivamente contra o observador; experimental significa que uma transformação inesperada pode aparecer, desde que tenha relação com o conteúdo. Esses critérios serão usados para escolher o movimento, e não escritos apenas depois para justificar uma preferência pessoal.
Defina uma gramática pequena
Comece com quatro ações: entrar, sair, revelar e responder. Para cada uma, escolha um movimento principal e uma alternativa simples. Uma palavra pode entrar por deslocamento curto; uma fotografia pode ser revelada por uma janela; um botão pode responder por mudança de cor e posição mínima. Quando esse vocabulário é pequeno, fica mais fácil reconhecer a marca e perceber quando uma ação diferente realmente acrescenta significado.
A Figma destaca movimento em 2026. A nossa proposta prática é tratar esse recurso como linguagem, não como obrigação de preencher cada intervalo. Uma marca também se reconhece nas pausas. Reserve momentos estáveis para nomes, datas e chamadas importantes. Se tudo se transforma continuamente, a audiência precisa trabalhar para separar informação de decoração.
Construa uma escala de ritmo
Em vez de definir uma única duração para qualquer situação, organize três faixas de ritmo: resposta curta, transição de conteúdo e apresentação de uma ideia. As durações concretas dependem da distância percorrida, do tamanho do elemento e do contexto de exibição. Um rótulo pequeno e uma fotografia de tela inteira não precisam obedecer ao mesmo tempo. Faça comparações lado a lado para perceber a diferença antes de registrar valores no guia.
Use uma curva de aceleração principal e descreva seu efeito em palavras. Dizer que o elemento chega com decisão e desacelera antes de repousar é mais útil do que fornecer apenas um gráfico sem explicação. Evite acumular movimentos secundários para esconder um ritmo fraco. Primeiro faça posição, escala ou recorte funcionarem sozinhos. Só acrescente rotação e deformação quando a combinação ainda puder ser compreendida sem esforço.
Anime a estrutura antes da assinatura
É tentador começar pelo logotipo porque ele oferece um símbolo pronto para transformar. Entretanto, títulos, fotografias e blocos informativos ocupam muito mais tempo em várias aplicações. Monte primeiro uma vinheta com título, imagem e data. Verifique como os elementos entram, quanto tempo permanecem e como cedem lugar ao conteúdo seguinte. Depois derive o comportamento da assinatura a partir das mesmas regras, evitando uma abertura sofisticada desconectada do restante.
Para Pulso, um círculo se transforma em janela, revela uma fotografia e deixa espaço para o título. A assinatura aparece quando a composição já está organizada. A transformação representa descoberta; a pausa representa atenção. Se o evento for urgente e informativo, usamos a alternativa curta, sem transformação extensa. Ter duas versões previstas é melhor do que acelerar arbitrariamente uma sequência longa até que ela perca o sentido e a legibilidade.
Crie componentes reutilizáveis
Prepare blocos para abertura, título, crédito, legenda e encerramento. Cada bloco precisa indicar quais propriedades podem mudar: texto, cor, imagem, duração de permanência e proporção. Separe o comportamento da aparência quando a ferramenta permitir. Assim, uma troca de fotografia não interfere na velocidade da animação e uma adaptação de cor não altera por acidente o contraste do texto. Reutilização exige limites claros, não apenas arquivos duplicados.
Inclua exemplos curtos em formatos diferentes. Uma composição horizontal pode usar o espaço lateral para uma entrada, enquanto a vertical precisa favorecer o eixo central. Não trate a adaptação como simples recorte. Reposicione pontos de interesse e preserve margens para interfaces que sobrepõem controles. Identifique a área essencial, onde devem ficar as informações que não podem desaparecer quando a peça for exibida em contextos variados.
Planeje uma versão com menos movimento
Uma identidade consistente deve sobreviver sem animação. Escolha o quadro que melhor representa cada componente e faça dele uma versão estática completa. Para aplicações interativas, considere a preferência de redução de movimento e ofereça controle quando a animação contínua puder distrair. Isso não exige abandonar a personalidade: cor, contraste, tipografia e composição continuam trabalhando quando o deslocamento é reduzido ou removido.
A orientação do W3C sobre animação por interação explica a importância de permitir que movimentos não essenciais sejam desativados. No kit, descreva o que muda nessa alternativa. Uma janela pode aparecer diretamente; um texto pode usar uma transição discreta; um efeito de profundidade pode desaparecer. Evite deixar essa decisão para a última pessoa que implementará o projeto, sem informação sobre intenção e prioridade.
Teste a identidade em situações desconfortáveis
Use um título muito curto e outro longo. Troque uma fotografia clara por uma escura. Insira um nome que ocupa duas linhas e uma data extensa. Esses testes revelam se o componente é flexível ou se só funciona com o conteúdo perfeito da apresentação. Faça também uma versão sem trilha sonora. Quando o entendimento depende exclusivamente de uma batida, a peça pode perder a lógica em reprodução silenciosa.
No exercício de Pulso, compare uma abertura de mostra de cinema com uma chamada de oficina. A primeira permite mais atmosfera; a segunda precisa entregar serviço com rapidez. Use a mesma gramática, alterando a composição e o tempo de permanência. Registre onde foi necessário criar exceções. Se cada aplicação pede uma exceção diferente, o kit pode estar detalhando demais um exemplo e explicando de menos os princípios que deveriam orientar as escolhas.
Inclua no teste um crédito com três nomes e outro com apenas um. O componente precisa acomodar a diferença sem acelerar a leitura ou criar um vazio acidental. Se houver uma área variável, marque seus limites no arquivo e no guia. Mostre também qual comportamento usar quando o conteúdo não cabe: ampliar a permanência, dividir a informação ou escolher um modelo alternativo. A equipe não deveria descobrir essa regra somente diante de uma entrega urgente.
Acrescente uma página de exemplos com a mesma frase em três contextos. Essa comparação mostra como a linguagem permanece reconhecível mesmo quando proporção, imagem e quantidade de informação mudam.
Entregue instruções que possam ser verificadas
O pacote final deve conter arquivos editáveis, exportações de referência, versões estáticas e um guia curto com exemplos aprovados. Inclua nomes de fontes, recursos usados, dependências técnicas e condições de licença. Mostre erros comuns: entrada longa demais, informação encoberta, aceleração brusca ou assinatura sem tempo de leitura. Um exemplo do que evitar torna a regra concreta e reduz interpretações que um adjetivo isolado não consegue prevenir.
Abra uma aplicação nova e tente montá-la seguindo apenas o guia. Se precisar lembrar de decisões que não estão documentadas, acrescente essas decisões ao material. O kit está pronto quando facilita o próximo trabalho sem aprisionar a criação. Consulte outros processos no portal do Gráfico Poderoso e leve dúvidas de aplicação ao contato. Uma linguagem de movimento cresce melhor quando suas escolhas podem ser explicadas, testadas e ajustadas.
Mais ideias para o seu projeto
- Match cut para designers: transições que conectam ideias
- Loop de produto: um storyboard criativo de seis segundos
Mockup autoral: estudo vetorial, com aplicação ilustrativa.