The animation studio inside Figma.
Timeline keyframes · Frame-by-frame · Vector morphing · Text animation · MP4/GIF export
Figma gives you complete design control — but animation? You're stuck exporting frames, switching tools, rebuilding everything elsewhere.
MotionKit brings a full animation timeline into Figma. Keyframes, easing curves, frame-by-frame workflows, vector morphing, text animation, and direct video export — all without leaving your canvas.
No subscriptions. No paywalls. Just animation.
Professional keyframe timeline inspired by Blender and After Effects. Drag keyframes with snapping, visual easing curves, and work area markers. Animate 17+ properties — position, scale, rotation, opacity, blur, shadows, corner radius, stroke, fill, and more.
Modifiers: Apply stroke trim, follow path animations, and per-layer loop modes (once, loop, ping-pong) without keyframes.
Clips: Organize timeline animations as draggable clips with independent settings. Extend, trim, and batch-move clips.
Recording Mode: Move elements in Figma and keyframes appear automatically at the playhead. No menus, no clicking — just animate.
Classic cel animation workflow with onion skinning. Create clips, scrub frames, and reference previous frames as translucent overlays. Independent frame rates and per-frame timing.
Layers Panel: Drag-sort FBF frames alongside detached layers (persistent non-animated elements). Unified context menus, inline rename (F2), and smart grouping.
Detached Layers: Mark frames as continuous layers that stay visible across the animation — perfect for backgrounds, UI chrome, or persistent elements.
Timeline inside frame-by-frame. Frame-by-frame inside timeline. Each runs at its own FPS, rendered and composited correctly. This unlocks complex animation possibilities that weren't possible before.
Animate between different vector shapes with real SVG path interpolation. Works with vectors, rectangles, ellipses, polygons, stars, and boolean operations.
Per-character, per-segment text keyframing. Animate font size, color, letter spacing, line height across individual ranges or full nodes. A complete text animation engine for motion design.
Render directly to MP4 (H.264), GIF, or PNG sequence at any scale (1x–4x). Export to Lottie JSON or MotionKit format for cross-project reuse. No external tools required.
Fully customizable shortcuts with Blender-inspired defaults. Select keyframes and press G to move, S to scale. Copy, paste, nudge, select — entirely from keyboard.
- Anchor Points: Custom anchor points per layer for rotation and scaling
- Preset Library: Save and reuse animations, use built-in defaults
- Snapping Tools: Customizable snapping for precise keyframe placement
- Import/Export Timelines: Share animation data between files and teammates
- Help & Lessons: In-app help dialog with searchable docs and online community tutorials loaded from GitHub
- Search "MotionKit" in Figma Community plugins
- Click Install
- Open any Figma file → Plugins → MotionKit
→ Install from Figma Community
- Download from GitHub Releases
- Extract the ZIP
- Figma Desktop: Plugins → Development → Import plugin from manifest
- Select
manifest.jsonfrom extracted folder
- Select a Frame in Figma
- Open MotionKit from Plugins menu
- Enable Recording (⏺️) and move the playhead
- Modify elements in Figma — keyframes created automatically
- Play to preview, Render to export
Free. No subscriptions, no premium tiers, no paywalls.
This is a passion project with no external funding. It exists because of community support.
MotionKit is built and maintained by a solo developer with no funding. If it saves you time or you think it's neat, consider supporting:
Can't donate? That's totally fine. You can help by:
- Sharing MotionKit with friends and colleagues
- Leaving a review on Figma Community
- Posting about it on social media
- Starring this repo ⭐
Every bit helps keep this free tool alive and improving.
- Website: motionkit.codeideal.com
- Documentation: motionkit.codeideal.com/docs
- Figma Plugin: Install here
- GitHub: github.com/novincode/motionkit
Found a bug? Have a feature idea? Want to share what you built?
- Open Source: Planning to open-source once the plugin matures
- More export formats and features based on community feedback
- Better docs and tutorials
- Performance improvements
MotionKit is free to use for personal and commercial projects.
Redistribution and resale are not permitted. See LICENSE for full terms.
Built for designers who want real animation in Figma.
No funding. No investors. Just community support.
Made with ♥ by @novincode
