Figma Motion Handoff

Turn Figma Motion data into production animation code without losing design intent and without inventing values that were never designed.

Core premise: Figma Motion keyframes are canvas-space. Production animations are layout-space. The translation is rarely 1:1. Your job is to know which parts translate literally, which parts are a spec to recompute at runtime, and which questions to ask when the data cannot tell you.

Pipeline

Follow these steps in order:

1. Detect the target library

Before touching Figma data, inspect the codebase:

• Check package.json for motion, framer-motion, animejs, gsap.
• Check for Tailwind (tailwindcss dependency, @import "tailwindcss" or @theme in a global stylesheet, or a tailwind.config.* file).
• Find where animation values already live: easing tokens in CSS custom properties, a lib/motion.ts or lib/animation.ts tokens module, existing @keyframes, existing variants.
• Check for @joycostudio/metri. If present, it is the required tool for any runtime measurement (see references/performance.md).