Announcements
04/30/2025

Want to overlay animated videos on complex backgrounds without unsightly black boxes? You can now export videos with transparent backgrounds, perfect for website headers, app overlays, and dynamic presentations. ✨

🤔 Why Use Transparent Videos?

Transparent videos let you place animations over any background—whether it's a gradient, image, or even another video. This creates seamless integration with your design, making elements appear to float naturally over your content.

Common use cases:

  • 🏢 Animated logos that overlay on hero sections

  • 📦 Product animations on custom backgrounds

  • 📱 Interactive UI elements for apps

  • 🎨 Motion graphics for presentations

📋 Understanding Your Format Options

When exporting with transparency, you have two format choices—each optimized for different browsers:

🌐 WebM with VP9 Codec

  • Best for: Chrome, Firefox, Edge, and most modern browsers

  • File size: Smaller files with excellent quality

  • Browser support: ~85% of web users

  • Limitation: Safari doesn't support VP9 transparency

🍎 MOV with H.265 Codec

  • Best for: Safari and Apple devices

  • File size: Larger than WebM but good quality

  • Browser support: Safari on macOS 11+ and iOS 11+

  • Limitation: Limited support outside Apple ecosystem

ℹ️ Other Formats

  • GIF: Already includes transparency support by default. Note that GIF doesn't support partial pixel transparency, so avoid using gradients with transparent dimensions

  • MP4 not available: The MP4 codec does not support alpha channel, so it is not available at this time

🎯 How to Export with Transparency

Exporting with alpha channel support is simple:

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

  2. Select your flow and configure your export settings

  3. Choose either WebM or MOV format

  4. Enable the Transparency toggle (only appears when your design has transparent pixels)

  5. Click Export Animation

When transparency is enabled:

  • WebM files automatically use the VP9 codec

  • MOV files automatically use the H.265 codec

  • The toggle only appears if your design contains transparent background pixels

Note: MP4 format doesn't support transparency due to codec limitations. GIF format includes transparency by default when present in your design.

💻 Embedding Transparent Videos on Your Website

For maximum browser compatibility, provide both formats and let the browser choose:

<video autoplay muted loop playsinline>
  <source src="animation.mov" type='video/mp4; codecs="hvc1"'>
  <source src="animation.webm" type="video/webm">
</video>

📝 Important implementation notes:

  • List the MOV source first—this ensures Safari picks the right format

  • Include the codecs="hvc1" parameter for proper H.265 detection

  • Add playsinline for mobile compatibility

  • Consider adding muted for autoplay support

🌍 Browser Compatibility Reference

Browser

WebM (VP9)

MOV (H.265)

Chrome

✅ Full support

⚠️ Partial (v109+)

Firefox

✅ Full support

❌ No support

Safari

❌ No transparency

✅ Full support

Edge

✅ Full support

⚠️ Partial

Mobile Safari

❌ No transparency

✅ Full support (iOS 11+)

Chrome Android

⚠️ Some devices

⚠️ Device dependent

💡 Tips for Best Results

🎨 Design considerations:

  • Use solid transparent backgrounds for smaller file sizes

  • Semi-transparent elements increase file size

  • Test your exports across different browsers

⚡ Performance optimization:

  • Keep videos short and focused

  • Use lower resolution if full quality isn't needed

  • Consider using CSS animations for simple effects

🛡️ Fallback strategies:

  • Provide a poster image for unsupported browsers

  • Test thoroughly on your target devices

  • Consider using feature detection for advanced implementations

🔧 Troubleshooting

❓ Transparency not working?

  • Ensure your Figma design has transparent background (not white/colored)

  • Verify the transparency toggle is enabled during export

  • Check that you're using the correct video format for your browser

⬛ Black background showing?

  • This typically means the browser doesn't support the codec

  • Try the alternative format or update the browser

  • Some video players (like VLC, Windows Media Player) don't display transparency

📚 Additional Resources

🔬 Technical Deep Dives:

🌐 Browser Compatibility:

🎯 Alternative Approaches:

➕ Additional Suggested Resources: