You can also check out: How to Add Videos, GIFs, and Lottie files to your Design
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:
Select the whole frame or the layer (i.e a rectangle) that you want to embed into
Go to the Anima plugin and paste your video's URL
Once Video/GIF/Lottie's URL is added, click + and then 'save'
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?