So here's the thing — I've been building stuff in Figma for years, and the one thing that always bugged me was animation. You'd design something beautiful, then have to export frames, jump into After Effects or some other tool, and basically rebuild everything from scratch.
It felt... broken? Like we had all this power for design but then hit a wall when we wanted things to move.
What is MotionKit?
MotionKit is a completely free Figma plugin that brings real animation tools directly into Figma. Not prototypes. Not fake transitions. Actual keyframe animation, frame-by-frame workflows, morphing, text animation, and direct MP4/GIF export.
No subscriptions, no premium tiers, no "upgrade to unlock" nonsense. Just free.
The stuff that actually matters
Timeline Mode – Record Everything
You know how in After Effects you can just move stuff and keyframes appear? That's what Record mode does. Enable it, scrub the playhead, modify your layers in Figma, and boom — keyframes appear automatically. No clicking through menus, no manual keyframe placement for every single property.
It records position, scale, rotation, opacity, blur, shadows, corner radius, fills, strokes... basically everything.
Frame-by-Frame Mode – Classic Animation
For those who like drawing things frame by frame (or just prefer that level of control), there's a full cel animation workflow with onion skinning. You can scrub through frames, reference previous frames as translucent overlays, and time each frame individually.
Nested Frames (this one's wild)
Here's where it gets interesting — you can nest animations inside each other. Timeline inside frame-by-frame. Frame-by-frame inside timeline. Each with its own FPS. They all render correctly.
This unlocks so many possibilities for complex animations that I'm still discovering new ways to use it myself.
Morphing & Text Animation
Real SVG path morphing between different shapes. And text animation isn't just "fade in" — you can animate per-character, per-segment, with control over font size, color, spacing, line height, all independently keyframed.
Export to MP4, GIF, PNG
No external tools. Render directly to MP4 (H.264), GIF, or PNG sequence at 1x–4x scale. Just hit render and you're done.
Blender-Inspired Shortcuts
All keyboard shortcuts are customizable. Default shortcuts feel a bit like Blender — select keyframes and hit G to grab/move them or S to scale. If you've used Blender, you'll feel right at home.
Why free? (aka the awkward money talk)
Look, I could've gone the SaaS route. Monthly subscriptions, freemium tiers, all that. But honestly? I just wanted this to exist. I wanted designers to have proper animation tools without hitting paywalls or dealing with export workflows that waste hours.
That said... this takes a lot of time to build and maintain. So if you use it and it saves you time (or you just think it's neat), any support helps:
- GitHub Sponsors – ongoing support
- Buy Me a Coffee – one-time thing
Can't donate? That's totally fine. Just tell someone about it. Tweet, post, share, whatever. The more people know about it, the more likely it keeps existing.
What's next?
The plan is to eventually open-source this once it's mature enough. Right now it's free to use, but I want to clean up the code, add better docs, and make sure it's solid before opening it up fully.
Also working on more features, fixing bugs, and generally making it better based on feedback.
Try it yourself
- Website: motionkit.codeideal.com
- Figma Plugin: Install here
- GitHub: novincode/motionkit
- Docs: motionkit.codeideal.com/docs
If you build something cool with it, I'd love to see it. Or if you find bugs (and there probably are some), open an issue or just email me at ideyenovin@gmail.com.
Thanks for reading ✌️
Top comments (0)