The Blinn Motion Figma plugin reads a Motion timeline and emits a MotionDoc — no PNGs, no video, just keyframes, easing and springs as data.

​
Build the plugin

The plugin previews animations with an inlined @blinn-motion/dom bundle, so build that first.

​
Load it into Figma

1

Import the manifest

In Figma: Plugins → Development → Import plugin from manifest… and pick packages/figma-plugin/manifest.json.
2

Select an animated frame

Choose a frame that has a Motion timeline (keyframes on the timeline panel).
3

Run the plugin

Preview with the DOM engine, inspect layers, review issues (badge on Advanced only), and use Docs / Site in the header to open documentation and the marketing site.
4

Export

Click Export. The plugin asks which stack you ship on, shows install + a drop-in snippet for that stack, then lets you Download .motion.json.

​
Export modal (framework guide)

Instead of a silent JSON download, Export opens a guided flow:
  1. Pick a framework — React, Vue, Svelte, Angular, Lit, Vanilla, Canvas, Next.js, React Native (Expo), Astro, or JSON only
  2. Install — copyable npm install … for that package
  3. File placement — where to drop the MotionDoc
  4. Snippet — copyable play code for that stack
  5. Download — .motion.json for your project
Links inside the modal open docs.blinnmotion.com adapter pages and blinnmotion.com.

​
After export

Or use the package shown for your stack — see Adapters overview.

​
Advanced tools

Issue count appears once — on the Advanced summary badge (not repeated in the header or status chips).
Not everything in Figma Motion converts one-to-one. Before relying on a specific effect, skim Figma Motion coverage.