MotionKit v2.8.1

🐛 Fixes

• FBF clips disabled in parent timeline — resolveClipOverlaps now only compares clips with the same nodeId. Clips for different child frames no longer disable each other.
• Corrupted clip data repair — Auto re-enables clips on load that were incorrectly disabled by the old overlap bug.

🏗️ Architecture

• Unified child animation pipeline — Replaced applyNestedAnimationState + applyNestedFBFState with a single applyChildAnimationAtTime() used by all code paths (preview, FBF playback, render, export). Handles both FBF and Timeline modes with recursive child-of-child support.

---

---

📦 Installation

1. Download motionkit.zip from the assets below
2. Extract the ZIP file
3. In Figma Desktop → Plugins → Development → Import plugin from manifest...
4. Select the manifest.json file from the extracted folder
5. Open any Figma file → Plugins → Development → MotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.7.0

✨ Features

• Stroke Super-Group — Stroke is now a collapsible parent group with organized sub-groups, matching the Fill architecture:
  • Solid Color — Stroke color (R/G/B) and opacity.
  • Gradient — Up to 4 gradient stops (position, RGBA), gradient transform (2×3 matrix), and gradient opacity. Supports LINEAR, RADIAL, ANGULAR, and DIAMOND gradients.
  • Image Filters — Exposure, contrast, saturation, temperature, tint, highlights, shadows for image stroke paints.
  • Pattern — Scale, spacing X/Y for pattern stroke paints.
  • Settings — Stroke weight and miter limit.
  • Dash — Dash length, gap, and offset.
  • Dynamic — Frequency, wiggle, and smoothen for dynamic strokes.
  • Brush — Gap, wiggle, size jitter, angular jitter, and rotation for scatter brushes.
• Stroke Discrete Properties — Brush direction, fill type, pattern tile type, and pattern alignment are now tracked as discrete (non-interpolatable) properties.
• Fill Super-Group — Fill refactored into parent group with Solid Color, Gradient, Image Filters, and Pattern sub-groups (same architecture as Stroke).

🎨 UX Improvements

• Removed emoji icons from property groups — replaced with simple Unicode characters for consistent cross-platform rendering.
• Removed redundant icons from sub-group rows — cleaner layer list with less visual noise.
• Removed dead PROPERTY_ICONS constant from LayerList.
• Flat 2-level hierarchy for all parent groups — no more awkward 3-level nesting.

---

---

📦 Installation

1. Download motionkit.zip from the assets below
2. Extract the ZIP file
3. In Figma Desktop → Plugins → Development → Import plugin from manifest...
4. Select the manifest.json file from the extracted folder
5. Open any Figma file → Plugins → Development → MotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.5.0

✨ Improvements

• Layer Drag & Drop — Rebuilt from scratch with custom tree DnD. Drop above, below, or inside groups/frames with clear visual indicators.
• Transform & Morph Fixes — More reliable baseline sync, morph drift correction, and recording grace period for smoother workflows.

🐛 Fixes

• Drop indicator accuracy and ghost element sizing.
• Nested layer reparenting now syncs correctly with Figma.
• Groups auto-expand when dropping inside them.

---

---

📦 Installation

1. Download motionkit.zip from the assets below
2. Extract the ZIP file
3. In Figma Desktop → Plugins → Development → Import plugin from manifest...
4. Select the manifest.json file from the extracted folder
5. Open any Figma file → Plugins → Development → MotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.4.0

✨ Features

• Timeline Marker System — Add, remove, drag, select, copy/cut/paste markers across timelines. Color-coded with label support. Context menu and double-click to edit.
• Marker Edit Dialog — Inline label editing with 6-color picker and live preview.
• Shortcut Panel Search — Filter shortcuts by name, key, or description in Settings.

🎨 UX Improvements

• Redesigned marker visuals — unified diamond + stem shape with per-marker colors and anti-overlap labels.
• Grouped toolbar sections for Snap, Range, and Markers.
• Playhead centering fix for pixel-perfect alignment.
• Minimize shortcut changed to ` for quicker access.
• Work area trash only appears when both start and end are set.
• Markers respect visibility — hidden markers don't snap or show controls.

🐛 Fixes

• Markers deselect when clicking timeline background.
• G key grab prioritises keyframes/clips over markers.
• Overlapping markers cleaned up on drag and toggle.

---

---

📦 Installation

1. Download motionkit.zip from the assets below
2. Extract the ZIP file
3. In Figma Desktop → Plugins → Development → Import plugin from manifest...
4. Select the manifest.json file from the extracted folder
5. Open any Figma file → Plugins → Development → MotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.2.0

✨ Features

• Layers Panel — New sidebar tab for FBF mode. Drag-sortable list showing FBF frames as a collapsible group alongside detached layers. Thumbnails, badges, filter toggles, inline rename (F2).
• Unified Context Menus — Composable context menu system (contextMenuBuilders.ts). Shared across LayerList, FrameByFrameView, and FrameLayerPanel.

🔧 Architecture

• Figma-first layer ordering — FBF clip reorder now sends REORDER_NODES to Figma and receives FRAME_CHILDREN back as the single source of truth. No more optimistic order patching that drifts out of sync.
• Robust parent frame resolution — REORDER_NODES resolves the parent frame by explicit ID instead of relying on Figma selection, which broke when child frames were selected.

🐛 Fixes

• Fixed reordering layers not syncing to Figma when FBF clips include Frame-type children.
• Fixed drag-and-drop jumpiness caused by nested DndContext and unstable order values.
• Fixed documentchange echo during reorder via isReorderingLayers flag.

---

---

📦 Installation

1. Download motionkit.zip from the assets below
2. Extract the ZIP file
3. In Figma Desktop → Plugins → Development → Import plugin from manifest...
4. Select the manifest.json file from the extracted folder
5. Open any Figma file → Plugins → Development → MotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.0.0

🏗️ Architecture

• Unified Rendering Pipeline — ALL rendering flows through exactly two functions: computeFrameAtTime() (UI) and applyChildTimelineAtTime() (plugin). Scrubbing, playback, export, parent preview, undo/redo, and FBF mode all share the same code path. Zero duplicated rendering logic.
• Registry-Based Modifier System — Replaced all switch/case dispatch with function registries (registerApplyFn, registerPreProcessTimeFn, registerSideEffectHandler). Adding a new modifier requires zero changes to dispatch code.
• Deleted Legacy Fallback — Removed old field-pattern-matching modifier dispatch (applyStrokeTrimToNode duplicate, if ('start' in fields) sniffing) from the APPLY_FRAME handler.
• Generic Side-Effect Handling — Side effects (e.g., stroke dash pattern) dispatch via registered handlers instead of hardcoded if (effect.type === 'strokeTrim') branches.

✨ Features

• Clip System — Child frames compose into parent timelines via time-bounded clips with start/duration offsets, speed multipliers, and configurable loop modes.
• Per-Clip Loop Mode Override — Right-click a clip → Loop Mode → Auto (inherit) / Once / Loop / Ping Pong. Auto re-syncs from the child timeline's actual loop setting.
• Virtual Clip Extension — Clips repeat to fill remaining timeline duration. Virtual segments stop at the next main clip on the same layer. Removed the old 8-repeat cap; now uses remaining time with a 200-segment render cap for DOM performance.
• Global Pick Mode — Unified layer picker overlay for selecting target layers in modifier fields (Follow Path path, Copy Animation source).
• Multi-Clip Drag — Selecting multiple clips and dragging (mouse or G key) moves them all together with correct relative offsets.
• Combined G/S Key — When both keyframes and clips are selected, pressing G (grab) or S (scale) fires both operations simultaneously.
• Layer Lock Propagation — Locked layers propagate the lock state to their clips. Explicitly locked clips show a 🔒 icon.
• Frame-by-Frame Duration Fix — FBF timelines correctly calculate duration from clip structure, not just frame count.

🐛 Fixes

• Child Clip Text & Morph Animation — Nested child timelines now correctly apply text states and morph keyframes during parent preview/export.
• FBF Clip Duration — Fixed FBF clips using wrong duration source when calculating inner time.
• Clip Race Condition — Fixed pendingClipAction responding from multiple selected clips simultaneously. Now only the first selected clip (by sorted ID) handles the action.

🔧 Refactoring

• Extracted getSelectedSiblingClipStarts() helper in useClip.ts (removed duplication between mouse drag and G-key grab).
• Extracted toNestedTimelineMap() helper in App.tsx (replaced 3 duplicate Map constructions).
• Removed dead snapTime callback from useClip.ts.
• Removed duplicate export default from PickModeOverlay.tsx and LayerLinkField.tsx.
• Deleted LayerLinkField.tsx.bak.

📚 Documentation

• Updated ARCHITECTURE.md: fixed Known Limitations (morph & color are implemented), added modifier system, clip system, unified pipeline, and special track sections.
• Updated MODIFIERS.md: replaced "wire into switch" instructions with registry-based approach.
• Updated AI_GUIDELINES.md: added modifier development pattern, expanded property addition steps.
• Updated USAGE.md: added Anchor Points, Vector Morphing, Text Animation, Modifiers sections; updated property groups table and keyboard reference (G, S, M keys).
• Updated VISION.md: added Phase 5 (modifier system, discrete keyframes, fill color, image filters, clips, FBF mode, unified pipeline).
• Updated DISCRETE_KEYFRAMES.md: marked as IMPLEMENTED with status header.
• Updated STROKE_ANIMATION.md: marked as IMPLEMENTED with link to MODIFIERS.md.
• Added cross-linking navigation table to ARCHITECTURE.md.

---

📦 Installation

1. Download motionkit.zip from the assets below
2. Extract the ZIP file
3. In Figma Desktop → Plugins → Development → Import plugin from manifest...
4. Select the manifest.json file from the extracted folder
5. Open any Figma file → Plugins → Development → MotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v1.2.5

Release v1.2.5

MotionKit v1.2.4

UX improvements

MotionKit v1.2.2

Bug Fixes

MotionKit v1.2.0

MotionKit v1.2.0 Release