Adobe XD just Leveled UP! Video & Lottie Integration Tutorial

have you ever wondered it would be really awesome if i could integrate actual video on my prototypes or also have really cool animations with lottie then this is awesome for you because adobe xd just a few days ago released the ability to do both of those things now for all of adobe xd's fault the biggest one being the inability to change the canvas background color hey adobe go ahead get on that do it already this is a big step forward i and it unlocks many possibilities so today i'm going to show you how to create that prototype that you saw at the beginning with the video with the lottie animations the micro animations and much more so as always make sure to subscribe and let's get started oh also if you're interested in ui ux design then you definitely need to check out designcourse.com now at the current time of watching this it is not available just yet i'm working on finishing it actively so make sure to enter your email to be notified when it releases but in short it is the robust way the most robust way to learn ui ux design please check out designcourse.com just to learn more play the free interactive game and you can see what it's all about all right everybody let's get started so this file i'm going to make available in fact if i don't do it now i'm not going to remember i'm going to save this as um we'll just do i don't know john doe video whatever this is going to be the before version and i'll make this available in the youtube description you can download it and follow along all right so what we this is this is a layout that i actually designed um on a live stream yesterday so i'm going to link that here uh maybe put a little card up in this video if you want to see me design this from scratch this is actually kind of like a redesign from some a user submission essentially now this design it's cool and all the structure is all there but we can make it a lot cooler uh utilizing the new video feature from adobe xd alright so what we want to do first is find a video um and then secondly you need to have somewhere to put the video in your layout sometimes it's a full screen background sometimes it might be a video player we're going to do that as well um but this is this is where we're going to put a video like right here so some considerations when it concerns finding video that is going to have important type overlapping it like for instance over here over here all this stuff you have to ensure the contrast is there i if the contrast isn't there people aren't going to be able to read the type so you really need to be mindful of the type of video that you're using also you don't want video that i has too much movement in it fortunately there's a great resource it's free it's called pexels.com forward slash video and we're going to use two different videos from that resource this is the one we're going to use here um so pexels.com four slash video type in space scroll down a bit you'll find this video um i'm also going to link it uh and yeah i mean very cool looking video our video sequence here um as you can see it's like i don't know 15 seconds or so no 30 seconds and another consideration there's a limitation you can't have a video that's i larger than 15 megabytes in xd it won't let you import it so we had to go down to the full just the hd version 1280 by 720 make sure you click download once you have that downloaded into a folder somewhere you can then just drag it on top of the element i that you wish to place so i'm going to drag that right there now we can see it so clearly it's a darker video so it works with the light type that's sitting on top of it so there's no issues in terms of contrast if there were you want you might want to do something like create an additional rectangle on top of it same exact size make it black and then drop the opacity down that that way you'll be able to uh increase the contrast and vice versa if you're on a light theme so um let's go ahead and see what happens i if we just click play this is what's going to happen nothing but because by default it's not set to play so we have to double click into it you can see it's now a mask group five so if we double click it and then double click one more time we'll get access to the video itself and you can see we have a new setting video play it on tap we don't want that we want play automatically we can also click over here to gain access to the ability to trim it to reduce the the length um and also mute it i'll mute it just in case there is sound i don't think there is and also loop playback which we want and that's it so we go ahead and click play and there we go that works nicely just like that all right so let's say for instance when somebody clicks watch um or hovers over it um we have an animation play like an arrow icon um that really hasn't been too possible um i mean it is but using like a lotty animation which really unlocks a lot of possibilities a lot of animations if you don't know i they are if we go to lottiefiles.com there are some amazing animations i've i've actually done uh tutorials on this you can do channel search um about lottie files and um search for animation so if i do like right arrow or something like that we'll see all these animations um that we can use um we're gonna use this one actually and but you can go through all these uh there's free ones and there's paid ones as well so people can make money you could perhaps make money by selling these on the marketplace at lottiefiles.com and so let's use this one so um before we get to that part however there is a lot of files plugin and this just released as well so i you want to make sure you go to your plugins section click plus up here search for lottie files it is right there you will have to log in first um and obviously create a free account at lottiefiles.com and then you can log in and then you'll see kind of a search area where you can also search for these animations as well that you can just drag right in all right i've been told some of them for some reason don't work i properly uh probably from lottiefiles.com uh but that's just obviously a limitation but this one will work so we're gonna click on this one right here and again i'll try to remember to link this and what's cool is if it doesn't have the correct colors and stuff that you need we can let me make this larger we can come to edit layer colors so this opens up an editor and we can then specify the colors that we need so it's going to be sitting right here there's nothing behind it or whatever so and i believe i think if i want to say it's going to be transparent but we'll see just in case just in case not we're going to grab this color code i'm going to bring that back and then i'm going to paste the background color right there there we go and then we want this this i we don't want it to be white we want it to be this kind of a primary color right here this purple and then we will take the group color right here and change this and hit update there we go so that's how you control the colors of the lottie animations of course you might have more options depending on how many colors that the author created so then what we could do is we can um end up downloading this and we can click this button and we have a json file and that's what a body animation essentially is it's a json file all right so now what i can do is create let's go back to our layer view i can create a kind of like a a container that it will go in and i can drag that json file right on top of there now of course we don't see it because for this particular lottie animation it starts out being just blank uh empty it's an empty frame so that's why we don't actually see it at this point in time but we could double click into it and gain access to it's very similar to the video option but it is changed this is just a loop option it's not for options and then we have play automatically plan on tap we can also edit playback which switches us to the prototype view we want it to animate on hover when we hover over this watch button area so in order to get that working correctly just to show you out of the box like uh what we have access to if we double click into this um play automatically unknown limitation you cannot play automatically a lot of file and a video at the same time the lottie file will not animate it's a known limitation it's it's in the documentation um hopefully they can fix that or make it so we can do that but no big deal play on tap for instance so if we hit play and we just click in this invisible area right here we can see our lighting animation very cool so i what we can do if we want to unhover drag this out to the size of the watch button essentially now inside of here we can see we have our um actual size of the animation i'm going to scale it down because i know it's going to be pretty big i'm going to put it like right here and that should be good we can make adjustments if need be and then what we can do is we could take this mask group right here and we can right click uh we can make it or not right click rather click come over here and click i make component so that gives us the default state and the ability to also add another state as a hover state all right and then we can add and switch to the prototype section and for our default default state on hover and we could trigger auto animate hover state all right and then i would switch back to our design section we if we click on hover state we can then gain access to that lottie animation coming up here we'll click on it and then we're going to change it to play automatically and this is in the hover state also under default state so we take our component click on default state gain access to the lotte animation we want to adjust that as well so that it is on play automatically and not play on top all right so both of them should be played automatically under hover state as well and i'm going to move this over here slightly just to get it closer and i'm going to remember that x position right there we're going to switch back over here to hover state and i'm going to make the same adjustment real quickly and it should be okay it is the same all right so now what we can do is hit play and there we go so we have our nice little lottie animation like that all right so now let's say for instance just so we can have more you know fun with lottie animations when we click watch that'll launch like uh a little loading animation and then that'll transition to a new video preview just to show you some more prototyping interaction uh in with lottie so what we could do is we could take this replicate it and let's get rid of everything inside of here we're gonna make the background black and this is going to be an overlay so it's going to be on top of this element and so that means we can drop down the uh the opacity maybe at around 80 percent uh so it's going to darken this screen and then we're going to have another lottie animation um and i already downloaded this one from bodyfiles.com and i've dragged it here on the frame or the layout and so you can see that it has our same color scheme so i use the editor and then just drag this one right on so if i um click this double click in here play automatically if we click play you'll see it real nice animation i love it so then um what we can do is switch to prototype when somebody clicks on this watch we're going to drag a connection here and then on tap is correct for the trigger and we will do overlay all right so that's going to overlay now for some reason when this happens you have to go back here into the design section select it make sure appearance is ticked on all right so let's see if that works go ahead and click watch there we go look at that and you could probably also adjust um some other things about this for instance overlay i let's make sure we have this clicked correctly right here um so you can see the animation is dissolve um you could change the duration using all that good stuff um so let's also say that after a few seconds um or on tap i i couldn't get it to work automatically after a few seconds so i think i made it tap it'll transition to a new artboard that has a video as well so let's go here to design i'm going to replicate this so for this one it'll just be a black screen and 100 opacity and then we'll have another lottie or not a lottie animation but just a video graphic and again this is a video itself um i just copied it from another artboard off screen and this will play automatically as well this is from pixels it's a really cool video and for our prototyping we'll just make this so that on i click i think there's already a trigger oh there's already a trigger there so that's why it's doing that to me let's click on that so on tap it's just going to go here to um not previous artboard but maybe we'll do auto animate and we'll choose this one right here which is this one and there we go so now we'll click play we'll click watch and there we go and then perhaps if this is on click it'll go back to this page now tap on animate there we go one last time just to show you how cool all of this is really is with these lottie animations and videos there we go awesome awesome stuff all right everybody hopefully you enjoyed that if you did make sure to leave a comment subscribe check out designcourse.com and i will see you all very soon goodbye [Music] you

Channel: DesignCourse

Views: 20,476

Keywords: adobe xd, adobe xd lottie, adobe xd tutorial, adobe xd video, adobe xd update, xd update 2021, adobe xd microinteractions, gary simon, designcourse

Id: M9NNXN_iXsw

Length: 16min 0sec (960 seconds)

Published: Fri Oct 29 2021