Figma Motion e camadas de código aproximam animação, protótipo e desenvolvimento

O Figma apresentou na Config 2026 uma mudança importante no papel do canvas. Motion, código e agentes passam a fazer parte do mesmo ambiente em que equipes já desenham interfaces e mantêm seus design systems.

O anúncio não elimina a necessidade de ferramentas especializadas nem transforma protótipos automaticamente em produtos prontos. A novidade mais relevante é outra: decisões antes separadas podem ser discutidas, inspecionadas e revisadas no mesmo arquivo.

Motion deixa de ser apenas uma demonstração

O Figma Motion (abre em nova aba) adiciona uma timeline ao Figma Design. É possível trabalhar com keyframes, controlar posição, escala, rotação e opacidade, usar estilos predefinidos e comentar momentos específicos da animação.

Componentes também podem carregar movimento. Uma animação criada em um componente pode acompanhar suas instâncias, enquanto variáveis de motion permitem ajustar duração e curvas de aceleração de forma centralizada.

No Dev Mode, valores de tempo, easing e keyframes ficam disponíveis para inspeção. O Figma informa que o código pode ser copiado em formatos como CSS, JSON e React. Isso reduz a interpretação no handoff, mas não substitui a validação da animação no produto real.

Motion está em beta aberta. Contas Starter têm acesso com limitações de exportação, enquanto recursos completos de integração com design systems e agente dependem de planos pagos.

Código vira material de exploração

As novas camadas de código no canvas (abre em nova aba) permitem colocar experiências funcionais ao lado de frames tradicionais. A equipe pode duplicar uma camada, comparar alternativas e extrair estados do código como elementos editáveis.

O fluxo também aceita repositórios do GitHub ou pastas locais. Depois da revisão visual, alterações podem voltar para a camada de código e seguir para o repositório.

Por enquanto, camadas de código estão em beta fechada. Portanto, vale tratar o recurso como direção de produto, não como uma etapa obrigatória do processo atual.

O que muda na prática

Três usos parecem especialmente úteis para equipes de produto:

1. Testar movimento antes do handoff, incluindo estados de entrada, saída e feedback. 2. Comparar alternativas funcionais, não apenas telas estáticas. 3. Registrar comentários de design, desenvolvimento e produto no mesmo artefato.

O risco é confundir velocidade de geração com qualidade. Uma animação pronta em segundos ainda precisa respeitar hierarquia, acessibilidade, redução de movimento e desempenho.

Como experimentar sem perder o foco

Comece por um componente pequeno, como um menu, uma confirmação ou uma mudança de estado. Defina primeiro o objetivo da animação. Depois, teste duração, clareza e comportamento com redução de movimento.

Para camadas de código, escolha um fluxo curto e compare duas alternativas. Avalie se a experiência ficou mais fácil de discutir e implementar. O ganho precisa aparecer na decisão da equipe, não apenas na quantidade de variações geradas.

Fontes

• Config 2026: New materials, new tools and a more expressive canvas, Figma (abre em nova aba)
• Introducing Figma Motion: Your canvas now has a timeline, Figma (abre em nova aba)
• Code on the Figma canvas, Figma (abre em nova aba)