Frame-by-Frame Mode

What is Frame-by-Frame mode?

Frame-by-Frame (FBF) mode is MotionKit's cel animation system. Instead of interpolating between keyframes like Timeline mode, FBF shows individual frames in sequence — just like traditional hand-drawn animation, stop-motion, or flipbook animation.

Each direct child of your root frame becomes a clip. During playback, clips are shown one at a time in order. Only the active clip is visible — all others are hidden.

When to use FBF

• Hand-drawn / illustration animation
• Stop-motion style content
• UI state transitions
• Sprite animation for games

The FBF interface

When you select FBF mode, the timeline transforms into a clip-based view:

• Clip gallery — visual thumbnails of each clip. Three view modes: Scroll (horizontal strip), Grid, and List. Thumbnail sizes: 60px, 90px, or 120px.
• Clip controls — per-clip duration, enable/disable, reorder, duplicate, and delete.
• Playback strip — a scrub bar at the bottom showing total frames and the current position.
• Onion skinning toggle — enable ghost frames for reference (see Onion Skinning).

Creating clips

To create clips, simply add child layers to your root frame in Figma. Each direct child becomes a clip automatically:

1. Select your root frame.
2. Add frames, groups, or layers as direct children.
3. Each child appears as a clip in the FBF gallery. Reorder them in Figma to change the animation sequence.

Clip settings

Duration

Each clip has its own duration, measured in frames. The default is 4 frames. You can set:

• Fixed frame count — the clip displays for exactly N frames (e.g., 4 frames at 30 FPS = ~133ms).
• Milliseconds — set duration in ms, automatically calculated to frames.
• Match nested timeline — if the clip has a nested timeline animation, its duration matches the nested timeline duration.

Enable / Disable

Disable a clip to skip it during playback without removing it. Disabled clips appear dimmed in the gallery.

Hybrid mode — nested timelines

This is where FBF gets powerful. A clip can contain its own nested timeline animation. The clip's children animate via keyframes while the parent FBF sequence advances clip by clip.

This enables complex workflows: a character walks (FBF frame sequence) while their expression changes (keyframe animation within each clip).

To set up a nested timeline:

1. Navigate into a clip (double-click or breadcrumb tabs).
2. The clip opens in Timeline mode with its own layers and keyframes.
3. Animate the clip's children with keyframes.
4. Navigate back to the parent — the FBF sequence now includes the nested animation.

Clip reconciliation

If you duplicate a frame or reorganize children in Figma, MotionKit automatically reconciles clip node IDs by matching clip order to the actual frame children order. This prevents stale references and keeps your animation intact even after structural changes.