🤔 Why Lottie?

Video and GIF exports are pixels — they get heavy at high resolutions and blurry at the wrong size. Lottie is different: it describes your animation as vectors and keyframes, so it stays razor-sharp at any size, scales from a favicon to a billboard, and is often a fraction of the file size.

Common use cases:

• 🌐 Hero animations and micro-interactions on websites

• 📱 Native animations in iOS and Android apps

• 🎨 Animated icons and illustrations that need to stay crisp

• ⚡ Anywhere file size and load time matter

📦 Two formats, one click

When exporting you can choose between two Lottie flavors:

Lottie (.json)

• Best for — direct embedding with lottie-web, quick handoff to developers

• A single self-contained file — images embedded, drop it into any Lottie player

dotLottie (.lottie)

• Best for — image-heavy animations and modern player setups

• A compact package — images stored separately — smaller downloads, same playback

Both formats play in the standard Lottie ecosystem: lottie-web, LottieFiles, and the native iOS/Android Lottie libraries.

✨ What's supported

This isn't a screen recording — your prototype is converted transition by transition into real Lottie keyframes:

• Smart Animate — position, size, rotation, opacity, and shape morphs with your easing curves intact

• Dissolve, Slide, Push & more — the full transition palette

• Component variants — interactive components and their state animations, including nested components and looping variant cycles

• Masks & mattes — clipping, image reveals, and wipe effects

• Text — converted to vector outlines so it renders identically everywhere, no fonts required

• Images — photos and screenshots embedded automatically

• Gradients, strokes & effects — including animated gradient morphs

🪶 Automatically optimized

We obsess over file size so you don't have to. Every Lottie export is optimized on the way out:

• Precision trimming — coordinates carry exactly the precision your animation needs, roughly halving vector-heavy files

• Dead layer removal — anything that never becomes visible is stripped, along with its assets

• Smart image compression — opaque screenshots are re-encoded as JPEG when it's smaller, with transparency and animated images left untouched

The result: exports that are typically several times smaller than the naive conversion, with no visible difference.

🎯 How to export

1. Open the Export to GIF/Video plugin from your Figma resources

2. Select your flow and preview it

3. Choose Lottie or dotLottie in the format dropdown

4. Click Export Animation

That's it — drop the file into your site, app, or LottieFiles to preview.

💻 Embedding on your website

The quickest way to get your animation live:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<div id="animation"></div>
<script>
  lottie.loadAnimation({
    container: document.getElementById('animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'my-animation.json'
  });
</script>

📝 Important implementation notes:

• Use the SVG renderer — renderer: 'svg' has the most complete feature support, including masks and mattes

• Set loop: true — for continuously looping animations

• For dotLottie files — use the dotLottie web player instead

💡 Tips for best results

🎨 Design considerations:

• Vector shapes, text, and solid fills convert beautifully — lean into them for the smallest files

• Large photos are the main driver of file size — crop or downscale them in Figma where you can

• Test in the player you'll actually ship with — renderers vary slightly

⚡ Where video is still king:

• Photography-heavy designs — designs dominated by full-screen photography or video fills often compress better as MP4/WebM

• Complex blend modes and heavy blurs — approximated in some Lottie players

🔧 Troubleshooting

❓ Animation looks different in your player?

• Try the SVG renderer — the canvas renderer in lottie-web can't composite some mask effects

• Check your version — make sure you're on a recent lottie-web (5.12+)

📁 File larger than expected?

• Check for large images in your design — try the dotLottie format, or reduce image dimensions in Figma

• Vector-only designs should be very small — if not, reach out and we'll take a look

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

Happy animating! 🎬

Lottie & dotLottie Export 🎉

Export your prototype flows as real vector Lottie animations — the lightweight, infinitely scalable format that runs natively on the web, iOS, and Android. Crisp at any size, often a fraction of the file size of video.

• Two formats — Lottie JSON, plus dotLottie packages (Pro) with separately stored images for smaller downloads

• True vector output — Smart Animate, dissolves, pushes and slides converted to genuine Lottie keyframes with your easing curves and spring physics intact

• Deep Figma coverage — Component variants (including nested and looping), masks and mattes, boolean shapes, image crops and filters, gradients, blend modes, and text as vector outlines

• Optimized output — Precision trimming, dead-layer removal, and smart image compression keep files a fraction of the naive size

• Bulk-ready — Available in single and bulk export with staged progress and cancel support

APNG Export

• Full-color animated images — APNG supports millions of colors and real alpha transparency, a big step up from GIF's 256 colors

• Cleaner format picker — The format dropdown is now organized into sections

New Video Decoding Engine

Video fills are now decoded with the modern WebCodecs engine.

• Smooth playback — Seek-free decoding in both preview and export

• WebM video fills — VP8/VP9 video fills now supported

• Graceful fallbacks — Automatic software-decoder retry and recovery keep unusual codecs and GPU-less machines working

Timeline & Sidebar Overhaul

• Scrub the canvas live — Drag the playhead and watch your animation follow in real time

• Structural track — See frame boundaries and transition shading at a glance

• Spacebar control — Tap to play/pause, hold to pan; full arrow-key navigation and frame stepping

• Self-organizing sidebar — The active card follows playback with in-card progress, and a draggable scrollbar jumps anywhere instantly

More Control Over Previews & Media

• 720p preview — A new larger preview dimension for detail work

• Per-video mute — Silence individual video fills, remembered per video

• Auto-detected media flows — Frames with video or GIF fills become exportable flows even without prototype connections

Figma Glass Effect

• Faithful glass rendering — Frost, refraction, dispersion, lighting, and bevel highlights calibrated against Figma's own output

Text on a Path

• Curved text — Text-on-path layers now render correctly in exports

🚀 Improvements

Preview Performance

• No more transition stutter — Static-content caching and prewarming eliminate the freeze when a transition starts on heavy designs

• Realtime text — Glyph caching makes text-heavy transitions render smoothly

• Smarter about what's visible — The preview downscales media to screen size and skips off-canvas content, a big win on image-dense files

• Instant settings feedback — Timing and easing tweaks apply optimistically without a full re-render

Rendering Accuracy

• Blend modes like Figma — A new compositing engine matches Figma's layer isolation semantics for multiply, luminosity, soft light, and friends

• Cleaner fades — Overlapping disappearing layers fade as one composite instead of bleeding through each other

• Faithful PUSH transitions — Unmatched layers slide exactly as Figma does

Reliability

• GPU cleanup — Graphics resources are released as soon as exports finish

• Loud failures — Server-side conversion and upload errors surface real messages instead of failing silently

🐞 Bug Fixes

Export Correctness

• Rotated frames — Exports of rotated root frames now size from the true bounding box

• File naming — Image-sequence exports get clean names in a containing folder, and bulk exports keep their resolution/fps suffixes

Text

• Clean text swaps — Changed text switches at the end of a transition instead of cross-fade

• Smooth resizing headlines — Text morphs while resizing without jumps or freezes

• Underlines — Underline color and multi-line rendering fixed

Masks & Effects

• Mask artifacts — Fixed dark edges, white-outs at small sizes, flickering slider masks, and masked content leaking outside its frame

• Blend-mode boxes — Eliminated white boxes around groups containing blend-mode children

Components & Animation

• Nested animations — Animations inside nested instances and dissolving parents now play

• Variant resizing — Center- and max-constrained variants grow around the correct anchor

• Layer order — Figma's stacking order is honored through draws and transitions

• Flip animations — Elements flipping horizontally or vertically animate instead of snapping

Video & Media

• Frozen videos — A stalled video no longer stalls the whole preview

• Rotated footage — Phone videos display upright

• Unsupported codecs — HEVC and exotic codecs warn clearly instead of hanging

• Large uploads — Failures on very large video files (100MB+) are reported clearly

Flows & Detection

• Phantom frames — Nested-instance state changes are no longer promoted to top-level frames

• Live starting points — The flow dropdown updates as you add or remove starting points in Figma

• Accurate last frames — Final frame duration is correct with instant transitions

Audio Tracks

The audio features announced late last year are now fully live and polished.

• Embedded soundtracks — Audio tracks now export embedded in MP4 and MOV files

• Waveform fine-tuning — Smoother drag handles for trimming and positioning your track, even when zoomed in

• Format-aware sound settings — Your sound on/off choice persists when switching export formats

Animated WebP Export

• New WebP format — A modern, compact alternative to GIF with better quality at smaller sizes

• Memory-efficient encoding — Streaming encoder handles long animations without slowdowns

Automatic Canvas Sync

Edit in Figma, see it in the plugin — instantly.

• Live change detection — The plugin notices edits on your canvas and refreshes automatically while open

• Smart partial refresh — Only what changed gets reloaded (a single variant, not your whole flow), keeping sync fast

• Sync your way — A syncing indicator plus an auto-sync setting in your profile tab if you prefer manual control

Transition Sidebar, Now Wired to Preview

• Click to seek — Selecting a transition card jumps the preview straight to that moment

• Follow along — During playback the active transition card highlights in sync

• Live edits — Timing and easing changes apply to the preview in real time, no reload

• Component flows — Cards now cover flows inside components and instances, including nested sub-animations

Plan & Team Management

• Remaining-exports badge — See how many exports you have left, right in the toolbar

• Add seats in one click — Pro workspace admins can jump straight to team billing

• Refreshed pricing & upgrade flow — A clearer comparison table and a cleaner upgrade modal

🚀 Improvements

Rendering Quality

• Background blur & glass — Backdrop blur and glass-style effects now render in exports

• Blend modes on groups — Group-level blend modes are picked up and composited

• Truer masking — Group masks render faithfully without altering your layer structure

Bulk Export

• Alphabetical ordering — Flows sort by name, and ZIP contents use correct per-flow file names

• Faster startup — Selecting many flows at once spins up much quicker

Helpful Guidance

• Missing fonts notification — Get told which fonts you're missing instead of silently wrong text

• Broken image detection — Designs with corrupted image fills (a known Figma issue) show a notification with a jump-to-node shortcut so you can fix them

• Remote component awareness — Transitions driven by external-library components are flagged with a clear icon instead of failing silently

🐞 Bug Fixes

Video & Audio

• Large videos — Very large video fills no longer time out while loading

Components & Variants

• Instance-start flows — Flows starting from a component instance now show their transitions and seek correctly

• Deleted variants — Removed variants or reaction targets no longer break a flow

• Nested media — Video and GIF fills nested inside components are collected reliably

Preview & Timeline

• Playhead sync — Seek, step, and restart stay aligned with the selected transition card

• Uninterrupted playback — Config changes no longer restart the preview

• Loading states — Fixed spinners and empty states across preview, sidebar, and multi-select

Stability

• Cleanup on the canvas — Temporary helper frames are removed immediately instead of accumulating until the plugin closes

• Safari exports — Fixed export failures and duplicate-name ZIP crashes on Safari

• Color picker — No more pointer jumps while dragging

I am requesting a refund for my CreativeFlow Pro subscription.

I accidentally subscribed on July 19, 2026. As soon as I noticed the charge, I canceled my subscription. I also sent a refund request by email and through the live chat, but I have not received any response for the past 3 days.

Subscription details:

- Name: Lee Chae Yeon

- Figma email: chch5.9@g.hongik.ac.kr

- Payment date: July 19, 2026

- Amount: $29.00

I would greatly appreciate it if you could review my request and process a refund to my original payment method.

Thank you for your time, and I look forward to your response.

🎯 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.