Make prototypes move with video and Lottie animations in Adobe XD
Today, at Adobe MAX 2021, we’re introducing support for playable videos and Lottie animations in your Adobe XD prototypes. These new tools will help you bring your XD prototypes even closer to the final experience and are available now in the latest version of XD.
A realistic prototype can work wonders for you. Communicate your vision, get your stakeholders aligned, and help development teams better understand how your designs should be implemented. It is often said that a prototype is worth a thousand meetings, and with the right tools, you can save yourself a lot of wasted time.
Meanwhile, motion is becoming more and more common in digital experiences. From playful animations in user onboarding to ambient background videos on a webpage, motion can be helpful and communicative and an opportunity to delight your users. But most UI/UX design tools fall short when it comes to motion. Designers often have to “fake” the details, like using still images to represent motion. While this is helpful for alignment, it means that your team won’t get to see how the final experience looks and feels until it’s written in code. As a result, motion is often compromised or lost in translation when going from design to production.
Now, with video and Lottie support in XD, you can incorporate motion early on in your creative process and create prototypes that look and feel like real websites and apps, all without the extra hand-waving. The ability to use video and animations in XD prototypes was the number one requested feature on the Adobe XD UserVoice and we’re thrilled to deliver this to our community!
How to add videos and Lottie animations to XD prototypes
When designing in XD, you will now be able to place videos and Lottie animations in your designs that will play when you preview your XD prototypes and when you share a link to your prototype from XD. Drag and drop files from your computer right onto the design canvas or import videos from your design system in Creative Cloud Libraries. Once imported, you can customize the media’s behavior, such as setting animations to loop or configuring when a video or animation will play (automatically, on tap, etc.). For videos, you can also use simple editing tools to trim the video to your desired length and upload custom thumbnail images.
Once imported, designers can customize playback behavior for videos and Lottie animations in Adobe XD prototypes.
LottieFiles plugin for Adobe XD
Alongside today’s release, we’re also introducing a new XD plugin — LottieFiles for Adobe XD — to help you discover Lottie animations to use in your website and app designs. LottieFiles offers the world’s largest collection of Lottie animations from designers around the world. With the LottieFiles for Adobe XD plugin, you can access thousands of free Lottie animations in the free LottieFiles collection. Additionally, any Lottie animations created in After Effects and shared with the LottieFiles plugin for After Effects are also available in the LottieFiles for Adobe XD plugin.
We are so incredibly excited about the possibilities of motion in your XD prototypes, adding to other powerful XD prototyping tools like Auto-Animate, Scroll Groups, and Voice Prototyping. If you are looking for inspiration, look no further than XD evangelist Howard Pinsky. You can subscribe to Howard on YouTube, follow Howard on Twitter, or tune into an upcoming Adobe Live stream to see him live in action.
In addition to video and Lottie support, we are introducing a few other exciting updates to XD:
- Share to Behance: From Share mode in XD, you can now share prototypes directly to Behance to showcase your work and get feedback from the world’s largest creative network.
- Asset Organization: Now, you can group together colors, text styles, components, and other assets in your Libraries panel to organize and structure brand and design systems.
- Export improvements: We’ve made some updates and optimizations to improve export quality and give you more flexibility and control when exporting images from XD.