Getting Started

Quick Start

Create your first animation in 60 seconds — from frame to export.

Your first animation in 60 seconds

This guide walks you through creating a simple animation from scratch. No prior animation experience needed.

1. Create a frame

Press F in Figma to create a Frame. This frame is your animation canvas — everything inside it will be animatable. Add some elements: shapes, text, icons, groups — whatever you want to animate.

2. Open MotionKit

Right-click the canvas → Plugins → MotionKit. The MotionKit window opens. Select your frame on the canvas — the plugin detects it and asks you to choose an animation mode.

3. Choose Timeline mode

Click Timeline. The keyframe timeline appears, showing all layers inside your frame. The default duration is 2 seconds at 30 FPS.

4. Start recording

Click the red Record button (●) in the toolbar, or press R. The timeline border turns red — you're now in recording mode. Any change you make in Figma will automatically create a keyframe.

5. Animate

  1. Move the playhead to 0:00 (the start). Your elements are at their initial state — an initial keyframe is captured.
  2. Drag the playhead to 1:00 (1 second in).
  3. In Figma, move an element, change its opacity, rotate it, resize it — anything. A blue diamond (◆) keyframe appears on the timeline at the playhead position.
  4. Drag the playhead to 2:00, make more changes.

6. Preview

Press Space or click Play (▶) to preview your animation in real-time. The playhead scrubs through the timeline and MotionKit applies the interpolated values to your Figma elements live.

7. Fine-tune easing

Right-click any keyframe diamond to open the context menu. Select Easing to choose from 16 built-in presets (Ease In, Ease Out, Cubic, Back with overshoot, etc.) or open the visual Bezier Curve Editor for pixel-perfect control.

8. Export

Click Render (🖥) in the toolbar. Choose your format:

  • MP4 — H.264 video. Best for sharing and social media.
  • GIF — animated GIF. Great for embeds and documentation.
  • PNG Sequence — individual frames as PNGs in a ZIP. For post-production or import into other tools.
  • Spritesheet — all frames on a single image. For game engines and web animations.

Select your scale (1× to 4×) and hit export. Everything renders in-browser, no external tools needed.

Next steps