Skip to main content

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?

还有序列帧动画也可以，很麻烦把所有的组件 串联起来 制作变体播放~luminace 是完美方案

I’m running into this issue as well. Kind of sad that this hasn’t received any attention.

Extremely frustrating that Figma still doesn’t support transparent videos. Having said that, here’s a neat workaround for those with the compositing chops to do so in something like After Effects.

  1. Export a compatible video with no Alpha, such as h264.
  2. Create a black & white luma matte based on the alpha of your main footage. In AE for example, drag your main comp onto the new comp button; make a new white solid and use your main comp as the track matte layer (alpha); and then create a black solid for the background layer. Again, export this new comp with no Alpha, using h264.
  3. Drag both videos into Figma and align them on top of each other, with the Luma matte on the bottom. With both selected, right-click and “use as mask”.
  4. Go into the Mask group, select the luma matte video layer and set the Mask option on the right to “Luminance”.

Hope this helps some folks in the meantime.

You, sir… are a gentleman and a scholar for figuring out this bit of a hack. Thank you.

 

Pretty impressed with the solution. Only little hic is when the video is a loop then eventually the mask video does not sync with the main video.

Dear Figma team, please consider enabling support for transparent videos. It would open up incredible possibilities for motion design and seamless UI integration. We’re dreaming of it—make it happen!

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.

 

image

 

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.

 

image

 

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.

​@Figma_Support please take a look at the above as it does much of the investigative work involved in determining the problem.

It’s essentially a bug, as videos with alpha transparency do render and play with the transparency - but only the first time. Then the black background is applied.

Being able to make use of videos with alpha transparency (which are becoming more and more used), unlocks a ton of new prototyping possibilities that aren’t possible today (at least in Figma.)

Team Figma: Please consider fixing this bug if you want to delight your users. You won’t regret it. 

Tagging you ​@Tom Reem as you seem to be responding to us users here (thank you for that). 

Terms & ConditionsCookie settingsAccessibility statement