Video and audio in Figma Prototype? no problem | by Anna Rzepka | October, 2022

cover image with animated play button

Did you know that Figma has an open beta desktop app? It’s a magical place where you can catch a glimpse of Figma’s future and what’s to come is exciting!

One of the most recent features you can test out in Figma beta is video fill. Yes, you read that right. It is now possible to add videos to Figma without any additional plugins.

You can use it for video players, animated thumbnails, video galleries, attractive hero banners, audio chats, presentation slide decks and more. Your imagination is the only limit.

Video fill functionality is now available open Beta, Anyone can watch the video in the prototype, but only those who active payment plans Can add new videos. The files must be in Team Project, so you can’t use it with your drafts.

video fill limits
video fill limits

must be in the video mp4 format with max size 30MB, They may also have a voice.

You can think of a video fill as another type of shape fill. It works with frames, unions and vectors. You can also add it to text layers and strokes. It is possible to layer movie clips with additional fills such as solids, gradients, or images. You can apply blending modes and copy-paste them between objects on your canvas.

Enough talk, time to explore! 😉 Let’s say you want to create a landing page with an extraordinary hero banner. Nothing complicated. Just a simple black and white text and some interactive components for the buttons and animated text at the bottom of the screen. It may look like this:

base hero banner mockup
base hero banner mockup

how to pop it? Obviously add a full-screen video 😉 Draw a basic rectangle. Then click on fill in design Panel. From the dropdown, select Video Select the option and load your mp4 file.

Adding video to Figma
Adding video to Figma

press shift+e to switch on prototype tab. Make sure you check video autoplay, loop and unmute.

prototype setup
prototype setup

If you preview your prototype at this point, you’ll only see the top layer along with the video. To reveal the lower layers, switch back. design panel, scroll Layer Change section and blend mode gap, Now you can play the last interaction:

Final result
Final result

The best part is that this prototype is completely interactive. You can add scroll and trigger interactions as usual.

The new type of fill brings new types of interactions. On Trigger, you can play, pause, or toggle video playback. With clips will play continuously throughout the frame immediately, breach And smart animate infection. Just remember to name your layer consistently.

new video interactions

You can find more examples in this community playground file:

The long-awaited video support is about to arrive in Figma. Adding movie clips to your prototype will be as easy as dragging and dropping them directly from your computer. You will also be able to add sound effects to enhance the user experience. It’s still in testing but it certainly looks promising. Try!

Leave a Comment