Designers often prototype transitions in Figma with Smart Animate and spring or bezier easing. Developers then need to reproduce that motion in React. Figma does not export these transitions as working animation code, so the job is translation.
Start by recording what the prototype does: what triggers the change (tap, hover, after delay), which layers move and which properties change, and the timing (a duration with an easing curve, or a spring). Inspect mode and the prototype panel show these values.
For simple cases such as fades or colour changes, CSS transitions are enough. For springs, gestures, shared layout transitions and enter or exit animation, a library such as Motion (formerly Framer Motion) is the common choice in React. Use the same spring values the designer chose.
Save those values as motion tokens so the next transition uses the same timing. Our free Figma Animation to Spring Converter turns Figma easing into spring settings. AI coding tools can speed this up, especially when connected to Figma's MCP server so they can read the design context.
For components with many states, such as a button with loading, success and error, or an animated onboarding flow, rebuilding by hand gets expensive. ExodeUI, which we make, lets you design that component once and play it in React with the exodeui npm package, controlling it with inputs and events from your code.