Free migration tool
Figma Animation to Spring Converter
This Figma animation converter turns the duration and curve of a Smart Animate transition into a spring with similar timing, and gives you Framer Motion, Reanimated and SwiftUI code. Type the values from Figma; nothing is read from your file.
Updated
Figma Smart Animate Inputs
// From Figma: 300ms ease-out
// Framer Motion
transition={{ type: 'spring', stiffness: 439, damping: 41.9, mass: 1 }}
// React Native Reanimated
withSpring(toValue, { stiffness: 439, damping: 41.9, mass: 1 })
// SwiftUI
.animation(.spring(response: 0.30, dampingFraction: 1), value: state)How to use the Figma Animation to Spring Converter
- 1
Open the transition in Figma
Select the prototype connection and note the animation duration and curve in Interaction details.
- 2
Enter the duration
Set the same duration in milliseconds.
- 3
Pick the closest curve
Choose Ease out or Ease in and out for no bounce, Quick or Bouncy for a spring with overshoot.
- 4
Copy the code
Copy the spring for your platform. If you used a custom Figma spring, you can paste its stiffness, damping and mass straight into Framer Motion.
Formats and limits
| Inputs | Duration 100–800 ms, curve: ease out, ease in and out, quick, bouncy |
|---|---|
| Outputs | Stiffness, damping and mass, plus Framer Motion, Reanimated and SwiftUI code |
| Method | The duration becomes the spring response and the curve sets the damping ratio, the same model SwiftUI uses |
| Reads Figma files? | No. You type the values in. |
| Cost and sign-up | Free, no account |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| Figma Animation to Spring Converter (this page) | Turning a Figma duration and ease into a spring for code | Free, no account, runs in your browser. |
| Figma custom springs | Designers who already used a custom spring | Figma lets you set stiffness, damping and mass directly. Those three numbers work as-is in Framer Motion, so no conversion is needed. |
| cubic-bezier.com | Keeping a fixed-duration bezier curve | If you want the exact Figma bezier rather than a spring, recreate it there and use CSS cubic-bezier(). |
Frequently asked questions
Can a Figma ease-out become a spring?
Not exactly, but closely. A critically damped spring with a response equal to the Figma duration starts fast and slows down like ease-out, and it can also be interrupted smoothly.
Does this tool read my Figma file or clipboard?
No. You enter the duration and curve by hand. Nothing leaves your browser.
Why convert Figma easing to springs at all?
Springs handle interruption. If a user taps a toggle twice, a spring reverses from where it is with its current speed, while a fixed-duration curve jumps or restarts.
How do I move a whole Figma prototype into code?
For single transitions, use this converter. For full interactive components with states and logic, build the component in ExodeUI, add a state machine with inputs your code controls, and ship one .exode file through the React, Vue, SwiftUI or Flutter runtime.