All Collections
FAQs for Design
How to Add Background Videos to Your Prototype
How to Add Background Videos to Your Prototype

Enhance your website and impress your users with background videos

Avishay Cohen avatar
Written by Avishay Cohen
Updated over a week ago

Grab attention!

Embedding videos or GIFs within your prototype is a great way to grab attention.
It will help you improve user experience and increase engagement with your design.

Whether you want to impress your clients, your team members, or explain your ideas better to engineers — it will help you get the job done.

Adding a background video to your design in Figma, XD and Sketch:

  1. Select the whole frame or the layer (i.e a rectangle) that you want to embed into

  2. Go to the Anima plugin and paste your video's URL

  3. Once Video/GIF/Lottie's URL is added, click + and then 'save'

  4. Set the Playback settings (Auto Play, Loop, No Controls, Cover).

Figma / XD View:

Sketch View:

Tips & Tricks! 💫

Upload your Video/GIF/Lottie and get a URL

1. If you want to embed locally stored files, click 'upload file', which will take you to the Files tab inside your Project Settings in the Anima web app.

  • You can also access your Project Settings from the top right icon inside your project in the Anima web app:

2. From here, you can upload your videos/GIF files from your computer and Anima will create a direct .mp4/.gif URL that can be copied and embedded in your design.

Keep Video Ratio

  • To keep the resolution, make sure you’re keeping the video’s/GIF’s size ratio.

Fullscreen Video

  • To make your video/GIF play in fullscreen, you should use Pins/Responsive Resize/Constraints.

  • Select the layer and Pin it to the top (or bottom) + to both sizes. Again, make sure you’ve locked the layer’s ratio.

Preview in Browser

To see your video live, Hit ‘Preview in Browser’ in the Anima plugin!

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?