Did you know that Figma has an open beta desktop app? It is a magical place where you can take a glimpse into the future of Figma ✨ And what is coming is exciting!
One of the most recent features you can test in Figma Beta is the video fill. Yes, you have read correctly. Now it is possible to add videos to Figma without any additional plugins.
You can use it for prototyping video players, animated thumbnails, video galleries, eye-catching hero banners, audio chats, presentation slide decks and more. Your imagination is the only limitation.
The video fill is the functionality available now in the open beta. Anyone can view videos in prototypes, but only those with active paid plans can add new videos. Files must be in a team project, so you cannot use this with your drafts.
The videos should be in mp4 format with a maximum size of 30MB. They can also have sound.
You can think about 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 like solids, gradients or images. You can apply blending modes and copy-paste them between objects on your canvas.
Enough talk, time to explore! 😉 Suppose you want to make a landing page with an extravagant hero banner. Nothing too complicated. Just a simple black-and-white text plus some interactive components for buttons and animated text at the bottom of the screen. It can look like this:
How to make it pop? Add a full-screen video, obviously 😉 Draw a basic rectangle. Then click on a fill in the Design panel. From the dropdown, choose the Video option and load your mp4 file.
Press Shift+E to switch to the Prototype tab. Make sure you check the video autoplay, loop and unmute.
If you preview your prototype at this point, you will see only the top layer with the video. To reveal the lower layers, switch back to the Design panel, scroll to the Layer section and change the blending mode to Difference. Now you can play the final interaction:
The best part is that this prototype is fully interactive. You can add scroll and trigger interactions as usual.
The new type of fill brings new kinds of interactions. On trigger, you can play, pause or toggle video playback. Clips will play continuously across frames with Instant, Dissolve and Smart animate transitions. Just remember to name your layer consistently.
You can find more examples in this Community playground file:
The long-awaited video support in Figma is just around the corner. Adding movie clips to your prototypes 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 is still in testing but for sure it looks promising. Give it a try!
Read the full article here
