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 or a GIF
Select the layer (i.e a rectangle) that you want to embed into,
In your Sketch, Adobe XD, or Figma, go to the Smart Layers section of the Anima panel select Video/GIF/Lottie
In the pop-up window, paste your Video/GIF/Lottie's URL.
Select the Playback settings (Auto Play, Loop, No Controls, Cover).
Tips & Tricks! 💫
Upload your Video/GIF and get a URL
If you want to embed locally stored files, go to your Project Settings at Anima web app, and in the Files tab, you can upload your videos/GIFs files from your computer and Anima will create a direct .mp4/.gif URL that can be embedded.
Keep Video Ratio
To keep the resolution, make sure you’re keeping the video’s/GIF’s size-ratio. So when you create the ‘video layer’, use the right ratio + lock ratio 🔒 on Sketch’s inspector.
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 panel