Esses dois termos respondem a perguntas diferentes. O Smart Animate responde "o que muda?" Ele analisa dois quadros, encontra camadas com nomes correspondentes e anima sua posição, tamanho, rotação, opacidade e outras propriedades de um quadro para outro.
Facilitar respostas "como isso muda com o tempo?" Figma permite escolher uma curva padrão, como atenuação, uma curva cúbica-bézier personalizada ou uma mola. A flexibilização da mola é definida por configurações físicas, rigidez, amortecimento e massa, em vez de uma duração fixa, de modo que o movimento acelera e se estabiliza da mesma forma que os objetos reais.
A verdadeira diferença aparece no código. Em um produto, uma mola pode partir da posição e velocidade atuais de um elemento. Se um usuário interromper uma transição ou passar rapidamente uma folha, o movimento continuará naturalmente em vez de saltar. Uma transição de protótipo funciona sempre da mesma maneira, o que é bom para mostrar a intenção, mas não mostra como o movimento se comporta sob entrada real.
Portanto, um protótipo Figma é uma boa referência, mas os desenvolvedores ainda reconstroem o movimento no código. Para manter os valores consistentes, muitas equipes salvam as configurações de mola como tokens de movimento. Nosso conversor gratuito de animação Figma para Spring transforma a atenuação Figma em configurações de primavera que você pode usar no código.
Se você deseja que a versão interativa seja a entrega em vez de uma referência, é necessária uma ferramenta com tempo de execução. ExodeUI, que criamos, armazena estados, molas e eventos em um arquivo que roda no aplicativo.