Design handoff
Your Figma prototype, as an MP4
Prototype links need a login, expire, and never embed where you want them. Bring the frames across, animate the transitions properly, and hand over a file that plays anywhere.
- SVG/PNG
- Import path
- 60 fps
- Preview and export
- MP4/GIF
- Output
handoff.gram
ExportPrototype
Frame 3 of 5How it works
Three steps, start to export
The same rhythm every time — build the scene, animate it, hand over the file.
Bring the frames over
Export your frames as SVG or PNG and drop them in. SVG arrives as an editable layer tree; PNG comes in as a clean flat layer.
Animate the transitions
Smart Animate guesses. Here you decide: pick the animation, drag its bar to set the timing, and see the result while you tune it.
Export a real file
MP4 for decks and docs, GIF for Slack and email. No share link, no viewer permissions, no expiry.
Why Gramotion
The same canvas, plus time
This is deliberately Figma-shaped: the same selection, nudging, auto layout and grouping. The one thing that is new is the timeline underneath.
Auto layout you already know
Direction, gap, padding, hug and fill all behave the way you expect — and gap and padding can be animated, which Figma will not do.
SVG stays editable
Imported vectors keep their paths, groups and gradients. Recolour, split or morph them without going back to the design file.
Motion that isn't a guess
Explicit animation bars and easing presets instead of an automatic tween. When a transition is wrong, you can see exactly which part to fix.
Output
Every placement, one project
Resize a scene and its contents scale with it — so one build covers each format you need to ship.
FAQ
Questions, answered
Is there a direct Figma plugin?
Not yet — it is on the roadmap. Today you export frames as SVG or PNG and import them, which takes a few seconds and keeps vectors editable.
Do my Figma components come across?
Component instances flatten into layer trees on import. Auto layout you rebuild in Gramotion, where it works the same way and can also be animated.
Can I match my prototype's easing?
Yes. Choose the easing per animation, so you can reproduce a Figma ease or replace it with something with more character.
More use cases
What else people build here
Same editor, same workflow — a different file at the end of it.
Hand over a file, not a link
Import the frames, animate the transitions, and export something that plays everywhere.
Free plan available · No credit card required