motn.ai — export frames to animate

About this plugin

Select a frame in Figma, click Import, and it lands on your motn canvas as apixel-exact composition — same coordinates, real text, real images. From there you animate it by describing what should move, and the result is React code you can read and edit.WHAT COMES ACROSS• Geometry, verbatim. Every element keeps its exact position and size.• Your layer structure, 1:1. 23 layers in Figma is 23 layers in motn — eachnamed after your layer, each animatable on its own.• Real text. Family, size, weight, line-height, letter-spacing and color arepreserved. Fonts resolve from your motn Kit first, then Google Fonts.• Icons and illustrations as single assets. A group with no text inside comesacross as one SVG or PNG — not a pile of loose paths.• Lines and simple shapes as code. Dividers, rules, rectangles and ellipses are rebuilt as styled elements, so you don't inherit an army of line.svg files.THEN ANIMATE ITThe import arrives as a still — there's no invented timeline. Describe themotion you want ("fade in the headline, stagger the cards") and motn writes it as a React component running at 60fps. Every layer keeps its own timing, and you can hide or drop layers before you iterate.Export as React, standalone HTML, or MP4.GOOD TO KNOW• One-way: Figma to motn. Figma animations aren't imported, and nothing is ever written back to your file.• You connect a free motn account on first run. New accounts start with 500 tokens; an import costs 70, and animating is on the free tier. Export needs a plan or a one-time $5 project unlock.• Up to 6 frames per import.• Group your layers in Figma the way you want to animate them — grouping is what motn mirrors.