Motion handoff tool for developers
An internal tool that turns motion specs into ready-to-handoff documentation for developers, bridging design intent and production code.
Context
Even with a motion handoff standard in place, producing the specs was still manual work. Meli Effects is a plugin MVP I built to close that gap: an After Effects-style animation timeline that lives inside Figma, working directly on the team's real design frames.
The problem
Motion specs were getting lost in translation between design and development. Developers lacked clear timing, easing, and trigger references, so micro-interactions were often rebuilt or dropped.
Process & decisions
An After Effects timeline inside Figma
Designers animate the components they already have — position, scale, opacity, easing — on a keyframe timeline, without leaving Figma or rebuilding screens in another tool. A button pulse or a bottom-sheet entrance is animated on the spot, on the real frame.
From animation to dev-ready handoff
The animation itself becomes the spec: timing, curves and layer order are captured in the tool and exported for engineers, turning motion handoff from documentation work into a byproduct of designing the motion.
The solution
I created a structured motion handoff template and tool that documents duration, delay, easing, triggers, and layer relationships in a format developers can consume directly.
Demo
Narrated MVP walkthrough: building a button-pulse animation with Meli Effects, end to end.
Results
- Faster handoff
- Less motion rework
- Consistent implementation
The tool reduced rework and made motion a reliable, repeatable part of the delivery pipeline instead of an afterthought.
Motion handoff template for Credits tribe