Figma Motion to React

Ship a Figma Motion timeline into a React app without rebuilding keyframes in CSS or Framer Motion by hand.

What you get

Piece	Role
Figma Motion	Authoring (keyframes, springs, easing)
Blinn Figma plugin	Export → MotionDoc JSON
`@blinn-motion/react`	`<BlinnMotion />` + hooks
`@blinn-motion/core`	Pure `sample(doc, t)` engine (pulled in automatically)

Same document can later power Vue, DOM, Canvas, or React Native — see adapters overview.

Steps

Animate in Figma Motion

Put animated layers inside a top-level frame. That frame is what the plugin exports.

Export a MotionDoc

Run the Blinn Motion plugin → Export → React → download JSON. Commit the file next to your components (e.g. card.motion.json).

Install

npm i @blinn-motion/react

Mount in a client component

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

export function CardMotion() {
  return (
    <BlinnMotion
      doc={doc}
      renderer="canvas" // or "dom"
      loop
      autoplay
    />
  );
}

Next.js App Router: mark the parent with "use client" (or put this in a client component). Static export works — no Node runtime required for playback.

Optional: scroll-driven progress

<BlinnMotion doc={doc} progress={scrollProgress} />

progress is 0…1. See playback for seek, rate, and tickers.

Live lab

Open the dual-stage director console: react.blinnmotion.com.

Export from Figma Controlling playback

Get started

Core concepts

Adapters

Guides

Reference

What you get

Steps

Live lab

​What you get

​Steps

​Live lab

​Related

What you get

Steps

Live lab

Related