Bringing Hype to life 🎬
Video
Adobe XD now supports prototyping with video. Just like images, you can drag or import a .mp4 file right onto the canvas. In addition to that, you can customize certain properties like the length of the video, upload a custom poster frame, set it to loop, play automatically, and set it to play on a specific trigger. You can also add videos to your library and publish them as a part of your design system. Developers can download the video assets using design specs.
Adobe XD now supports prototyping with video. Just like images, you can drag or import a .mp4 file right onto the canvas. In addition to that, you can customize certain properties like the length of the video, upload a custom poster frame, set it to loop, play automatically, and set it to play on a specific trigger. You can also add videos to your library and publish them as a part of your design system. Developers can download the video assets using design specs.
Lottie
In addition to video, XD also supports importing Lottie. You can drag and drop a Lottie JSON onto the canvas. You can set it to loop and define a trigger to playback. Video and Lottie can be set to play with tap triggers, time triggers, keyboard triggers, gamepad triggers, and end of playback (new trigger)
With support for video and Lottie, you can unlock a whole new dimension of expressiveness with your prototypes in Adobe XD.
In addition to video, XD also supports importing Lottie. You can drag and drop a Lottie JSON onto the canvas. You can set it to loop and define a trigger to playback. Video and Lottie can be set to play with tap triggers, time triggers, keyboard triggers, gamepad triggers, and end of playback (new trigger)
With support for video and Lottie, you can unlock a whole new dimension of expressiveness with your prototypes in Adobe XD.
xx
Creating interactive experiences 👁
Video and Lottie animations can be set up with triggers in XD. When you import media, you can set it to play on tap or automatically in design mode or then customize it further in prototype mode. When set to play automatically, the media will play instantly when previewed and also respect any time delay set on it.
You can add video and Lottie animations to Component states and scroll groups as well. We also introduced a new trigger called "End of Playback" which allows you to trigger an action once the video or Lottie animation has completed playing. This is very useful when you want to transition from one artboard to another or from one state to another state after a video or Lottie animation has completed playing.
Imagine being able to jump to the next screen right after a Lottie animation spinner or video has completed playing! The below experience was completely prototyped in Adobe XD using these new features.
xx
Imagine being able to jump to the next screen right after a Lottie animation spinner or video has completed playing! The below experience was completely prototyped in Adobe XD using these new features.
xx
Video + Audio + Lottie + States 🎉
Ready to go pro? You can create different states for a Component that contains a video or Lottie animation. In each state, you can define the playback properties to create truly interactive UI elements.
Here's an example of a video playing while a user interacts with a Component (play button) that has a hover state. On taping or clicking the play button it switches to another state while triggering an audio and Lottie animation simultaneously.
In each state, you can customize the Lottie animation. For example, in the default state, it's set to no playback. In the tap state it's set to play automatically and in the paused state it's set to pause.
⚠️ Turn on your sound before you play the video below
⚠️ Turn on your sound before you play the video below
xx
....
From AdobeXD to Behance
You can embed your XD prototypes directly on Behance. To get started head over to share mode in XD. Create a link for your prototype. Once the link is generated, you have the option of copying the embed code or clicking on the Behance icon to directly embed it into a new project.
xx
Credits
Stock Videos
- Tima Miroshnichenko from Pexels
- RODNAE Productions from Pexels
- Cottonbro from Pexels
- ANTHONY SHKRABA production from Pexels
- Ivan Samkov from Pexels
- Anthony Shkraba from Pexels
- MART PRODUCTION from Pexels
- RODNAE Productions from Pexels
- Cottonbro from Pexels
- ANTHONY SHKRABA production from Pexels
- Ivan Samkov from Pexels
- Anthony Shkraba from Pexels
- MART PRODUCTION from Pexels
Stock Audio
- Tracks by Aleksey Gorobetc on Adobe Stock
- Tracks by WinnieTheMoog on Adobe Stock
Stock Images
- Tracks by WinnieTheMoog on Adobe Stock
Stock Images
Lottie Animations
- Confetti by Sammie Ho on Lottie Files
- Social reactions by Erik Limon on Lottie Files
- Audio levels by Amy Tsui on Lottie Files
- Heart reaction by Apollo Studios on Lottie Files
- Social media buttons by Galasin on Lottie Files
--
- Social reactions by Erik Limon on Lottie Files
- Audio levels by Amy Tsui on Lottie Files
- Heart reaction by Apollo Studios on Lottie Files
- Social media buttons by Galasin on Lottie Files
--
