Ir para o conteúdo principal

Figma Motion

Crie animações precisas e prontas para produção diretamente na tela de trabalho.

Design de movimentos onde você cria o design.

Para iniciantes ou especialistas em animação, é fácil esticar, pular e achatar seus designs.

  • Alguém está usando o agente de IA do Figma para criar uma animação de um app de atividades ao ar livre. A caixa de prompt pede ao agente que crie uma animação com efeito glitch, escalonando as formas.Alguém está usando o agente de IA do Figma para criar uma animação de um app de atividades ao ar livre. A caixa de prompt pede ao agente que crie uma animação com efeito glitch, escalonando as formas.

    Movimento refinado com um prompt

    Crie animações de nível profissional usando o agente do Figma. Use-o para movimentos repetidos ou histórias complexas.

  • Um cartão de capa animado para um app de atividades ao ar livre é mostrado lado a lado com a linha do tempo e os keyframes de animação no FigmaUm cartão de capa animado para um app de atividades ao ar livre é mostrado lado a lado com a linha do tempo e os keyframes de animação no Figma

    Controle cada keyframe

    Você controla a linha do tempo. Defina cada quadro e propriedade exatamente como deseja, depois chame seus colegas para dar forma à animação final.

Criatividade expansiva. Controle preciso.

Clareza e expressão no seu trabalho. Anime carregamento, interações de cursor, estilos de logotipo e muito mais. O limite é a sua criatividade.

  • Construa rapidamente com estilos prontos

    Estilos de animação incorporados, incluindo Esmaecer, Girar, Dimensionar, Redimensionar e muitos mais. Combine estilos para realizar sua visão. Estilos personalizados serão disponibilizados em breve.

  • Ajuste o tempo automaticamente

    Use o autokey para rastrear e gravar seus movimentos, depois personalize cada keyframe com curvas bezier e molas.

  • Três imagens planas de uma estrutura em cúpula laranja, uma estrutura em cúpula branca e um casaco acolchoado estão sendo transformadas em uma pilha de objetos 3D.Três imagens planas de uma estrutura em cúpula laranja, uma estrutura em cúpula branca e um casaco acolchoado estão sendo transformadas em uma pilha de objetos 3D.

    Entre em uma nova dimensão

    Transformações 3D dão profundidade aos seus designs e imagens. Combine com movimento para movimentar objetos como no mundo real. Em breve.

  • Suavizar todas as transições

    Toda transição de tela para tela agora tem uma linha do tempo completa, e você pode ajustar o tempo de cada elemento. Em breve.

Construa sistemas uma vez. Aplique-os onde quiser.

Os sistemas de movimento permitem que toda a equipe adicione rapidamente recursos de movimento alinhados à marca em qualquer lugar.

  • Reutilizar componentes em vários recursos

    Sistematize movimentos comuns sem precisar desenvolver do zero toda vez. Crie modos e componentes que funcionem onde quer que sejam aplicados.

  • Troque variáveis para economizar tempo

    Alterne rapidamente diferentes valores de movimento com variáveis e tokens.

Leve animações diretamente para o código.

Todas as animações são baseadas em código real, pronto para produção e exportável diretamente do Figma.

  • Um mapa interativo de museu é mostrado lado a lado com o código usado para criá-lo.Um mapa interativo de museu é mostrado lado a lado com o código usado para criá-lo.

    Handoffs descomplicados para desenvolvedores

    Os desenvolvedores podem inspecionar toda a linha do tempo de movimento no Dev Mode e copiar o código de animação diretamente para CSS, JSON ou React.

  • Uma caixa pop-up mostra um arquivo de animação sendo movido para um agente de codificação com IA.Uma caixa pop-up mostra um arquivo de animação sendo movido para um agente de codificação com IA.

    Forneça o contexto completo do movimento para os agentes de IA

    Envie o código da animação para suas ferramentas de programação agente pelo servidor Figma MCP. Ele preserva todos os seus valores, como suavização e cronometragem.

  • Uma animação de uma cadeira e um abajur futuristas prateados está sendo exportada como um arquivo MP4.Uma animação de uma cadeira e um abajur futuristas prateados está sendo exportada como um arquivo MP4.

    Exportar diretamente do Figma

    Compartilhe movimentos onde quiser. Transforme qualquer quadro animado em arquivo MP4, GIF, SVG ou WebM.