Prototyping with transparent videos

Same here. Crazy it works ONCE and then the bg appears 🤯

Oh this is bad. It makes using videos unusable for any branded/themed designs at all.

Please fix this Figma

I did some investigating and discovered that when you create a fresh transparent video file (hevc mp4 at least, maybe vp9 webm too) transparency works perfectly in Edit mode and Prototype mode.

Transparency gets lost if you:

• Duplicate the layer (duplicate will lose transparency)
• Change selection to a duplicate that is broken, then go back selecting previously working layer
• Likely other actions

Things tried to revive transparency, but failed:

• Reloading tab
• Deleting video layer and dragging video file again into the same Figma file
• Creating a fresh new Draft file and dragging the video there (if transparency for this file was lost previously, even the first drag is instantly black)
• Renaming the file in OS and dragging that into Figma (agian instantly black)
• Switching between desktop app and browser (Chrome, Safari, Firefox)

Once transparency is lost - can’t revive it.

Feels like Figma is trying to cache videos or something, getting rid of transparency in the process. Even though it is already fully capable of displaying them properly.

Since the capability is already there, this is likely to be low effort fix for dev team at Figma.

Another buggy behavior, possibly related (if caching is the cause of all this):

After I drag a second video into Figma, it’s layer name will display incorrect file name, showing the file name of the very first video that was ever dragged into that Figma file. Even if that layer was already deleted.

In the above image I first:

1. Dragged CCV Logo Outro - White - Transparent - hevc-safari.mp4
2. Deleted it’s layer CCV Logo Outro - White - Transparent - hevc-safari
3. Dragged CCV Logo Outro - White - Transparent - vp9-chrome.webm

The new layer got name CCV Logo Outro - White - Transparent - hevc-safari 1 instead of ...vp9-chrome

Notice the 1 as well. Figma thought it already had an exact copy, so it appended a 1.

Just sad how this became the reason I had to stop using Figma here at Instagram. We have a bunch of animated assets I can’t recreate in Figma and importing the transparent AE animations would solve that.

would appreciate this being fixed as well 🫶

Hi, facing the same issue, can’t preview transparent videos in prototypes…

I’ve just encountered the same issue. I wanted to use an animated SVG in my design, but Figma doesn’t support them. So, I tried using an exported version of the animation as a WebM with a transparent background, but Figma doesn’t support that either! I will have to use a solid background for now, but this is a big pain because I would need a manual export of the animation for every potential colour variation.

Figma developers should worry about this at the first place, but not the stupid updates that make the UX worse

HELLO FIGMA??? 🫤 🫤 🫤

Came here to pile on… Please, for the love of Dodd, give us seamless transparent .webm videos.

Add me to the list. Doing a prototype with Web and pulling my hair 😃

Having the same issue here. And using the same BG color in the animation as in the Figma file is not a viable option since in some cases you want to display the animation on a gradient background in Figma or on top of a photo etc.

I really hope there will be a fix to this issue soon! We need it badly. We even just shelled out 300 usd for LottieFiles thinking we would easily be able to embed them into Figma without any issues…

I have the same issue. This unexpected behavior is so frustrating, especially when preparing for a feature demo with a broken video.
Please fix ❤️

Still the case and VERY frustrating.

Also having the same issue, would love if Figma would preserve the webm-transparency. It seems to work initially but then breaks.

pleaseeee, fix this Figma!!! This is my only reason I change from xd to Figma! It works for 1 second, and than I get a black background. pleaseee 😦

Also add me to the list of wanting and needing this

3 years and not fixed yet 😕

Yep, still not working. C’mon guys, it’s been years and I would argue transparent video is pretty fundamental. Do better.

maybe in 2025… …? lol

Hello. I’ve come to the same conclusion as other users in this thread - the transparent webm file works the first time it’s uploaded for a brief moment. Then Figma decides “wait a minute this is transparent webm video, add black background at once and never be transparent again!”

Would it be possible to fix this so the video is transparent forever? It’s obvious Figma can handle it because of my several successful tests right before the site forcefuly added black background.

It is 2025 and this issue makes my usecase impossible to solve in Figma and have to resort to other software. Why should I keep paying for a broken feature? But the AI hype is more important…

I’m beginning to think that figma is causing more setbacks than improvements on the transition over to AI design systems. It might be easier to feed illustrator files into gemini to code and then feed those into cursor for a prototype. Transparent video is pretty critical for prototypes and makes me question my over-reliance on this platform. 

It’s kind of tale old as time. A company builds an incredible tool, then they get a taste of money, then they become complacent and continue working on things that will make them money instead of continuing to build upon the things that actually made them big to begin with and then another player comes out who cares about their customers and the circle begins again.

transparent videos have been supported by browsers for years. Their whole platform is basically running in a browser. Why WebM and HEVC formats with alpha are not supported is beyond me. Let’s even say they don’t use HEVC because of licensing or something, webm supports it just fine.