🎯 See Everything at a Glance

No more chasing noodles across your canvas. The Transition Sidebar displays every transition in your flow as a visual card—in sequence, top to bottom. Instantly understand your animation's structure and spot timing issues before they become export surprises.

⚡ Edit Without the Runaround

Each card gives you direct access to all transition settings:

●     Delay & Duration — Dial in precise timing with inline editing

●     Animation Type — Switch between Smart Animate, Dissolve, Slide, Push, and more

●     Easing Curve — Fine-tune motion feel with a single click

●     Direction — Set slide and push directions visually

●     Match Layers — Enable Smart Animate layer matching for smoother transitions between similar elements

No more open-click-edit-close-repeat. Just click, adjust, done.

🔍 Dive Into Nested Animations

Working with component instances that have their own variant flows? Expand any card to reveal sub-animations—including nested instances, video fills, and GIF fills with their durations. Click through to configure nested flows without losing your place.

🎯 Jump to Any Element Instantly

Hover over any card and click the target icon to jump directly to that element on your canvas. Lost in a complex flow? One click and you're there.

For remote components (instances from external libraries), you'll see a close icon instead—a quick visual indicator that the source lives elsewhere.

✨ Real-Time Preview, Real Results

Every adjustment you make in the Transition Sidebar updates your preview instantly. What you see is what you export—no surprises, no re-renders, no guesswork.

⬆️ ⬇️ Scroll transition cards using navigation arrows

Arrows Holding ctrl/cmd will show double arrows, which will navigate all way to top/bottom of transition sequence

🚀 Get Started

The Transition Sidebar appears automatically in your config panel when you have a flow selected. Start clicking through your animation sequence and experience the difference.

How It Works

1. Add your audio file — Click the "Add audio" button in the bottom-left corner of the preview area. Supported formats include MP3, WAV, M4A, AAC, OGG, and WebM.

2. Set your active region — Drag the left and right handles on the waveform to select which portion of your audio track to include. Only audio within the selected region plays during preview and export.

3. Adjust track start position — Double-click on the waveform to freeze it, then drag left or right to sync your audio with specific moments in your animation. Double-click again to exit positioning mode.

4. Fine-tune with audio settings — Open the settings panel to adjust volume, add fade in/out effects, or mute the track altogether.

Exporting with Audio

To include audio in your final export, enable the sound button (speaker icon) in export settings and choose MP4, WebM, or MOV format. GIF exports do not support audio.

Removing an Audio Track

Click the trash icon to the left of the waveform to remove the audio track. A confirmation prompt will appear — this action cannot be undone.

Tips

Match your duration — Trim your audio region to align with your animation length.

Use fade effects — Fade in/out effects prevent jarring audio cuts.

Preview before export — Play through your animation with audio to check timing and levels.

Keep it balanced — If your animation has UI sounds, set background music at a lower volume.

🎯 See Everything at a Glance

No more chasing noodles across your canvas. The Transition Sidebar displays every transition in your flow as a visual card—in sequence, top to bottom. Instantly understand your animation's structure and spot timing issues before they become export surprises.

⚡ Edit Without the Runaround

Each card gives you direct access to all transition settings:

●     Delay & Duration — Dial in precise timing with inline editing

●     Animation Type — Switch between Smart Animate, Dissolve, Slide, Push, and more

●     Easing Curve — Fine-tune motion feel with a single click

●     Direction — Set slide and push directions visually

●     Match Layers — Enable Smart Animate layer matching for smoother transitions between similar elements

No more open-click-edit-close-repeat. Just click, adjust, done.

🔍 Dive Into Nested Animations

Working with component instances that have their own variant flows? Expand any card to reveal sub-animations—including nested instances, video fills, and GIF fills with their durations. Click through to configure nested flows without losing your place.

🎯 Jump to Any Element Instantly

Hover over any card and click the target icon to jump directly to that element on your canvas. Lost in a complex flow? One click and you're there.

For remote components (instances from external libraries), you'll see a close icon instead—a quick visual indicator that the source lives elsewhere.

✨ Real-Time Preview, Real Results

Every adjustment you make in the Transition Sidebar updates your preview instantly. What you see is what you export—no surprises, no re-renders, no guesswork.

⬆️ ⬇️ Scroll transition cards using navigation arrows

Arrows Holding ctrl/cmd will show double arrows, which will navigate all way to top/bottom of transition sequence

🚀 Get Started

The Transition Sidebar appears automatically in your config panel when you have a flow selected. Start clicking through your animation sequence and experience the difference.

Questions or feedback? Leave a comment below or reach out anytime. 

Happy animating! 🎬

Audio Tracks

Add background music, voiceovers, or sound effects to your Figma exports.

• Add audio files — Upload MP3, WAV, M4A, AAC, OGG, or WebM files directly in the plugin

• Waveform editor — Drag handles to select which portion of your audio track to include

• Sync to animation — Double-click the waveform to position your audio at specific moments in your animation

• Audio settings — Adjust volume, add fade in/out effects, or mute the track

Refreshed UI/UX

A faster, more powerful workflow across preview, configuration, and export.

• Larger preview area — New 360p and 540p preview dimension options for a clearer view of your animation

• Instant preview & seek — Preview designs instantly and jump to any point using the new timeline

• Search for flows — Find the flow you need instead of scrolling through endless options

• Save video fills — Upload once, access every time—no more re-uploading across sessions

• Bulk export — Select multiple flows with Ctrl/Shift and export them all at once

• Minimize plugin — Collapse the plugin for more canvas space; your settings stay intact

• In-plugin support chat — Get help right when you need it without leaving Figma

Export Performance

• Up to 80% faster exports — New rendering engine dramatically reduces export times—what used to take minutes now takes seconds

• QuickTime/MOV format — Export animations directly to QuickTime-compatible video files

• Legacy mode toggle — Switch to legacy mode for full Figma design support when needed

🚀 Improvements

• Click to seek during playback — Click anywhere on the timeline while playing to jump to that position

• Frame navigation — Step through your animation frame by frame with forward/backward buttons

• Custom GIF loop count — Choose exactly how many times your GIF loops (1–10) in addition to infinite

Export Quality

• Replace transparent pixels — Choose any solid color to replace transparent areas for platforms that don't support transparency

• Large export warnings — Get notified when dimensions exceed encoder limits, with automatic resolution adjustments

• Video fill support — Designs with video fills now export correctly, including nested elements

Performance

• Faster design loading — Improved caching for images, text, and document data

• Optimized GIF processing — Smarter frame caching reduces memory usage and speeds up playback

• Better video handling — Videos in your designs load and render more efficiently

🐞 Bug Fixes

Video & Media

• Video fills in components — Videos nested inside components now render properly

• Flipping elements — Elements that flip during transitions now animate correctly

• Transform calculations — Resolved issues with negative width/height values

How It Works

1. Add your audio file — Click the "Add audio" button in the bottom-left corner of the preview area. Supported formats include MP3, WAV, M4A, AAC, OGG, and WebM.

2. Set your active region — Drag the left and right handles on the waveform to select which portion of your audio track to include. Only audio within the selected region plays during preview and export.

3. Adjust track start position — Double-click on the waveform to freeze it, then drag left or right to sync your audio with specific moments in your animation. Double-click again to exit positioning mode.

4. Fine-tune with audio settings — Open the settings panel to adjust volume, add fade in/out effects, or mute the track altogether.

Exporting with Audio

To include audio in your final export, enable the sound button (speaker icon) in export settings and choose MP4, WebM, or MOV format. GIF exports do not support audio.

Removing an Audio Track

Click the trash icon to the left of the waveform to remove the audio track. A confirmation prompt will appear — this action cannot be undone.

Tips

Match your duration — Trim your audio region to align with your animation length.

Use fade effects — Fade in/out effects prevent jarring audio cuts.

Preview before export — Play through your animation with audio to check timing and levels.

Keep it balanced — If your animation has UI sounds, set background music at a lower volume.

Questions or feedback? Drop a comment below or reach out anytime.

Animation Quality

• Smarter text handling - Text nodes no longer shrink unexpectedly during transitions; improved detection of word line changes

• Better fill ordering - Fixed fill layer ordering during morphing (resolved issues like colors unexpectedly swapping)

• Improved paint morphing - Correctly handle cases where additional paints spawn during transitions

• Linear gradient fixes - Gradients now render correctly even when fills lack explicit handles

• GIF file size optimization - Smaller file sizes without sacrificing quality

Component Behavior

• SubComponent state tracking - Parent components now correctly track when child components change state

• Active component flag - Components that aren't part of the animation no longer cause unnecessary processing

• First-click animation fix - Components now play their first animation correctly even without prior state changes

• Fast state switching - Components with switch times shorter than frame delta now transition correctly

Performance & Stability

• Memory management - New memory manager for more efficient resource handling

• Compact vector networks - Optimized vector network logic reduces processing overhead

• Previous item caching - Reduced redundant computation across animation frames

• Encoding progress display - Better feedback during export process

🐞 Bug Fixes

Text & Typography

• Font loading errors - Resolved errors in designs with unloaded fonts

• Text scaling in components - Text maintains proper scale during component transitions

Animation Issues

• Fixed infinite component toggling - Components no longer loop indefinitely in certain configurations

• Frame size changes - Animations no longer break when frame dimensions change

• Last frame stuck - Non-looped animations now properly stop on the final frame

• Vector network matching - No longer attempts to match vector networks with different segment counts (which caused silent errors)

Legend:

🟢 Fully supported

🔴 Not supported