The animation studio inside Figma.
Timeline keyframes · Frame-by-frame · Vector morphing · Text animation · MP4/GIF export
Figma gives you complete control over design — but animation? You're stuck exporting frames, switching tools, or fighting prototype constraints.
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.
A professional keyframe timeline inspired by Blender and After Effects. Drag-and-drop keyframes with snapping, visual easing curve editor, and work area markers for loop control. Animate 17+ properties — position, scale, rotation, opacity, blur, shadows, corner radius, stroke, fill, and more.
Classic cel animation workflow. Create clips, scrub through frames, and use onion skinning to reference previous frames. Supports per-frame timing and independent frame rates.
Timeline inside frame-by-frame. Frame-by-frame inside timeline. Each runs at its own frame rate. Rendered correctly, composited properly.
Animate between different vector shapes with real SVG path interpolation. Works with all editable path types — vectors, rectangles, ellipses, polygons, stars, booleans.
Per-character, per-segment text keyframing. Animate font size, color, letter spacing, line height, and more — across individual text ranges or the full node. A full text animation engine built for motion design.
Render directly to MP4 (H.264), GIF, or PNG sequence at any scale (1x–4x). No external tools required. Plus export to Lottie JSON or MotionKit format for cross-project reuse.
Move elements in Figma and keyframes appear automatically at the playhead. Fast iteration without clicking through menus.
Fully customizable shortcuts with Blender-inspired defaults. Copy, paste, nudge, select, and navigate entirely from the keyboard.
Set custom anchor points per layer. All transforms — rotation, scale, position — animate relative to the anchor, just like After Effects.
Save and load animations as MotionKit files. Share animation data between Figma files or with teammates.
- Search for "MotionKit" in the Figma Community plugins
- Click Install
- Open any Figma file → Plugins → MotionKit
- Download the latest release from Releases
- Extract the ZIP
- In Figma Desktop: Plugins → Development → Import plugin from manifest
- Select the
manifest.jsonfrom the extracted folder
- Select a Frame in Figma
- Open MotionKit from the Plugins menu
- Enable Recording (⏺️) and move the playhead
- Modify elements in Figma — keyframes are created automatically
- Play to preview, then Render to export
Free. No subscriptions, no premium tiers, no feature gates.
MotionKit is built and maintained by a solo developer. If it's useful to you, consider supporting development:
Can't donate? Sharing MotionKit with a friend or leaving a review on the Figma Community page helps just as much.
Found a bug? Have a feature idea?
Open an issue or email ideyenovin@gmail.com.
MotionKit is free to use for personal and commercial projects.
Redistribution and resale are not permitted. See LICENSE for full terms.
Made for designers who want real animation in Figma.
