Figma Motion to code with Blinn Motion

Figma Motion lets designers author real timelines on the canvas. Shipping that motion into an app still means a handoff: CSS snippets, one-off React paste, video exports, or a full rebuild.Blinn Motion is the runtime path: export once, play everywhere.

Why “export from Figma” is not always enough

Figma’s own Dev Mode handoff can copy CSS, JSON, or framework-oriented snippets. That is useful for inspection and small cases. Production product UI usually needs more:

• One artifact in git — a diffable JSON file, not a screenshot of a panel
• Seek, scrub, and shared clocks — scrubbers, storyboards, multi-view sync
• Scroll and gesture drivers — progress 0…1, not only “press play”
• Web and native — DOM/Canvas and React Native from the same document

Blinn targets that gap. The Figma timeline becomes a MotionDoc;sample(doc, t) in @blinn-motion/core is the render method; adapters only paint.

The pipeline

Figma Motion timeline
        │  plugin export
        ▼
   MotionDoc JSON   (git-friendly)
        │  sample(doc, t)
        ▼
   pure-JS render tree
        │
        ├─ DOM / CSS / SVG
        ├─ Canvas 2D
        ├─ React · Vue · Svelte · Angular · Lit
        └─ React Native

Quick path: Figma → React

1. Animate a frame in Figma Motion.
2. Open the Blinn Motion plugin → Export → React → download JSON.
3. Install: npm i @blinn-motion/react
4. Mount:

import { BlinnMotion } from "@blinn-motion/react";
import doc from "./card.motion.json";

// clock-driven
<BlinnMotion doc={doc} renderer="canvas" loop autoplay />

// progress-driven (scroll, drag, state)
<BlinnMotion doc={doc} progress={scrollP} />

Full walkthrough: docs quickstart · live lab:react.blinnmotion.com.

When to use Blinn vs native Figma export

Related guides

• Blinn Motion vs Lottie — payload and player size for UI motion
• FAQ — frameworks, license, scroll-driven motion
• Figma Motion coverage — what converts today
• Playback guide — play, pause, seek, rates

Product home: https://blinnmotion.com · Docs: https://docs.blinnmotion.com · MIT onGitHub.