Os designers costumam criar protótipos de transições em Figma com Smart Animate e atenuação de mola ou bezier. Os desenvolvedores precisam então reproduzir esse movimento em React. Figma não exporta essas transições como código de animação funcional, portanto o trabalho é tradução.
Comece registrando o que o protótipo faz: o que desencadeia a mudança (tocar, passar o mouse, após atraso), quais camadas se movem e quais propriedades mudam, e o tempo (uma duração com uma curva de atenuação ou uma mola). O modo de inspeção e o painel de protótipo mostram esses valores.
Para casos simples, como fades ou mudanças de cor, as transições CSS são suficientes. Para molas, gestos, transições de layout compartilhadas e animação de entrada ou saída, uma biblioteca como Motion (anteriormente Framer Motion) é a escolha comum em React. Use os mesmos valores de mola escolhidos pelo designer.
Salve esses valores como tokens de movimento para que a próxima transição use o mesmo tempo. Nosso conversor Figma Animation to Spring gratuito transforma a atenuação Figma em configurações de primavera. As ferramentas de codificação de IA podem acelerar isso, especialmente quando conectadas ao servidor MCP do Figma para que possam ler o contexto do design.
Para componentes com muitos estados, como um botão com carregamento, sucesso e erro ou um fluxo de integração animado, a reconstrução manual fica cara. ExodeUI, que criamos, permite projetar esse componente uma vez e reproduzi-lo em React com o pacote exodeui npm, controlando-o com entradas e eventos de seu código.