Getting Started in Adobe XD: Creating an Animated Landing Page

you [Music] [Music] good morning everyone and happy Monday hope you all had a great weekend I had a super relaxing weekend I worked a little bit but tried to relax as much as possible I hope you're all well we have Eric Ahmad Dilip snip snip snip snip UI I recognize from Twitter we just chatted a little bit Chris cannon a lot of awesome people in the chat this morning hope you're having a great Monday we have a few more days until Friday I can't wait already but we have a pretty fun show for you today we're gonna be diving into Adobe XD specifically for people who may not have really started to use it or may not understand the whole concept of Adobe XD we're gonna dive diving into auto animate which is an amazing feature which we actually just released a dribble contest which I'll show you in a second we're gonna be doing some time transitions a whole lot of stuff and if I hop over to my screen for a second actually before I do that we also [Music] [Music] it's gonna be fun there's gonna be a lot of stuff they're gonna be covering and if you really want to learn UI and UX and see how professionals tackle some projects definitely tune in for that so what are we what are we gonna be tackling today and hey Ahmad I hope you're doing well so let me hop over to my screen here and this is my dribble profile which by the way if you're not calling me shameless plug do that but have had a lot of people ask questions about this that I've hosted a little bit ago this parallax website effect with these clouds and foreground little image gallery it slides up from the bottom and people want kind of wanted to know oh we have some technical difficulties oh are we not live can you hear me are you able to hear my voice hang on we might have some technical difficulties [Music] everything sounds fine yep yep okay maybe we don't have technical difficulties I'm back okay sorry about that looks like we had some dropped frames on my end okay I'm going to continue so when I uploaded this and actually demoed this at Adobe MAX as well we had some people ask you how this is created in Adobe XD and how some of these animates good if you're not noticing the clouds actually pull out faster than the mountain and the background so we're gonna be kind of going over some of that stuff today we're gonna be creating a landing page like this plus a few other things that I'm gonna slide in there so and I also uploaded to dribble a few other things that you can kind of dive into and some of them have attachments as well now speaking of dribble we did just announce today a new contest if you go to dribble com dribble with three bees we have a contest for auto animate there's a little brief here you can also download the auto animate UI kit that we released last week you can watch a tutorial and this is a fun I created this animation a few weeks ago this is really fun to make let's play it back one more time and just kind of shows you all the fun little not all of them but just a few little things you can create using auto animate pretty simply in Adobe XD and some of this we might actually touch on today in the stream and then you can download the UI kit directly from dribble or if you go to behance you can also download it there as well so without further ado as long as my audio works and all long as all of you are relaxed and ready to go we're gonna hop into Adobe XD and we're gonna start designing we're actually gonna touch on Photoshop a little bit as well so I'm gonna create a webpage because this is gonna be a landing page let's go for 1920 by 1080 to start off with and as I'm going through this process if you have any questions about Adobe XD or anything really sort of anything just let me know in the comments I will be trying to answer as much questions many questions as I can so to start off this landing page we're gonna block out some stuff we're gonna start with an image in the background I'm gonna grab my rectangle tool over to the left here's all your tools over here and I'm simply gonna drag out a rectangle and this is going to house my image and I'm gonna change the color just so I can see it against the background and a lot of people ask why don't you just drag the image into Adobe XD why do you drag it into a rectangle and the short answer is because if I I'm working with very large images like this image here that we're going to be using it's a pretty large image if I just drag it into Adobe XD well this one's probably not very large but if it was large it would basically like fill up the entire document and I have to find it zoom out resize it I don't want to deal with that so what I'm able to do is just grab this image drag it on top of the rectangle it highlights in blue and it automatically masks it so I'm gonna leave that image right there for now we will adjust the masking later but if I double-click on it I can easily just grab the image make changes and when I click off of it it masks it again cool stuff now at the top we're going to add a little bit of a navigation bar and before I do that I actually want to hop into my layers make sure everything is named properly because this will be very important when you do get to the auto animate phase you want to make sure your layers are named and the types of layers are correct as well and I'll touch on that in a little bit so I'm gonna grab my rectangle drag out a box across the top just like this and this is going to be for the navigation bar I don't need a border let's set the fill to black and then decrease the opacity just a little bit so we can see some of the background there we go that looks pretty good and now over to the right we want to have some links and maybe some social media icons so I'm going to type out let's say home I can't see that let's make it white there we go and what font should work well let me know in the comments when you're reading this what fonts you typically gravitate towards when you're designing things a veneer next is one of my favorite medium or bold maybe bold can be for home and then medium can be for the rest so I'll do home now you could use a repeat grid in this example but for navigation but links I typically duplicate them separately and this could be discover and this one could be look and let's say ideas lat Oh letõs a good one all right now at this point obviously these things are not spaced out perfectly I could move them and then you're noticing as I move book it kind of snaps into place and tells me that book is now the same distance that discover is from home but there's another way we can do it we can basically put let's say home and ideas right and I want to say that discover and book will kind of line up equally between these so I'm gonna select all these layers all these text layers holding it on my shift key and then over here to the right this icon right here let me zoom in distribute horizontally and will basically take all these layers and distribute them horizontally based on the first and the last one I'm going to group this commander ctrl G put this into a group let's name this nav links whoops nav links and I'm gonna Center this on my document perfect it's a little too small we make these a little bit bigger and center it one more time great so now we have a navigation bar simple but we have a navigation now over here to the right we may want to add some social media icons so I'm gonna hop over to icon jar and let's add let's say Twitter oh I don't have any soldier oh wait all let's see I don't have well there you go so I'm gonna copy them I have another document over here I'm gonna grab these social media icons and bring them over if I can find them there we go now we have icons it's as easy as that place those over there this will be NAV background and I make sure to put all of this into a group called navigation lock I usually slack with my lair namings but today I'm gonna make sure everything's named properly I'm also gonna grab this logo that I have and just pop it over here perfect now one thing I should note that is if you do have like a sticker sheet or a style guide that contains logos and social media icons and things like that you can now use linked symbols which will basically keep everything up to date across your entire documents which is really nice so I'm going to put this into navigation bar so at this point we have a pretty simple layout we have a image in the background we have a navigation bar we have a logo some social media icon social media icons over here and some text layers which I'm actually going to grab home let's make this one bold and then maybe these two these three I'm going to decrease the opacity just a little bit so we know exactly which page that we are sitting up there we go Dagny asks hi there can you explain why textbox boxes sometimes do not show white circles at four corners versus one at the bottom it's most likely because this one here this one has a little white circle which you can drag up and down and that's because if I hope hover over here this is a point text but if it was a area text which is basically like a paragraph box you'll get these the corner the ones in the corner so that's probably what you're seeing I would assume all righty so at this point we want to really make this parallax effect look something interesting and we can't do this with a static image so this one here it's not gonna move if we start to auto animate so we actually need to separate images and that's kind of where photoshop comes into play with something like this so I'm gonna go over to I have this image here and basically want to quickly cut out this mountain from the background so let me hop into Photoshop for a second and I know you probably weren't expecting a Photoshop tutorial but I'm gonna make this somewhat quick I'm gonna grab my quick selection tool from the tools bar on the left make it a little bit larger and then simply just brush over top of these mountains to make a selection make sure to get as much of them as possible doesn't have to be perfect because it will be sitting on basically the same background so if there's a little bit of imperfection you won't really see it now with that done I'm gonna select a mask at the top and you're seeing that the selection again not perfect but not terrible increase the radius a little bit turn on smart radius so I would get some of those trees and some of the grass and if there are areas that were not selected I can very easily grab my brush refinement tool for fine edge brush and just brush in some of those extra little trees happy little trees as bob ross would say I miss bob ross okay that looks pretty good and I'm going to output it as let's say a layer mask and press okay so now basically I have this mountain separated from the background again not perfect but I can but because we exported it as output it as a layer mask I can grab my brush tool switch over to either a white or black brush black to add white to hide I'm sorry white to hide black to add and just fix up these little areas here Bob Ross was awesome and I can hold down my shift key and I can click on the layer mask to see the before and after just to make sure I have everything under control again I don't want to spend too much time in Photoshop but that's kind of where both these applications can work hand in hand for things like this there we go remember to take notes yes Gus spot is in the house hmm what could he be hinting at what could I be hinting at I don't you never know so now that that's done I've basically cut out the background from the mountains or the mountains from the background whichever way you want to put it and because Creative Cloud library syncs between all of our different applications all I can do is just grab this layer and drag it into my Creative Cloud libraries I already have this actually in here and if I double click on this I'll have it opened up and here's basically the mountain layer and there's also a hue and saturation adjustment on top of this one but that's basically all you have to do make your edits drag it into your Creative Cloud libraries and it will sync now for the sake of time because it was a large image and it might take a little bit to sync I pre did this one so let's hop back over to Adobe XD and if I go up to the file menu down to open Creative Cloud libraries we have our libraries here and I can just grab this mountain layer drag it onto my document and move it into place just like that now for this first screen I basically want the mountains to be a lot larger kind of interface and then on the second screen they'll kind of shrink down but before I do that I'm going to move this into place let me close my Creative Cloud libraries then move this let's say right about here you're noticing the mountains definitely are bigger and you can just make this bigger or smaller if you wanted to and I'll put them right about there make sure it lines up with the one in the background and place it right about there great so now that that's done there's a few more elements we want to put into place before we actually do anything the clouds definitely wanted them but before we get to that we want to add an icon at the bottom that's kind of gonna pop up with the mountain layer as it kind of descends into the background so I'm gonna make a little basically this one's gonna be for an images icon so I'm gonna grab my ellipse tool make it make a little circle right there let's turn off the fill and set the border to white set the size to let's say five how does that look that's not too bad let's go for six all right and now inside this we're gonna grab a few rectangles and zoom right in here make the corners just a little bit round not too much turnoff the border and I'll basically have three of them going across make sure they all line up together and three down and this is basically gonna be the icon where people can click on to see images of various places around the world and I do want to make sure that they're all grouped into a group this will be images icon there we go fantastic now in this art board we basically want this images icon to be hidden below the artboard and then on the second one it'll kind of rise up from the bottom so now you're gonna notice that if I just grab this guy and move it below the artboard it's actually going to drop on to the pasteboard which we don't want so what we have to make sure to do is add it to a group with other objects that are on this artboard right so we'll actually grab it we'll do it with the hills icon it'll just group that and we'll name this moving elements so now if I grab the images icon group drag it down off the artboard it doesn't actually go into the pasteboard because it's grouped with an object that is already on the artboard so that's good and we're also going to turn the opacity down to zero now we get to the clouds how do how do the clouds work now basically back in my crazy file libraries I did the exact same thing I did before with the mountains I grabbed some images of clouds I drag them to my Creative Cloud libraries made some edits if I need to and they synched but what I'm able to do is simply drag these onto my document from Creative Cloud and just position them anywhere I want so I can position this one here I'll make sure the logo in the background is seen just a little bit and I'll grab this one Oh wrong way let's put this one over here and this one over here there we go make sure that logo is seen let me close my Creative Cloud libraries and hey everyone who is just joining us welcome and I'll position this one here all right there we go and these ones are already named because they were already named in my credit cloud libraries it does maintain that name and they are still linked so at any point I wanted to make changes I should probably point on it so if I go to my hills layer for example let me hide my clouds let's say I'm looking at this Hills layer and I decide either I want the saturation adjustment that I had in Photoshop a little bit to it maybe it's a bit too much or maybe I wanted a little bit more saturated what I can do is go back to my Creative Cloud library because it's linked I can right click press edit Photoshop is going to automatically launch with that exact same file and I can turn off the saturation adjustment or it can turn it back on I can edit it in the properties and say I want to make it probably don't want that but I can turn this off save it and if I go back to my Creative Cloud libraries inside of Adobe XD you're noticing it's now sinking and again because it's a pretty large file it might take a little bit to sync so we'll just let that do its thing it'll do it in the background and when it has updated it'll update on the document which is great so then put the clouds back on now how do we actually animate this thing so we're gonna grab this layer I'm actually not this artboard parallax let's say this is before oh you know what I forgot I forgot some text that's kind of important so let's do that let's open up this artboard again let me hide these clouds will actually hide the hills layer and we're gonna add some text in the background so let's see world is waiting I'll just do the same as I did on my dribble example make sure this is behind the hills layer and make this nice and large let's see what thought we're gonna go with din condense is pretty nice spaced out a little bit too much and I may want is waiting a little bit larger so it lines up with the world at the top and make this just a little bit bigger make sure to Center it in my document and basically the idea for this is on the next artboard it's gonna also rise kind of as the mountains go down the text is gonna rise and reveal itself it's also gonna get a little bit bigger so we want this to start somewhat small somewhat let's say I wrap right around there not too drastic but drastic enough and let's hide let's bring back everything okay so now that that's done we can duplicate this artboard so I'm going to select the artboard and commander ctrl D to duplicate it you can also hold down alt or option and drag it over I'm gonna rename this artboard and it's okay if your artboards have different names as long as the layers within it have the same names you're good now she's gonna space this out so we can really oh hey Aaron welcome and you're wondering how this was done in the animate yeah I wanted to include this exact example but I didn't have the rights to these images so I couldn't actually distribute them but the ones in that UI kit I took myself a few years ago so I can distribute those so once that's done we're gonna start moving things around now I'm just noticing an issue if I grab this top clouds layer and move it over here it's actually going to drag move move that one there and then move this one here they're gonna drag onto the pasteboard eventually there goes so what we have to make sure to do is put these into I'm going to put them into the moving elements group and I also want to make sure that that's updated on this artboard as well otherwise we're going to run into issues great now that we're good to go we're gonna grab our clouds and we're gonna move this here and we'll remove this here now this is going to be the final animation because I'll get to I'm trying to show you what you would typically do and then what you can do later right now we're gonna grab the hills layer we're gonna make it a little bit smaller and set it down into place so it's kind of lines up with the mountains in the background we're gonna grab our text moving on up make it nice and large oops and then the background we're actually going to let me hide all these moving elements we're gonna double click on the background make it a little bit smaller not too much and actually might want to go back to this one here and make the background just a touch bigger there we go okay so now that both artboards are set up and that's the really cool thing about auto animate in Adobe XD all you really need to do is design state one design state to link everything up and things just work it's just magic like that so how do we actually make this animate it and one more thing I forgot to do is grab my images icon which is hiding down here completely forgot about this little guy increase the opacity to a hundred percent and just move it up into place beautiful so now we're good to go I'm gonna hop into prototype mode right here at the top and I'm gonna select the entire artboard because it's going to be used there's gonna be a time transition because at this point there's really nothing to click on you could have a tap transition and just tap on anything to start this thing but I'll do a time transition which is only available when have an entire artboard selected i'm going to drag this handle over to the right make sure that time is selected for the trigger i'm going to have a little bit of a delay so it doesn't start immediately let's say 0.6 seconds the trent the action is going to be auto animates we want those fancy animations the easing is going to be in and out so there's a little bit of a curve at the beginning and the end so it's not just like right away in your face and my dog's barking back there and the duration let's say it's 4 seconds we want it nice and slow now once we press play watch what happens oops it's on the wrong screens over here ignore that okay now when you press play watch what happens fancy but you're probably noticing that the clouds kind of moved at the same speed as the mountains in the background which it looks fine but we wanted a little bit more drastic than that so what we can do is go back into design mode I just grabbed these clouds and just move them like just pop them up here right grab this one pop it all the way down here and you kind of want it to make sure it's aligned and it's like diagonal line from the middle and now when we play it the clouds are going to move in a much faster rate and then the mountains come down text comes up cool stuff I love this and look how simple it was to design it and animate in Adobe XD you just kind of make these little elements on both screens and it just does the rest for you let's see that one more time clouds move nice and quick mountains move slowly and you're also probably noticing in the background image because we adjusted the mask it's also moving but very slightly because if you cut if this if you were to somehow recreate this in the real world which would be very difficult the background would move slower you know if you're if you're driving on in a car and you're driving by posts the posts are moving very quickly but the backgrounds moving very slowly so it's kind of the same idea I guess so that's that so now there's a few other elements that we might want to add basically when someone clicks on this images icon some images pop up from the bottom so we're gonna grab the parallax after artboard I can probably move it back over here now we're gonna drag this let's move it over here Vlad Vlad err could watch this all day long I probably did watch it all day long I actually got sick of the sick of it when I was trying to perfect it for dribble I got sick of this thing but yeah it's it's it's smooth enough that you could probably watch it all day long so in this one we want to make this little image gallery at the bottom so what we're gonna do we're gonna add a few rectangles down here let's say one two three probably four perfect well that lined up to make sure these are centered great I'm gonna group them all and this will be images and I'm also gonna put this into the moving elements section because it will be moving at some point turn off the border for all of these and if you do have multiple layers selected with a border or a fill and you have a group selected you can also adjust it all them all at once that perfectly lined up right I didn't plan that now I have back and finder I have a few images that we're going to be just dragging in here now the reason I'm not using a repeat grid in this example is because the images will actually animate at some point we're gonna make some larger some smaller at least the boxes so at that point I would have to break the repeat grid anyway I'll drag this image in here and I'll drag let's say this one is great so now we have a bunch of images where there we go now I want to make sure that these images are also present on this artboard here otherwise when we go to animate this thing basically when we're clicking on this images icon those images will pop up from the bottom so I want to make sure that they're there on that artboard as well so I'm gonna grab this whole group copy it paste on this artboard make sure it's in the same moving elements group and position it right below you know this images icon obviously we don't want it to stay there so we're going to grab the images icon on this artboard and let's say we're gonna move it up we're gonna have fun with this one let's make this we're gonna basically instead of these images we're gonna change this icon so that it looks like a little down arrow so what we're gonna do we're gonna select these just gonna drag these out just to make it a likewise little line just like that do the same thing for these ones down here and alright now I'm gonna select okay it's every second one that makes sense no it doesn't this is why it's so important to organize your groups and your layers let's make this let's say seven that looks pretty good and we'll select the ones that make up the top make this a height of seven maybe a width of 35 one two three and thirty five that might work now we'll rotate these and holding down my shift key as I'm rotating to snap it into place and I believe it rotates 25 now 15 degrees each time you do that there we go move this down and I can probably make this a little bit smaller there we go so now the images icon has been changed but all the layer names are exactly the same as they were before so what's cool is that so alex is saying I what I particularly don't like about this feature is that users don't have full behavior control I don't want to give away too much but the team is looking into more control but we basically wanted to you know start off with something that would be very easy for you I knew X designers just dumped jump into design state 1 state 2 state 3 whatever it might be and then auto animate will kind of do the rest but we've definitely heard from designers like yourself that more behavior control is necessary in some cases so there might be stuff in the works maybe who knows make this a little bit smaller and it may actually want to rotate this one more yeah there we go and one more make sure these are all in place perfect and maybe you know what I'm gonna move it over here because I can't so now again because all the layer names were identical across this artboard and this artboard our goal is to have this icon kind of shift and morph into from this to this and also the images will kind of slide up from the bottom so back in prototype mode at this point we basically want to say when someone taps on the images icon drag this over here it's gonna transition to this artboard so it's gonna be a tapped you're noticing time is not available because I don't have the entire artboard selected so I'm gonna select app make sure auto animate is chosen we can do maybe in and out we'll see we'll try it we'll try a few different things for seconds would be way too long so let's go for 0.4 seconds and let's see how this looks so starting from the beginning we have the cool little parallax effect right and then we click on this button at the bottom and the images come up and you probably didn't see that morph so let me go ahead and actually let's go back to four seconds just so you can see what's happening when that icon is clicked watch closely the elements are actually moving and shifting and transforming - it's not just like it's not a snap and then it converts into this down arrow it actually takes those elements and morphs them into a down arrow it's kind of cool now obviously four seconds is way too long no one wants to be waiting that long so I think 0.4 second looks pretty good yeah you can't even notice at that point but it does its thing which is great so now at this point we basically want when someone clicks on an image the image is going to pop up and get a little bit larger so we're going to duplicate this artboard and let's say which image do we want larger this image maybe this image let's go with this image so we're gonna move this up make sure things line up and just make it larger and you're noticing the masking it's not distorting the image everything all the masking is the way it is and we'll just make sure to hide that little images icon perfect now what do we do with these guys down here well what we could do Center this we can just move them just like that and now back in prototype mode we can select this image here move this over it can be tap let's actually do a snap for this one and then 0.4 seconds let's see how that looks so that image gets bigger the ones at the bottom kind of shift into place everything's nice and silky smooth now we might want some text so we don't want necessarily the text to appear immediately after clicking on the image we may want it to appear you know a few seconds later or maybe half a second later so I'm going to duplicate this artboard one more time and let's add some text I'm not sure who took this photo but just for argument's sake actually it might be in the it might be in the actual image huh I'm gonna make sure to give credit to this guy Ian Valerio so I'm gonna add some text his name is Ian Valerio yeah we go a little bit smaller and this might be Japan I'm gonna just say it's Tokyo Japan for now I could be wrong but I might be right I don't know Tokyo Japan this probably doesn't have to be condensed and make it nice and small and decrease the opacity a little bit now for here I may actually want to grab my icons and let's location and a little location icon come on there we go make this white was the opacity of this one this was 42% there we go a little bit smaller okay that looks okay great so I'm gonna make sure all of these are grouped up we have the location Tokyo Japan and ian's name we're gonna group this and name this meadow let's put it right about here now we want to make sure because we're transitioning from this artboard to this one we want to make sure that all this text stuff is also available on this artboard so I'm going to copy it head over here make sure to paste it make sure it's in the images group we're gonna move it up and we're gonna turn the opacity down to zero now with that done back in prototype mode we want a time transition from this artboard to this one immediately after this to this so we're gonna select this entire artboard grab the handle to the right make sure that time is selected I don't want any delay zero seconds we'll do an ease in and out and let's say one second it might be a bit too long but let's see so press play click on this image down here it actually makes might be too slow I mean too fast so let's let's change that let's do two seconds click on the image I don't know maybe it's the ease in that's throwing things off this is the fun part about designing you just experiment to figure out exactly how things will look now it's too slow let's go for 1.5 seconds there we go that's probably a bit better so let's start from the beginning we have this wonderful parallax effect the clouds go out quick the mountains kind of come down click on this image beautiful now at this point we want with someone clicks on the image again the image will kind of drop down and then you know fit into place where it was before and then everything will be back to the way it was so what we could do technically is just transition from this to this we want to make sure that that text layer is also there so back in design mode we want to grab the meta bit there and then if someone clicks on this image at the top drag it over to this first artboard over here you'll be tapped let's go for a snap and point four seconds which is what I believe we had for this one as well yes so click and click again oh yeah you know what I did I forgot to change the opacity and I could probably just remove this cuz then they'll just disappear let's see that works too fancy and then what we want to do is when we when someone clicks on this down arrow go under prototype mode this will actually link back to this artboard make sure everything's linked together it'll be a tap I believe this one was an in-and-out maybe which is making me hungry let's see what was this one in and out 0.4 seconds [Music] does she says I want XC to have a time line that could be a possibility again the team is definitely looking into additional features for auto animate to give more more flexibility for some advanced users so there there might be things coming and it will work on the web at some point right now if you export if you try to embed a prototype on Behance or any other website the auto animate features will not work on the web but that's in the works alright so if you click on this images icon at the bottom then you click on this one there we go now what I may want to do is actually on this artboard here just to get a little bit fancy grab the hills and just move this up a little bit [Music] just to get a little bit fancy probably not necessary but you know there we go so that's that's that's great everything is looking pretty good but one thing that I kind of want to touch on before we wrap things up I could save it but I'm not going to right now if I go back to gerbil a lot of people were also asking questions about this number counter so maybe we can incorporate some sort of a number counter in this design as well that could be fun so let's do that let's hop over to XD again and we may want to where we're gonna put the number counter where should we put the number counter maybe down here in this corner here for the likes maybe or we can put put it up here who knows well put it somewhere we'll just make it first and we'll figure out where to put it so we're going to basically create a list of numbers right 1 2 3 4 5 6 7 8 9 and 0 I'm actually gonna do this outside of the artboard so it's a little bit easier to read and because it depends on how many rows of numbers you want in this case we'll do 3 rows so we're going to copy this paste it make sure we have three sets of numbers and then we're going to duplicate and duplicate so they all line up correctly now this point we obviously don't want everything being shown so I'm going to grab my rectangle tool and simply drag out a rectangle across the top rail of icons or numbers and turn down the opacity just a little bit so I can see that make sure they're all lined up it looks like it is and now with the rectangle selected I'm also going to select all the number layers underneath it so I'm going to hold down my shift key select all those go up to object and mask with shape so now we can only see the top row numbers that were over top of the rectangle and if I double click I can go into the mask and I can see everything right I can move these around and when I click off of it I now can only see those numbers so how do we actually use this thing so I'm gonna copy it let me delete it let's move it where should we put it maybe on this artboard we get a little bit larger I don't know what's gonna say maybe it'll just say or should we where should we someone give me an idea of where should we put this because it doesn't make sense anywhere here but we're gonna put it right here because we can and this will be the last state so I'm gonna basically let's go for 300 and in the first column you want to use the first set of numbers and the second column you want to use the second set of numbers so let's say 320 top-left corner of navigation hmm 320 and then here you want to use the last set in number so I'm going to scroll all the way to the end places discovered interesting okay I like that let's say 326 Aaron says 7 ok 327 there we go 327 now where is where do I have that so I'm gonna put this in moving elements right here actually want to make sure it's behind the clouds but above the hills there we go and I'll miss art boiling paste it same thing above the clouds below the clouds but above the hills and now this one is just a bunch of ones this one goes to 327 now I play this back let's see what happens numbers cool now we're going to just add one more text layer below that what did places discovered I like that places discovered make this nice and small a little bit too small a little bigger that looks ok decrease the opacity a little bit just a touch all right and I also want to make sure that this is placed properly on loops on both artboards place is discovered right there let's see how this looks nice it even moves with it and I'm noticing just a few like some of the numbers at the bottom oh no it looks okay nevermind fancy and again all I had to do was design how it looks at the beginning how it looks at the end and everything kind of just Adobe XD just figured things out and we and again this probably isn't the most ideal placement for something like this what I could do is I can actually replace the world is waiting but then we'd probably miss out on some of the moving numbers in the background but you get the idea and I want to make sure that these layers are also on this artboard here will you provide a link for us to download this project this one I cannot because I don't own all the rights to these images but if you go and download the OTO animate UI kit which is on Behance and also they just put it on dribble this morning there's there's a very similar project in there that I can't with images that I could distribute it's not as in-depth as this but hopefully you can use that to create something of your own I tried I fought so hard to be able to UM distribute this exact almost exact project but couldn't get the rights to all these images so make sure to put this one right here there we go so let's see how this thing is looking from the beginning alright so we got the parallax effect the clouds coming out text in the background coming up a little number counter places discovered we have the images icon at the bottom which we can click on it morphs into that down arrow which I can probably I should probably decrease the opacity a little bit on that one and then you can click on this image text comes down click on it again and you're basically back to this point now Colby is asking how would you share this with a developer so it depends on the project it also depends on your developer so you could the share icon at the top here you can publish design specs and that'll basically allow your developers to have access to character styles colors and then any approved assets so if I wanted my developers to have access to my clouds for example what I can do is click on this icon here and it'll mark it for batch export I can also click on this as well so any of these icons any of these elements that are marked for batch export I will be available to my developers when I publish this prototype as a design spec now it won't animate for them so you have to work with developers who know how to animate or know how to implement some of this stuff so you really have to you know choose or developers wisely but there are there are plugins currently under the plugins section that will help you export code which one go to I think your taco I don't know how to pronounce that this one for example does help you you know export to Swift Android HTML CSS of course you will probably still have to have some sort of development skills because any of these plugins they'll probably never export things properly exactly the way you want them so it'll get give you a good start but it probably won't be perfect but yeah definitely work with developers who know what they're doing and that should help quite a bit but we're also you know the team is internally is working on additional features and ideas on how to better export things especially in the world of auto animate and animation as they're thinking about new and exciting ways to animate in XD and then exporting to developers they're thinking of these things they're also talking with a lot of designers and studios who do this on a daily basis so before we wrap things up let's take a look at this one more time press play we have this cool little number counter images icon at the bottom transforms into a down arrow we have this image and the text slides from the top BAM fun stuff and yeah that's my Twitter link if you want to follow me there I'm posting about XD all the time also sharing some cool tips and tricks also follow a lame I think someone posted her link as well she shares some really cool pro tips as well and going back over here make sure to head over to dribble there's a big bar at the top that says enter the Adobe XD playoff and just you know use some of the tips that I showed you and enter the contest and you can win a MacBook Pro and a one-year subscription to the Creative Cloud who doesn't want that I wish I can enter this contest but I did make this little image this animation which is really fun to put together and it kind of showed a lot of the things that I show today and also you know a few little things here and there on what's possible in Adobe XD and we've seen some incredible stuff from designers and developers that they've done with XD even people who don't haven't animate it at all in the past good stuff and then download the UI kit and you know there's there's a video at the bottom so that will probably do it for me for today I hope you all enjoyed this this was this was fun to put together and definitely tweet at me follow Adobe XD on Twitter and [Music] dribble where else are we Facebook there might be an Instagram soon who knows I don't know if I just spoiled something and definitely enter the dribble contest and let us know show us your stuff I would love to see it and stay tuned tomorrow at where's the go oh thanks so much for watching everyone and I'll see you all next time take care

Channel: Adobe Creative Cloud

Views: 26,567

Keywords: Adobe Creative Cloud, Creative Cloud, Adobe CC, Adobe Cloud, Adobe creative suite, #MakeAdobeCC, #AdobeCC, #ACCTags, Adobe XD, Repeat Grids, Prototyping, UI Design, UX Design, auto-animate, voice triggers, linked symbols, illustrator importing

Id: JzPAOivq4Cs

Length: 54min 1sec (3241 seconds)

Published: Mon Nov 12 2018