Skip to content

Releases: novincode/motionkit

MotionKit v2.13.1

27 Feb 13:10

Choose a tag to compare

🐛 Fixes

  • Nested animation modifiers not running — Fixed a critical bug where post-process modifiers (Continuous Rotation, Follow Path, Stroke Trim, Copy Animation) on layers inside nested child frame animations were silently skipped during playback and export. The child timeline pipeline now computes modifier instances and applies them through the same shared pipeline used by the top-level frame.
  • Per-layer Loop Mode in nested animations — Pre-process modifiers (Loop Mode) on individual layers within nested child frames now correctly remap time for property, morph, text, and discrete tracks. Previously only the timeline-level loop mode was respected.

♻️ Refactor

  • Unified modifier interpolation pipeline — Extracted the modifier field interpolation, expression evaluation, and pre-process time remapping logic from ui/store/modifierPlayback.ts into a new shared module (shared/modifierInterpolation.ts). Both the UI and plugin now use the exact same code path, eliminating behavioral drift between preview and render.
  • Consolidated baselineRotation into LayerModifierData — The rotation baseline used by Continuous Rotation is now stored canonically in modifierData.baselineRotation (with backward-compat fallback to the deprecated LayerTimeline.baselineRotation). This keeps modifier-specific data with the modifier system.
  • Modifier cleanup on delete — Removing the last rotation-dependent modifier from a layer now cleans up modifierData.baselineRotation, preventing orphaned data from accumulating.


📦 Installation

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

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.10.2

24 Feb 21:10

Choose a tag to compare

✨ Features

  • About dialog — New "About MotionKit" entry in the overflow menu showing version, links to Figma community page, GitHub, official website, and developer profile. Includes a quick link to open the Support page.
  • Figma community CTA — Support dialog now features a prominent card to rate/like the plugin on the Figma community page.
  • Spread the Word link — "Spread the Word" card now links to the official spread-the-word page instead of GitHub.
  • Website support link — Added "Support on Website" card to the financial support section.

🐛 Fixes

  • Keyframe filter missing modifier layers — "Show only animated" filter now correctly includes layers with modifier keyframes, discrete keyframes (visibility, blend mode), text keyframes, and morph keyframes. Previously only standard property keyframes were considered, causing layers animated exclusively via modifiers or discrete tracks to disappear when the filter was active. Unified via layerHasAnyKeyframes() helper used across all four filter locations (row generation, flat layer list, auto-expand, and animated count badge).
  • MotionKit export missing data — Export now includes text tracks, discrete tracks, modifier data (instances + keyframe tracks), custom anchor points, baseline rotation, typewriter source text, initial text state, timeline markers, and timeline clips. Previously only standard property/morph tracks were exported.


📦 Installation

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

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.9.2

23 Feb 20:19

Choose a tag to compare

🐛 Fixes

  • Nested frame scaling — Fixed inner layer positions drifting during parent frame scale animations. Three interrelated bugs fixed:
    • Per-property merge tracking in applyChildTimelineAtTime (was per-node, causing x/y proportional scaling to be skipped when width/height was merged)
    • Recording filter now preserves x/y for descendants of animated resized child frames (constraint layout, not inherited movement)
    • UI playback no longer composes Frame position deltas into children (only Groups need composition — Frames create their own coordinate space)

✨ Features

  • Collapsed container keyframe aggregation — When a Group, Frame, Component, or Instance is collapsed, all descendant keyframes are shown on the parent row with full easing bars, selection, and grab/scale support. Uses the same TrackEasingBars + KeyframeDiamond components as property tracks — no custom rendering.

🏗️ Architecture

  • collectDescendantKeyframeIdsAtTime helper — Shared recursive helper for selecting descendant keyframes at a given time, used by all diamond types via the childLayers prop.
  • flattenDescendantLayers helper — Recursively flattens descendant layers for rendering on collapsed parent rows.
  • Removed AggregateChildDiamonds — Replaced custom ghost diamond + connector bar component with real diamond/easing-bar components reusing existing patterns.


📦 Installation

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

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.8.1

21 Feb 12:56

Choose a tag to compare

🐛 Fixes

  • FBF clips disabled in parent timelineresolveClipOverlaps 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 → PluginsDevelopmentImport plugin from manifest...
  4. Select the manifest.json file from the extracted folder
  5. Open any Figma file → PluginsDevelopmentMotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.7.0

19 Feb 20:14

Choose a tag to compare

✨ 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 → PluginsDevelopmentImport plugin from manifest...
  4. Select the manifest.json file from the extracted folder
  5. Open any Figma file → PluginsDevelopmentMotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.5.0

19 Feb 14:24

Choose a tag to compare

✨ 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 → PluginsDevelopmentImport plugin from manifest...
  4. Select the manifest.json file from the extracted folder
  5. Open any Figma file → PluginsDevelopmentMotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.4.0

18 Feb 20:07

Choose a tag to compare

✨ 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 → PluginsDevelopmentImport plugin from manifest...
  4. Select the manifest.json file from the extracted folder
  5. Open any Figma file → PluginsDevelopmentMotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.2.0

17 Feb 21:05

Choose a tag to compare

✨ 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 resolutionREORDER_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 → PluginsDevelopmentImport plugin from manifest...
  4. Select the manifest.json file from the extracted folder
  5. Open any Figma file → PluginsDevelopmentMotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v2.0.0

17 Feb 12:10

Choose a tag to compare

🏗️ 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 → PluginsDevelopmentImport plugin from manifest...
  4. Select the manifest.json file from the extracted folder
  5. Open any Figma file → PluginsDevelopmentMotionKit

Note: MotionKit requires Figma Desktop app for development mode.

MotionKit v1.2.5

14 Feb 16:10

Choose a tag to compare

Release v1.2.5