Apresentando o Figma Motion: a sua tela agora tem uma linha do tempo
Agora, o movimento reside na tela de trabalho, no mesmo arquivo que os componentes, as variáveis e a equipe, para que os designs ganhem vida já no primeiro dia.
Compartilhar Apresentando o Figma Motion: a sua tela agora tem uma linha do tempo
Perfil do cliente: Atlassian
Para a Atlassian, o movimento na tela de trabalho removeu inconvenientes que podem impedir o lançamento. “Isso transforma as ilustrações animadas de um handoff de especialista em recurso do sistema”, afirma Alexandra Pereira, designer de produtos sênior. “O Dev Mode e o recurso de comentários na linha do tempo permitirão um fluxo contínuo de ida e volta.”
Para designers menos familiarizados com movimento, o agente os guia pelos conceitos básicos. "Quando eu estava animando um banner, solicitei que o agente sugerisse o que estava funcionando e o que não estava", afirma Davy Fung, designer de produtos líder. Esse recurso ajuda a desmistificar o movimento para todos, na opinião de Maxwell Hathaway, designer de movimentos líder: "Em pouco tempo, as pessoas conseguem ver como as coisas se movem. Esse acesso vai ajudá-las a desenvolver o senso estético em menos tempo."
Quando feito corretamente When you’re designing motion, you’re designing with time. Understanding the mechanics turns movement into meaning.Principles in motion
A partir de hoje, o movimento é nativo na mesma tela de trabalho onde residem os demais designs. O movimento não é mais um gargalo ou um trabalho individual. Agora, qualquer designer pode enviar um prompt para o agente do Figma solicitando a construção de movimento diretamente na nova linha do tempo da animação, reduzindo as barreiras de entrada e maximizando as possibilidades da criação. E com o acesso ao Dev Mode e às suas funcionalidades, toda a experiência é projetada para permitir um handoff muito mais simples.
Crie e anime o design no mesmo arquivo
Em breve, você poderá usar estilos de animação personalizados para criar e salvar os seus próprios estilos.
Ao lado dos modos Design, Draw e Dev Mode, o Motion é a camada mais nova de uma experiência conectada na tela de trabalho. Alterne qualquer quadro para o modo Motion e a linha do tempo aparece ao lado do seu design.
- Controle na linha do tempo: arraste camadas para ajustar o tempo, toque para visualizar qualquer momento, e ajuste posição, escala, rotação e opacidade de keyframes de forma independente. Ative a criação automática de keyframes para registrar cada alteração feita durante a reprodução. E com os comentários baseados no tempo na tela de trabalho, qualquer pessoa pode apontar para um momento específico na animação, envolvendo toda a equipe nas revisões de movimento.
- Estilos de animação: adicione estilos de animação predefinidos, como desvanecer, mover e escalar, para começar com mais rapidez e depois continuar refinando na tela de trabalho. Na linha do tempo, você pode empilhar estilos de animação para que sejam reproduzidos simultaneamente ou arrastá-los para criar uma sequência.
Agora, o design atômico se tornou design de movimento atômico: a tela de trabalho tem keyframes. É o último grande elemento no mundo interativo.
Perfil do cliente: Adanna Onuekwusi
Para a designer de produtos e ilustradora Adanna Onuekwusi, o movimento sempre foi uma maneira de trazer alegria e emoção ao seu trabalho. Mas a alternância entre ferramentas externas, plugins baseados em navegador e o Figma para animar uma única ilustração significava uma mudança constante de contexto. A disponibilidade do movimento diretamente na tela de trabalho muda isso. “Ter tudo em um só lugar é realmente útil”, ela diz. “Posso sistematizar o processo de movimento e publicá-lo como uma biblioteca para que ele se estenda de um trabalho individual para algo que pode beneficiar outras pessoas.”
Construa um sistema de movimento para todos os arquivos
Um bom movimento não se limita a uma coleção de animações isoladas. É um conjunto de valores definidos uma vez e aplicados em todos os lugares. No entanto, a maioria das equipes nunca teve um lugar para construir esse sistema. Por isso, o movimento é reconstruído do zero a cada sprint e o lançamento reflete quem teve tempo, não o que foi projetado.
- Componentes animados: os componentes são a unidade fundamental de um design system. Agora, eles também incluem movimento. Quando você cria uma animação para um componente, ela acompanha esse componente por todas as telas e arquivos de colaboradores, da mesma forma que o preenchimento e a tipografia.
- Variáveis de movimento: permitem que você personalize essa animação. Crie uma variável de suavização, defina vários modos para essa variável e aplique-a nas animações. Altere o modo no nível de página e todas as animações que fizerem referência a essa variável serão atualizadas imediatamente.
Se software é algo com que você interage todos os dias, deveria fazer você sentir alguma coisa. O movimento é outro caminho para dar vida a isso.
Efeitos de sombreador e movimento
Agora, toda propriedade exposta por um sombreador pode ser animada na linha do tempo do movimento. Tradicionalmente, as propriedades animáveis do Figma eram poucas. Os sombreadores mudam isso: agora, qualquer elemento com um controle deslizante ou campo de entrada pode ser animado com keyframes ao longo do tempo.
Em breve, transformações 3D
Movimento e transformações 3D fazem parte da mesma decisão de design. Quando imagina como algo se move, você está pensando sobre onde ele se encontra no espaço.
Com transformações 3D, você poderá girar quadros, vetores e textos sobre o eixo z com controles nativos e visualização ao vivo enquanto arrasta. Toda transformação permanece totalmente editável. O resultado é exportado para CSS e conectado através do MCP, ou seja, o design espacial que você constrói é o design espacial que está no código. Combine transformação 3D com movimento no mesmo arquivo para prototipar interações espaciais que antes não eram possíveis no Figma.
Vá mais longe com o agente Figma
O Motion exige alta capacidade técnica. Para um designer que nunca animou antes, o agente Figma Starting today, work with an agent that is built for Figma—directly on the canvas.The Figma design agent is here
Para um designer que já faz animações, o agente assume o trabalho repetitivo para que você possa se concentrar em desenvolver o trabalho e ajustar os detalhes. Ajuste a curva de suavização ou o tempo, adicione uma propriedade ou desfaça tudo e repense a abordagem. Você pode executar vários prompts ao mesmo tempo para continuar no seu ritmo enquanto o agente lida com vários quadros.
Para sistemas empresariais, a capacidade de criar respeitando as proteções é o que realmente importa. Essa capacidade proporciona consistência, acessibilidade e qualidade de implementação, além de velocidade.
Envie o movimento que você projetou
Na produção, o movimento quase nunca corresponde exatamente ao que foi projetado. Detalhes que levaram horas para ajustar, como suavização e tempo, se perdem na passagem do arquivo para o código. O Figma elimina essa lacuna antes mesmo do handoff. Selecione qualquer quadro animado e exporte um MP4, GIF, SVG ou WEBM diretamente do arquivo para assegurar alinhamento e feedback antecipados.
Quando o arquivo estiver ready for dev, alterne para o Dev Mode e abra a aba de Movimento. Toda a linha do tempo é visível e inspecionável. Cada valor de tempo, curva de suavização e keyframe é legível, sem que o desenvolvedor precise fazer interpretações. Ele pode copiar o código de animação diretamente do painel em CSS e JSON, ou em React e motion.dev preparados para frameworks.
O Motion também é compatível com MCP Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products.
The TL;DR on MCP: Why context matters and how to put it to work
Se um colega de equipe consegue inspecionar e traduzir facilmente o movimento com os formatos que precisamos, reduzimos a diferença entre intenção e entrega.
A animação não é mais uma etapa de acabamento ou um risco do escopo. Agora, o movimento atravessa o processo de design da mesma forma que tudo o mais: do primeiro quadro à construção final, em um só lugar.
O Motion está na versão beta aberta. Usuários Iniciantes podem acessar o Motion com exportações limitadas. Usuários com acesso Full em todos os planos podem acessar primitivas de motion e exportar. A integração completa do design system e do agente Figma para o Motion está disponível nos planos pagos.
Aprenda os conceitos básicos por trás do design eficaz de movimentos e pratique esses conceitos criando animações no Figma Motion. Experimente o movimento por conta própria no nosso arquivo do playground ou comece no centro de ajuda. Inscreva-se aqui para entrar na lista de espera para transformações 3D.
Leia a recapitulação do Config criada por Dylan Field, CEO e cofundador da Figma.
