Adobe XD | Advanced Techniques

what's up everybody I'm Jesse Showalter and in this episode I'm going to share with you some advanced techniques inside of Adobe XD some things you may not have known may not be doing and when I show them to you you might pee in your pants a little bit [Music] [Applause] alright Adobe XD is open on my screen and I have my design file up and running it's an e-commerce experience for shoes that I designed and if you want access to this file so you can follow along with me then make sure that you check the link down in the description to become one of my members members get access to not only all digital files then I work on but you also get exclusive content behind the scenes as well as live Q&A as live streams and ask me anything so check the link down in description for that aren't the first advanced technique we want to talk about is using libraries to streamline your workflow because of that amazing integration that if no PXD has with the rest of the Adobe Creative Cloud so if you have the Creative Cloud you're going to want to start using libraries to access your libraries in XD you go up to file and drop down to open CC libraries or you can press command or control shift L which I'm going to do right now and it opens up my library off-screen now this is a library that I have created and prepared for this actual design project that I'm working on what's amazing about Adobe CC libraries and the integration that it offers is that it's available everywhere so I have my libraries open inside of XD but if I come up and open up my Adobe CC actually create a cloud application in my menu bar up there we're gonna see that I have usually you'd launch over here onto your apps but if I head over to my work in the top left hand corner I now have all of those elements in my library available to me so if I want to take this red shoe I can click on it I can add new things change the name duplicate them delete them or I can also edit them and it's gonna open up the program the Adobe program then I created this asset in for me that was inside of Adobe Photoshop so if I wanted to come and let's say add a hue and saturation layer and then change the hue to be a little bit more like a purple and pink type shoe and there you have it it's updated by itself inside of the design file ah that's just absolutely amazing now everything is in sync everywhere and that's a really advanced thing alright next advanced technique you need to know about is fixed elements when you're scrolling down a page it doesn't seem like a very advanced technique but it makes all the difference when you're doing work if we zoom into our list screen over here we have a bunch of that are listed down the page and when I preview this it's not scrollable right now that's because my canvas itself is not actually a longer size so if I wanted to do that I can bring the size of my canvas down now all of a sudden that's a scrollable but the problem that I'm having is that my nation is scrolling with it and we don't want that so first things first we're gonna take our or shoe list here and press command R and create a repeat grid but we're still having that problem right that navigation isn't moving it's so simple but it makes such a big difference I'm gonna click on the element in question I'm gonna head up to my inspector panel and hit fixed position when scrolling now when I scroll my screen everything scrolls underneath that navigation and my navigation is staying fixed at the very bottom of the screen which is exactly what we want alright next advanced technique is nested components components are so huge and when you mess them they become even better so you got to learn this know this and use this and everything because it's a massive time saver if I come into my design you can see when I click on my layers and my layers panel inside of my footer we have some elements so here's the cleats so we have these four icons each one of these really should be a component so let's press command K command K command K and command K now if we go to our components tab we can see we have each of those inner components to have they're usable we could drag out instances of those components that would be really really great what makes this even better is when we take those components we put them inside of another element like our footer we press command K there and we create a new footer so now when I go to my components I can drag out a new instance of my footer what's really cool about this is if later on I want to tweak any of my nested components like for instance this little icon of the person I can right click on it make sure I'm editing the actual master component and I can go ahead and make my changes for instance let's say I want to take the little hair out of it it has changed the component itself and also where that component is nested and that is absolutely mind-blowing can we just can we talk about how that's mind blowing combine components save you tons of time they speed up your work and they just start to build out that very basic foundation of a design system or pattern library let's talk about prototyping and specifically advanced prototyping Adobe XD introduced Auto animate and that changed the game it opened up a world of possibilities for all of us as designers to prototype things with motion and to make it really really simple while tapping and then Auto animating something is great there are more interaction types out there than just tap for instance if I hit category and press play we have a tap trigger right here which opens up our next screen animating these elements from screen to screen and that's super duper nice if I click on shoot too and open up my prototype I can not only tap but I can drag portions here and get animations and interactions off of a drag type trigger and so I want to cover just a few of the basics here that it's really gonna change your game if you're not using these trigger types the first one we've already mentioned here and that's the drag trigger being able to drag things back and forth what's great about this is it's fluid if I drag slow I'm seeing the animation happen slowly in real time my nation bar there is animating and everything is just moving seamlessly how did we do that my drag interaction was triggered from the shoes so if I select the shoe you can see we have an interaction or prototype happening from this screen to that screen and in my interaction panel you can see a selected drag trigger and I've selected Auto animate the destination and I'm easing in and easing out so you can see in my art boards not only is my blue shoe on this canvas but the red shoe is deal with the opacity down off canvas so that we get the transition between the two this is a really really simple way to create these drag triggers and let's talk about another advanced trigger and see if we can do something similar not using a drag trigger but maybe instead using a key and gamepad trigger so we're gonna hit key and gamepad here and we're gonna press in for next on our keyboard and it dropped that right in there and it's going to animate from screen to screen so let's go ahead and press play and press the N key and does that animation for us just like that we don't have a game or keypad trigger set to go back but as soon as we get back to that previous screen and it's gonna work for us this is really really great you can watch one of my other videos on creating an xbox video game console kind of interface and I actually attached my xbox controller via bluetooth to my computer and was able to work things back and forth using the game controller which was super fun and really brings a lot of high resolution prototyping to your design let's really quickly experiment with voice as well because that's another one that Adobe XD has brought in that's super duper advanced so instead of being gaming keypad let's do voice we want to enter the voice command here how about next shoe something like that so we've selected voice and our command that we're gonna speak is next shoe so I'm gonna select my prototype and bring it up I'm gonna hold down the spacebar say the command and release the command and see if the voice command works so let's try saying the correct command which is next shoot next shoot and it swipes for us that's really really nice what happens if we say the incorrect command let's try umm my name is Jesse and see if that works my name is Jesse no match for my name is Jesse Oh voice commands in the house that's really exciting alright these last advanced feature I want to talk about is sharing Adobe XD gives you tons of features for sharing your work to stakeholders with clients and people that need to see and comment and interact with your work and so I'm liking my project as it is so I'm gonna head over to the share tab and there's a bunch of different options let's cover them you can see that now we've hit the share tab we have the ability to create a new share link so I'm gonna drop down and I'm gonna create a new link and the link is gonna appear there once I finish creating it I'm gonna title it shoot ecommerce and I'm gonna select what type of link I want to create here how do I want to share this for a design review which is gonna get me feedback on the design or prototype development where it creates a development environment presentation which is more optimized for an experience of presenting and kind of just seeing and viewing experience in your design user testing or custom what this is gonna do is basically create a set of permissions and features that are available to me so let's start with design review let's create the link and Adobe XD he's gonna create that link for me and this as soon as it's done it's gonna present that link in the top right hand corner here and we'll be able to click on it alright now that we have our link created let's click on it and open up our browser and we'll be able to see a design review version of the work that we've done we can go back and forth in our prototype we can skip to different screens in case we want to check things out we can leave comments we can place a pin somewhere and say you know something like I like that and submit it we can mention different people that are included on our file and that feels pretty good but what happens if we create a new link and we want to make this one more of a development environment let's go ahead and create that link now ok Adobe XD has created our dev environment and we want to click on that link and see how it's different from the previous link so let's check that out now we have the same stuff we can preview it we can play with the prototype but we can also head over to our spec mode in spec mode we can click on items we can get all the details so it's gonna give us measurements from the element or to all the surrounding elements it's gonna give us all the categories the Styles the appearance and the content we can click on any element for instance this asset the shoe and we can download that as an PNG or PDF all of our colors are available to us and where those colors are used all of our font styles are available to us all of our assets for download and all of the interactions have been listed this is a great way to handoff and work with developers in that design and developer handoff thank you so much for watching the video I hope you enjoyed it if you did make sure to leave a thumbs up and subscribe to the channel I do lots of videos about design and development and Adobe XD so maybe stick around if you're interested in getting your hands on the Adobe XD file that I used in this video then consider becoming a member so you'll get access to this file other files as well as live streams QAS ask me anything extra content and behind-the-scenes stuff check the link down in the description for that if you have any questions leave those down in the comments and I hope you're having an amazing week designing amazing things making amazing and using some of those advanced techniques I'll see in the next one [Music]

Channel: Jesse Showalter

Views: 83,562

Keywords: jesse showalter, adobe xd tutorial, adobe xd web design, adobe xd app design, adobe xd, adobe xd advanced tutorials, adobe xd advanced prototyping, adobe xd advanced animation, adobe xd tutorial for beginners, adobe xd tutorial web design, learn adobe xd ui/ux designing and prototyping from scratch, learn adobe xd in hindi, learn adobe xd web design, adobe xd trigger hover, adobe xd trigger time, adobe xd trigger time missing

Id: R8P3n_LSG6I

Length: 11min 23sec (683 seconds)

Published: Wed Feb 12 2020