Prototyping with transparent videos

Whatever I try, I can’t seem to work with .mov or .webm videos with transparent background on Figma. Whenever I upload them, I get a black background. Am I doing something wrong? Or is there a workaround for this?

7 Likes

Did you figure out a solution for this? I’ve got the same issue

Nope. I did a workaround, put the website background in the video. Not ideal since every time you change the website, you should edit the video too, but it helps with visualizing.

Seems to be a bug, as I imported a .webm video with a transparent background, and when running the prototype, it appeared perfectly without the background. But then after repositioning, and resizing, when opening the prototype again the black background appeared. And even running Ctrl+Z, for the previous position and size, the prototype continued to show the black background.

1 Like

Did anyone find a solution for this?? it’s soooo annoying…

3 Likes

sera el que problema persiste?

Also seeing this issue - webm with transparency is very buggy. Shows the first time and never again after that in prototyping mode - black background.

Please fix!

1 Like

Same problem! Please fix.

Yep, same problem. We really need this one, please help.

2 Likes

Ditto! This is a NEEDED feature. Please assist!

2 Likes

Had the same issue, ended up converting it to a GIF instead

Bumping this — also having this issue.

使用 alpha + mask 可以解决

Same also having the issue.

+1 very annoying issue :frowning: Every other online editor works well with transparent background .webm.

Solution: Open Prototype settings and change your black background. Looks like Figma is adding the default prototype color to your video. :grinning:

Changing the prototype background doesn’t seem to work for me. The added background color also doesn’t seem to match the prototype background.
I can’t upload my webm files here, but here is an example Figma file:

I have the same issue. I managed to get it to work somehow when I first imported the video, afterwards it started going black without anything I can do to stop it.

Is this issue being addressed?

2024 - Problem still actual :(((

1 Like

I don’t understand this. The WebM places fine, with transparency and antialiasing in effect, and gets treated as a video fill. But then once I play the prototype I get a single good frame and then the background gets filled with black and the antialiasing gets blown away to chunkiness.

I’m surprised this hasn’t gotten addressed yet. It would be a real help in working around limitations with Figma and components with embedded transitions.