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!

Terms & ConditionsCookie settingsAccessibility statement